From dc83c0ad12171902c87039c52c1162d17c180828 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=9B=E4=BA=9A=E8=8A=B3?= Date: Mon, 16 May 2022 12:30:50 +0000 Subject: [PATCH] fixed e3734ec from https://gitee.com/ge-yafang/docs/pulls/4028 update zh-cn/application-dev/quick-start/start-with-js-low-code.md. Signed-off-by: @ge-yafang --- .../quick-start/start-with-js-low-code.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/zh-cn/application-dev/quick-start/start-with-js-low-code.md b/zh-cn/application-dev/quick-start/start-with-js-low-code.md index f7f7a6898e..f8b9a22bda 100644 --- a/zh-cn/application-dev/quick-start/start-with-js-low-code.md +++ b/zh-cn/application-dev/quick-start/start-with-js-low-code.md @@ -54,48 +54,48 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 第一个页面内有一个容器、文本和一个按钮，通过Div、Text和Button组件来实现。 -1. **删除画布原有模板组件。** +1. 删除画布原有模板组件。 打开index.visual文件，选中画布中的组件，单击鼠标右键，选择Delete删除画布原有模板组件。操作如下所示： ![zh-cn_image_0000001216600980](figures/zh-cn_image_0000001216600980.gif) -2. **添加容器，设置Div容器的样式和属性。** +2. 添加容器，设置Div容器的样式和属性。 选中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 > src > main > js > MainAbility**”，右键点击“**pages**”文件夹，选择“**New > 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) -- GitLab