未验证 提交 e3734ecf 编写于 作者: 葛亚芳 提交者: Gitee

update zh-cn/application-dev/quick-start/start-with-js-low-code.md.

Signed-off-by: N@ge-yafang <geyafang@huawei.com>
上级 f7496f54
......@@ -54,48 +54,48 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
第一个页面内有一个容器、文本和一个按钮,通过Div、Text和Button组件来实现。
1. **删除画布原有模板组件。**<a name= delete_origin_content></a>
1. 删除画布原有模板组件。<a name= delete_origin_content></a>
打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件。操作如下所示:
![zh-cn_image_0000001216600980](figures/zh-cn_image_0000001216600980.gif)
2. **添加容器,设置Div容器的样式和属性。**<a name = add_container></a>
2. 添加容器,设置Div容器的样式和属性。<a name = add_container></a>
选中UI Control中的Div组件,将其拖至画布。点击右侧属性样式栏中的样式图标![zh-cn_image_0000001260226691](figures/zh-cn_image_0000001260226691.png)(General),设置Div组件的高度Height为100%,使其占满屏幕;点击右侧属性样式栏中的样式图标![zh-cn_image_0000001215226858](figures/zh-cn_image_0000001215226858.png)(Flex),设置Div组件的FlexDirection样式为column,使Div的主轴垂直;设置Div组件的JustifyContent样式为center,使得其子组件在主轴上居中显示;设置Div组件的AlignItems样式为center,使得其子组件在交叉轴上居中显示。操作如下所示:
![zh-cn_image_0000001216448880](figures/zh-cn_image_0000001216448880.gif)
3. **添加文本。**
3. 添加文本。
选中UI Control中的Text组件,将其拖至Div组件的中央区域。点击右侧属性样式栏中的属性图标![zh-cn_image_0000001215066868](figures/zh-cn_image_0000001215066868.png)(Properties),设置Text组件的Content属性为“Hello World”;点击右侧属性样式栏中的样式图标![zh-cn_image_0000001215386842](figures/zh-cn_image_0000001215386842.png)(Feature),设置组件的FontSize样式为60px,使得其文字放大;设置组件的TextAlign样式为center,使得组件文字居中显示。再选中画布上的Text组件,拖动放大。操作如下所示:
![zh-cn_image_0000001216446670](figures/zh-cn_image_0000001216446670.gif)
4. **添加按钮。**
4. 添加按钮。
选中UI Control中的Button组件,将其拖至Text组件下面。点击右侧属性样式栏中的属性图标![zh-cn_image_0000001260106745](figures/zh-cn_image_0000001260106745.png)(Properties),设置Button组件的Value属性为“Next”,点击右侧属性样式栏中的样式图标![zh-cn_image_0000001259866741](figures/zh-cn_image_0000001259866741.png)(Feature),设置组件的FontSize样式为40px,使得其文字放大;再选中画布上的Button组件,拖动放大。操作如下所示:
![zh-cn_image_0000001260928361](figures/zh-cn_image_0000001260928361.gif)
5. **在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。** 第一个页面效果如下图所示:
5. 在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:
![zh-cn_image_0000001216288558](figures/zh-cn_image_0000001216288558.png)
## 构建第二个页面
1. **创建第二个页面。**
1. 创建第二个页面。
在“**Project**”窗口,打开“**entry &gt; src &gt; main &gt; js &gt; MainAbility**”,右键点击“**pages**”文件夹,选择“**New &gt; Visual**”,命名为“**second**”,单击“**Finish**”,即完成第二个页面的创建。可以看到文件目录结构如下:
![zh-cn_image_0000001223882030](figures/zh-cn_image_0000001223882030.png)
2. **[删除画布原有模板组件。](#delete_origin_content)**
2. [删除画布原有模板组件。](#delete_origin_content)
3. **[添加容器,设置Div容器的样式和属性。](#add_container)**
3. [添加容器,设置Div容器的样式和属性。](#add_container)
4. **添加文本。**
4. 添加文本。
选中Text组件,拖至Div组件的中央区域。点击右侧属性样式栏中的属性图标![zh-cn_image_0000001260227453](figures/zh-cn_image_0000001260227453.png)(Properties),设置Text组件的Content属性为“Hi there”;点击右侧属性样式栏中的样式图标![zh-cn_image_0000001260107497](figures/zh-cn_image_0000001260107497.png)(Feature),设置组件的FontSize样式为60px;设置组件的TextAlign样式为center。再选中画布上的Text组件,拖动放大。操作如下所示:
![zh-cn_image_0000001216614132](figures/zh-cn_image_0000001216614132.gif)
5. **添加按钮。**
5. 添加按钮。
选中UI Control中的Button组件,将其拖至Text组件下面。点击右侧属性样式栏中的属性图标![zh-cn_image_0000001215227618](figures/zh-cn_image_0000001215227618.png)(Properties),设置Button组件的Value属性为“Back”,点击右侧属性样式栏中的样式图标![zh-cn_image_0000001259987441](figures/zh-cn_image_0000001259987441.png)(Feature),设置组件的FontSize样式为40px,使得其文字放大;再选中画布上的Button组件,拖动放大。操作如下所示:
![zh-cn_image_0000001261017331](figures/zh-cn_image_0000001261017331.gif)
......@@ -105,7 +105,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
页面间的导航可以通过[页面路由router](../ui/ui-js-building-ui-routes.md)来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1. **第一个页面跳转到第二个页面。**
1. 第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理js文件及visual文件。
-**index.js**”示例如下:
......@@ -125,7 +125,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
![zh-cn_image_0000001223722586](figures/zh-cn_image_0000001223722586.png)
2. **第二个页面返回到第一个页面。**
2. 第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。
需同时处理js文件及visual文件。
......@@ -145,7 +145,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
![zh-cn_image_0000001268082945](figures/zh-cn_image_0000001268082945.png)
3. **打开index.visual或index.js文件,点击预览器中的** ![zh-cn_image_0000001261979271](figures/zh-cn_image_0000001261979271.png) **按钮进行刷新。** 效果如下图所示:
3. 打开index.visual或index.js文件,点击预览器中的 ![zh-cn_image_0000001261979271](figures/zh-cn_image_0000001261979271.png) 按钮进行刷新。效果如下图所示:
![zh-cn_image_0000001261142799](figures/zh-cn_image_0000001261142799.png)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册