提交 3845f9d3 编写于 作者: G ge-yafang

update docs

Signed-off-by: Nge-yafang <geyafang@huawei.com>
上级 d90e4f3c
...@@ -17,7 +17,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -17,7 +17,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
- 直接创建一个支持低代码开发的新工程以进行开发。本文以此方式为例进行说明。 - 直接创建一个支持低代码开发的新工程以进行开发。本文以此方式为例进行说明。
- 在已有工程中,创建Visual文件来进行开发。 - 在已有工程中,创建visual文件来进行开发。
## 创建新工程支持低代码开发 ## 创建新工程支持低代码开发
...@@ -46,9 +46,9 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -46,9 +46,9 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
## 构建第一个页面 ## 构建第一个页面
工程同步完成后,第一个页面已有一个容器、文本(Hello World)显示。为了更详细地了解低代码开发,我们将删除画布原有模板组件,从零开始完成页面的添加、设置。 工程同步完成后,第一个页面已有一个容器、一段文本(Hello World)显示。为了更详细地了解低代码开发,我们将删除画布原有模板组件,从零开始完成页面的添加、设置。
第一个页面内有一个容器、文本和一个按钮,通过Column、Text和Button组件来实现。其中,Column为沿垂直方向布局的容器组件,具体使用请见[Column](../reference/arkui-ts/ts-container-column.md) 第一个页面内有一个容器、一段文本和一个按钮,通过Column、Text和Button组件来实现。其中,Column为沿垂直方向布局的容器组件,具体使用请见[Column](../reference/arkui-ts/ts-container-column.md)
1. 删除画布原有模板组件。<a name="delete_origin_content"></a> 1. 删除画布原有模板组件。<a name="delete_origin_content"></a>
打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件。操作如下所示: 打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件。操作如下所示:
...@@ -107,7 +107,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -107,7 +107,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
``` ```
- 选中Text组件,将其拖至画布,再拖至Column组件的中央区域。点击右侧属性样式栏中的图标![zh-cn_image_0000001277488985](figures/zh-cn_image_0000001277488985.png)(Feature),设置Text组件的Content属性为“this.message”(即“Hi there”);设置Text组件的FontSize样式为30fp;设置组件的TextAlign样式为center。再选中画布上的Text组件,拖动放大。操作如下所示: - 选中Text组件,将其拖至画布,再拖至Column组件的中央区域。点击右侧属性样式栏中的图标![zh-cn_image_0000001277488985](figures/zh-cn_image_0000001277488985.png)(Feature),设置Text组件的Content属性为“this.message”(即“Hi there”);设置Text组件的FontSize样式为30fp;设置组件的TextAlign样式为center。再选中画布上的Text组件,拖动放大。操作如下所示:
![zh-cn_image_0000001280255513](figures/zh-cn_image_0000001277608817.gif) ![zh-cn_image_0000001280255513](figures/zh-cn_image_0000001277608817.gif)
5. 添加按钮。 5. 添加按钮。
选中UI Control中的Button组件,将其拖至画布,再拖至Text组件下面。点击右侧属性样式栏中的图标![zh-cn_image_0000001233528160](figures/zh-cn_image_0000001233528160.png)(General),设置Button组件的Height为40vp;点击右侧属性样式栏中的图标![zh-cn_image_0000001277728597](figures/zh-cn_image_0000001277728597.png)(Feature),设置Button组件的Value属性为“Back”;设置组件的FontSize样式为25fp,使得其文字放大。操作如下所示: 选中UI Control中的Button组件,将其拖至画布,再拖至Text组件下面。点击右侧属性样式栏中的图标![zh-cn_image_0000001233528160](figures/zh-cn_image_0000001233528160.png)(General),设置Button组件的Height为40vp;点击右侧属性样式栏中的图标![zh-cn_image_0000001277728597](figures/zh-cn_image_0000001277728597.png)(Feature),设置Button组件的Value属性为“Back”;设置组件的FontSize样式为25fp,使得其文字放大。操作如下所示:
......
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
``` ```
2. 添加按钮。 2. 添加按钮。
在默认页面基础上,我们添加一个Button组件,作为按钮接收用户点击的动作,从而实现跳转到另一个页面。“**index.ets**”文件的示例如下: 在默认页面基础上,我们添加一个Button组件,作为按钮响应用户点击,从而实现跳转到另一个页面。“**index.ets**”文件的示例如下:
``` ```
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
Text(this.message) Text(this.message)
.fontSize(50) .fontSize(50)
.fontWeight(FontWeight.Bold) .fontWeight(FontWeight.Bold)
// 添加按钮,以接收用户点击 // 添加按钮,以响应用户点击
Button() { Button() {
Text('Next') Text('Next')
.fontSize(30) .fontSize(30)
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
Text(this.message) Text(this.message)
.fontSize(50) .fontSize(50)
.fontWeight(FontWeight.Bold) .fontWeight(FontWeight.Bold)
// 添加按钮,以接收用户点击 // 添加按钮,以响应用户点击
Button() { Button() {
Text('Next') Text('Next')
.fontSize(30) .fontSize(30)
......
...@@ -15,7 +15,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -15,7 +15,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
- 直接创建一个支持低代码开发的新工程以进行开发。本文以此方式为例进行说明。 - 直接创建一个支持低代码开发的新工程以进行开发。本文以此方式为例进行说明。
- 在已有工程中,创建Visual文件来进行开发。 - 在已有工程中,创建visual文件来进行开发。
## 创建新工程支持低代码开发 ## 创建新工程支持低代码开发
...@@ -50,9 +50,9 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -50,9 +50,9 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
## 构建第一个页面 ## 构建第一个页面
工程同步完成后,第一个页面已有一个容器、文本(Hello World)显示。为了更详细地了解低代码开发,我们将删除画布原有模板组件,从零开始完成页面的添加、设置。 工程同步完成后,第一个页面已有一个容器、一段文本(Hello World)显示。为了更详细地了解低代码开发,我们将删除画布原有模板组件,从零开始完成页面的添加、设置。
第一个页面内有一个容器、文本和一个按钮,通过Div、Text和Button组件来实现。 第一个页面内有一个容器、一段文本和一个按钮,通过Div、Text和Button组件来实现。
1. 删除画布原有模板组件。<a name= delete_origin_content></a> 1. 删除画布原有模板组件。<a name= delete_origin_content></a>
打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件。操作如下所示: 打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件。操作如下所示:
......
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
``` ```
2. 添加按钮,并绑定onclick方法。 2. 添加按钮,并绑定onclick方法。
在默认页面基础上,我们添加一个button类型的input组件,作为按钮接收用户点击的动作,从而实现跳转到另一个页面。“**index.hml**”文件的示例代码如下: 在默认页面基础上,我们添加一个button类型的input组件,作为按钮响应用户点击,从而实现跳转到另一个页面。“**index.hml**”文件的示例代码如下:
``` ```
...@@ -102,6 +102,7 @@ ...@@ -102,6 +102,7 @@
4. 在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示: 4. 在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:
![zh-cn_image_0000001216084724](figures/zh-cn_image_0000001216084724.png) ![zh-cn_image_0000001216084724](figures/zh-cn_image_0000001216084724.png)
...@@ -214,4 +215,4 @@ ...@@ -214,4 +215,4 @@
恭喜您已经使用JS语言开发(传统代码方式)完成了第一个OpenHarmony应用,快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。 恭喜您已经使用JS语言开发(传统代码方式)完成了第一个OpenHarmony应用,快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。
## 相关实例 ## 相关实例
针对使用JS语言(传统代码方式)开发快速入门,有以下相关实例可供参考: 针对使用JS语言(传统代码方式)开发快速入门,有以下相关实例可供参考:
- [`JsHelloWorld`:你好世界(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/common/JsHelloWorld) - [`JsHelloWorld`:你好世界(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/common/JsHelloWorld)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册