未验证 提交 9f1c6393 编写于 作者: O openharmony_ci 提交者: Gitee

!4028 快速入门DX意见修改:需同步翻译

Merge pull request !4028 from 葛亚芳/master
...@@ -23,11 +23,12 @@ OpenHarmony提供了一套UI开发框架,即方舟开发框架(ArkUI框架 ...@@ -23,11 +23,12 @@ OpenHarmony提供了一套UI开发框架,即方舟开发框架(ArkUI框架
| 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的程序应用和卡片 | Web前端开发人员 | | 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的程序应用和卡片 | Web前端开发人员 |
| 声明式开发范式 | 扩展的TS语言(eTS) | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 | | 声明式开发范式 | 扩展的TS语言(eTS) | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 |
对于DevEco Studio V2.2 Beta1及更高版本,在使用JS语言开发时,除传统代码方式外,还支持使用低代码方式 对于JS语言开发时,低代码方式在DevEco Studio V2.2 Beta1及更高版本中支持
对于eTS语言开发,除传统代码方式外,低代码方式则在DevEco Studio V3.0 Beta3及更高版本中支持。 对于eTS语言开发,低代码方式在DevEco Studio V3.0 Beta3及更高版本中支持。
OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,遵循JS开发规范,通过可视化界面开发方式快速构建布局,可有效降低开发者的上手成本并提升开发者构建UI界面的效率。 OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,遵循JS开发规范,通过可视化界面开发方式快速构建布局,可有效降低开发者的上手成本并提升开发者构建UI界面的效率。
更多UI框架的开发内容及指导,请参见[UI开发](../ui/arkui-overview.md)
### Ability ### Ability
......
...@@ -50,43 +50,43 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -50,43 +50,43 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
第一个页面内有一个容器、文本和一个按钮,通过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删除画布原有模板组件。操作如下所示:
![zh-cn_image_0000001233208980](figures/zh-cn_image_0000001233208980.gif) ![zh-cn_image_0000001233208980](figures/zh-cn_image_0000001233208980.gif)
2. **添加容器,设置Column容器的样式和属性。**<a name="add_container"></a> 2. 添加容器,设置Column容器的样式和属性。<a name="add_container"></a>
选中UI Control中的Column组件,将其拖至画布。点击右侧属性样式栏中的图标![zh-cn_image_0000001233048996](figures/zh-cn_image_0000001233048996.png)(General),设置Column组件的高度Height为100%,使其占满屏幕;点击右侧属性样式栏中的图标![zh-cn_image_0000001233368860](figures/zh-cn_image_0000001233368860.png)(Feature),设置Column组件的AlignItems样式为center,使得其子组件在水平轴上居中显示。操作如下所示: 选中UI Control中的Column组件,将其拖至画布。点击右侧属性样式栏中的图标![zh-cn_image_0000001233048996](figures/zh-cn_image_0000001233048996.png)(General),设置Column组件的高度Height为100%,使其占满屏幕;点击右侧属性样式栏中的图标![zh-cn_image_0000001233368860](figures/zh-cn_image_0000001233368860.png)(Feature),设置Column组件的AlignItems样式为center,使得其子组件在水平轴上居中显示。操作如下所示:
![zh-cn_image_0000001277488977](figures/zh-cn_image_0000001277488977.gif) ![zh-cn_image_0000001277488977](figures/zh-cn_image_0000001277488977.gif)
3. **添加文本。** 3. 添加文本。
选中UI Control中的Text组件,将其拖至画布,再拖至Column组件的中央区域。点击右侧属性样式栏中的图标![zh-cn_image_0000001277608813](figures/zh-cn_image_0000001277608813.png)(Feature),设置Text组件的Content属性为“this.message”(即“Hello World”);设置组件的FontSize样式为30fp,使得其文字放大;设置组件的TextAlign样式为center,使得组件文字居中显示。再选中画布上的Text组件,拖动放大。操作如下所示: 选中UI Control中的Text组件,将其拖至画布,再拖至Column组件的中央区域。点击右侧属性样式栏中的图标![zh-cn_image_0000001277608813](figures/zh-cn_image_0000001277608813.png)(Feature),设置Text组件的Content属性为“this.message”(即“Hello World”);设置组件的FontSize样式为30fp,使得其文字放大;设置组件的TextAlign样式为center,使得组件文字居中显示。再选中画布上的Text组件,拖动放大。操作如下所示:
![zh-cn_image_0000001235731706](figures/zh-cn_image_0000001233528156.gif) ![zh-cn_image_0000001235731706](figures/zh-cn_image_0000001233528156.gif)
4. **添加按钮。** 4. 添加按钮。
选中UI Control中的Button组件,将其拖至画布,再拖至Text组件下面。点击右侧属性样式栏中的图标![zh-cn_image_0000001277728577](figures/zh-cn_image_0000001277728577.png)(General),设置Button组件的Height为40vp;点击右侧属性样式栏中的图标![zh-cn_image_0000001277809337](figures/zh-cn_image_0000001277809337.png)(Feature),设置Button组件的Label属性为“Next”;设置Button组件的FontSize样式为25fp,使得其文字放大。操作如下所示: 选中UI Control中的Button组件,将其拖至画布,再拖至Text组件下面。点击右侧属性样式栏中的图标![zh-cn_image_0000001277728577](figures/zh-cn_image_0000001277728577.png)(General),设置Button组件的Height为40vp;点击右侧属性样式栏中的图标![zh-cn_image_0000001277809337](figures/zh-cn_image_0000001277809337.png)(Feature),设置Button组件的Label属性为“Next”;设置Button组件的FontSize样式为25fp,使得其文字放大。操作如下所示:
![zh-cn_image_0000001235732402](figures/zh-cn_image_0000001233208988.gif) ![zh-cn_image_0000001235732402](figures/zh-cn_image_0000001233208988.gif)
5. **在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。** 第一个页面效果如下图所示: 5. 在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:
![zh-cn_image_0000001235892798](figures/zh-cn_image_0000001233049004.png) ![zh-cn_image_0000001235892798](figures/zh-cn_image_0000001233049004.png)
## 构建第二个页面 ## 构建第二个页面
1. **创建第二个页面。** 1. 创建第二个页面。
在“**Project**”窗口,打开“**entry &gt; src &gt; main &gt; ets &gt; MainAbility**”,右键点击“**pages**”文件夹,选择“**New &gt; Visual**”,命名为“**second**”,单击“**Finish**”,即完成第二个页面的创建。可以看到文件目录结构如下: 在“**Project**”窗口,打开“**entry &gt; src &gt; main &gt; ets &gt; MainAbility**”,右键点击“**pages**”文件夹,选择“**New &gt; Visual**”,命名为“**second**”,单击“**Finish**”,即完成第二个页面的创建。可以看到文件目录结构如下:
![zh-cn_image_0000001233368868](figures/zh-cn_image_0000001233368868.png) ![zh-cn_image_0000001233368868](figures/zh-cn_image_0000001233368868.png)
2. **[删除画布原有模板组件。](#delete_origin_content)** 2. [删除画布原有模板组件。](#delete_origin_content)
3. **[添加容器,设置Column容器的样式和属性。](#add_container)** 3. [添加容器,设置Column容器的样式和属性。](#add_container)
4. **添加文本。** 4. 添加文本。
- 在second.ets文件中,将本页面的message文本内容设置为“Hi there”,示例如下: - 在second.ets文件中,将本页面的message文本内容设置为“Hi there”,示例如下:
...@@ -109,7 +109,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -109,7 +109,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
![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,使得其文字放大。操作如下所示:
![zh-cn_image_0000001280383937](figures/zh-cn_image_0000001277809361.gif) ![zh-cn_image_0000001280383937](figures/zh-cn_image_0000001277809361.gif)
...@@ -119,7 +119,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -119,7 +119,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。 页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1. **第一个页面跳转到第二个页面。** 1. 第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理ets文件及visual文件。 在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理ets文件及visual文件。
-**index.ets**”示例如下: -**index.ets**”示例如下:
...@@ -150,7 +150,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -150,7 +150,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
![zh-cn_image_0000001235745716](figures/zh-cn_image_0000001233049040.png) ![zh-cn_image_0000001235745716](figures/zh-cn_image_0000001233049040.png)
2. **第二个页面返回到第一个页面。** 2. 第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。需同时处理ets文件及visual文件。 在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。需同时处理ets文件及visual文件。
-**second.ets**”示例如下: -**second.ets**”示例如下:
...@@ -180,7 +180,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -180,7 +180,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
![zh-cn_image_0000001280385809](figures/zh-cn_image_0000001277489017.png) ![zh-cn_image_0000001280385809](figures/zh-cn_image_0000001277489017.png)
3. **打开index.visual或index.ets文件,点击预览器中的** ![zh-cn_image_0000001277608849](figures/zh-cn_image_0000001277608849.png) **按钮进行刷新。** 效果如下图所示: 3. 打开index.visual或index.ets文件,点击预览器中的 ![zh-cn_image_0000001277608849](figures/zh-cn_image_0000001277608849.png) 按钮进行刷新。效果如下图所示:
![zh-cn_image_0000001233528192](figures/zh-cn_image_0000001233528192.png) ![zh-cn_image_0000001233528192](figures/zh-cn_image_0000001233528192.png)
......
...@@ -25,9 +25,10 @@ ...@@ -25,9 +25,10 @@
- **src &gt; main &gt; ets** :用于存放ets源码。 - **src &gt; main &gt; ets** :用于存放ets源码。
- **src &gt; main &gt; ets &gt; MainAbility** :应用/服务的入口。 - **src &gt; main &gt; ets &gt; MainAbility** :应用/服务的入口。
- **src &gt; main &gt; ets &gt; MainAbility &gt; pages** :MainAbility包含的页面。 - **src &gt; main &gt; ets &gt; MainAbility &gt; pages** :MainAbility包含的页面。
- **src &gt; main &gt; ets &gt; MainAbility &gt; pages &gt; index.ets** :pages列表中的第一个页面,即应用的首页入口。
- **src &gt; main &gt; ets &gt; MainAbility &gt; app.ets** :承载Ability生命周期。 - **src &gt; main &gt; ets &gt; MainAbility &gt; app.ets** :承载Ability生命周期。
- **src &gt; main &gt; resources** :用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。 - **src &gt; main &gt; resources** :用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。
- **src &gt; main &gt; config.json** :模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。 - **src &gt; main &gt; config.json** :模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明,详见[应用包结构配置文件的说明](package-structure.md)
- **build-profile.json5** :当前的模块信息 、编译信息配置项,包括 buildOption target配置等。 - **build-profile.json5** :当前的模块信息 、编译信息配置项,包括 buildOption target配置等。
- **hvigorfile.js** :模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。 - **hvigorfile.js** :模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
...@@ -38,8 +39,8 @@ ...@@ -38,8 +39,8 @@
## 构建第一个页面 ## 构建第一个页面
1. **使用文本组件。** 1. 使用文本组件。
工程同步完成后,在“**Project**”窗口,点击“**entry &gt; src &gt; main &gt; ets &gt; MainAbility &gt; pages**”,打开“**index.ets**”文件,可以看到页面由Text组件组成。“**index.ets**”文件的示例如下: 工程同步完成后,在“**Project**”窗口,点击“**entry &gt; src &gt; main &gt; ets &gt; MainAbility &gt; pages**”,打开“**index.ets**”文件,可以看到页面由Text组件组成。“**index.ets**”文件的示例如下:
``` ```
...@@ -62,7 +63,7 @@ ...@@ -62,7 +63,7 @@
} }
``` ```
2. **添加按钮。** 2. 添加按钮。
在默认页面基础上,我们添加一个Button组件,作为按钮接收用户点击的动作,从而实现跳转到另一个页面。“**index.ets**”文件的示例如下: 在默认页面基础上,我们添加一个Button组件,作为按钮接收用户点击的动作,从而实现跳转到另一个页面。“**index.ets**”文件的示例如下:
...@@ -99,19 +100,19 @@ ...@@ -99,19 +100,19 @@
} }
``` ```
3. **在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。** 第一个页面效果如下图所示: 3. 在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:
![zh-cn_image_0000001216239356](figures/zh-cn_image_0000001216239356.png) ![zh-cn_image_0000001216239356](figures/zh-cn_image_0000001216239356.png)
## 构建第二个页面 ## 构建第二个页面
1. **创建第二个页面。** 1. 创建第二个页面。
在“**Project**”窗口,打开“**entry &gt; src &gt; main &gt; ets &gt; MainAbility**”,右键点击“**pages**”文件夹,选择“**New &gt; Page**”,命名为“**second**”,点击“**Finish**”,即完成第二个页面的创建。可以看到文件目录结构如下: 在“**Project**”窗口,打开“**entry &gt; src &gt; main &gt; ets &gt; MainAbility**”,右键点击“**pages**”文件夹,选择“**New &gt; Page**”,命名为“**second**”,点击“**Finish**”,即完成第二个页面的创建。可以看到文件目录结构如下:
![zh-cn_image_0000001223397122](figures/zh-cn_image_0000001223397122.png) ![zh-cn_image_0000001223397122](figures/zh-cn_image_0000001223397122.png)
2. **添加文本及按钮。** 2. 添加文本及按钮。
参照第一个页面,在第二个页面添加Text组件、Button组件等,并设置其样式。“**second.ets**”文件的示例如下: 参照第一个页面,在第二个页面添加Text组件、Button组件等,并设置其样式。“**second.ets**”文件的示例如下:
...@@ -152,7 +153,7 @@ ...@@ -152,7 +153,7 @@
页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。 页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1. **第一个页面跳转到第二个页面。** 1. 第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onClick事件,点击按钮时跳转到第二页。“**index.ets**”文件的示例如下: 在第一个页面中,跳转按钮绑定onClick事件,点击按钮时跳转到第二页。“**index.ets**”文件的示例如下:
...@@ -195,7 +196,7 @@ ...@@ -195,7 +196,7 @@
} }
``` ```
2. **第二个页面返回到第一个页面。** 2. 第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定onClick事件,点击按钮时返回到第一页。“**second.ets**”文件的示例如下: 在第二个页面中,返回按钮绑定onClick事件,点击按钮时返回到第一页。“**second.ets**”文件的示例如下:
...@@ -237,7 +238,7 @@ ...@@ -237,7 +238,7 @@
} }
``` ```
3. **打开index.ets文件,点击预览器中的** ![zh-cn_image_0000001262219043](figures/zh-cn_image_0000001262219043.png) **按钮进行刷新。** 效果如下图所示: 3. 打开index.ets文件,点击预览器中的 ![zh-cn_image_0000001262219043](figures/zh-cn_image_0000001262219043.png) 按钮进行刷新。 效果如下图所示:
![zh-cn_image_0000001260684127](figures/zh-cn_image_0000001260684127.png) ![zh-cn_image_0000001260684127](figures/zh-cn_image_0000001260684127.png)
......
...@@ -54,48 +54,48 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -54,48 +54,48 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
第一个页面内有一个容器、文本和一个按钮,通过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删除画布原有模板组件。操作如下所示:
![zh-cn_image_0000001216600980](figures/zh-cn_image_0000001216600980.gif) ![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,使得其子组件在交叉轴上居中显示。操作如下所示: 选中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) ![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组件,拖动放大。操作如下所示: 选中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) ![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组件,拖动放大。操作如下所示: 选中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) ![zh-cn_image_0000001260928361](figures/zh-cn_image_0000001260928361.gif)
5. **在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。** 第一个页面效果如下图所示: 5. 在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:
![zh-cn_image_0000001216288558](figures/zh-cn_image_0000001216288558.png) ![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**”,即完成第二个页面的创建。可以看到文件目录结构如下: 在“**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) ![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组件,拖动放大。操作如下所示: 选中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) ![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组件,拖动放大。操作如下所示: 选中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) ![zh-cn_image_0000001261017331](figures/zh-cn_image_0000001261017331.gif)
...@@ -105,7 +105,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -105,7 +105,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
页面间的导航可以通过[页面路由router](../ui/ui-js-building-ui-routes.md)来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。 页面间的导航可以通过[页面路由router](../ui/ui-js-building-ui-routes.md)来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1. **第一个页面跳转到第二个页面。** 1. 第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理js文件及visual文件。 在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理js文件及visual文件。
-**index.js**”示例如下: -**index.js**”示例如下:
...@@ -125,7 +125,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -125,7 +125,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
![zh-cn_image_0000001223722586](figures/zh-cn_image_0000001223722586.png) ![zh-cn_image_0000001223722586](figures/zh-cn_image_0000001223722586.png)
2. **第二个页面返回到第一个页面。** 2. 第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。 在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。
需同时处理js文件及visual文件。 需同时处理js文件及visual文件。
...@@ -145,7 +145,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ...@@ -145,7 +145,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
![zh-cn_image_0000001268082945](figures/zh-cn_image_0000001268082945.png) ![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) ![zh-cn_image_0000001261142799](figures/zh-cn_image_0000001261142799.png)
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
- **src &gt; main &gt; js &gt; MainAbility &gt; app.js** :承载Ability生命周期。 - **src &gt; main &gt; js &gt; MainAbility &gt; app.js** :承载Ability生命周期。
- **src &gt; main &gt; resources** :用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。 - **src &gt; main &gt; resources** :用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。
- **src &gt; main &gt; config.json** :模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。 - **src &gt; main &gt; config.json** :模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明,详见[应用包结构配置文件的说明](package-structure.md)
- **build-profile.json5** :当前的模块信息 、编译信息配置项,包括 buildOption target配置等。 - **build-profile.json5** :当前的模块信息 、编译信息配置项,包括 buildOption target配置等。
- **hvigorfile.js** :模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。 - **hvigorfile.js** :模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
## 构建第一个页面 ## 构建第一个页面
1. **使用文本组件。** 1. 使用文本组件。
工程同步完成后,在“**Project**”窗口,点击“**entry &gt; src &gt; main &gt; js &gt; MainAbility &gt; pages&gt; index**”,打开“**index.hml**”文件,设置Text组件内容。“**index.hml**”文件的示例如下: 工程同步完成后,在“**Project**”窗口,点击“**entry &gt; src &gt; main &gt; js &gt; MainAbility &gt; pages&gt; index**”,打开“**index.hml**”文件,设置Text组件内容。“**index.hml**”文件的示例如下:
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
</div> </div>
``` ```
2. **添加按钮,并绑定onclick方法。** 2. 添加按钮,并绑定onclick方法。
在默认页面基础上,我们添加一个button类型的input组件,作为按钮接收用户点击的动作,从而实现跳转到另一个页面。“**index.hml**”文件的示例代码如下: 在默认页面基础上,我们添加一个button类型的input组件,作为按钮接收用户点击的动作,从而实现跳转到另一个页面。“**index.hml**”文件的示例代码如下:
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
``` ```
3. **设置页面样式。** 3. 设置页面样式。
在“**Project**”窗口,点击“**entry &gt; src &gt; main &gt; js &gt; MainAbility &gt; pages&gt; index**”,打开“**index.css**”文件,可以对页面中文本、按钮设置宽高、字体大小、间距等样式。“**index.css**”文件的示例如下: 在“**Project**”窗口,点击“**entry &gt; src &gt; main &gt; js &gt; MainAbility &gt; pages&gt; index**”,打开“**index.css**”文件,可以对页面中文本、按钮设置宽高、字体大小、间距等样式。“**index.css**”文件的示例如下:
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,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)
...@@ -108,12 +108,12 @@ ...@@ -108,12 +108,12 @@
## 构建第二个页面 ## 构建第二个页面
1. **创建第二个页面。** 1. 创建第二个页面。
在“**Project**”窗口,打开“**entry &gt; src &gt; main &gt; js &gt; MainAbility**”,右键点击“**pages**”文件夹,选择“**New &gt; Page**”,命名为“**second**”,点击“**Finish**”,即完成第二个页面的创建。可以看到文件目录结构如下: 在“**Project**”窗口,打开“**entry &gt; src &gt; main &gt; js &gt; MainAbility**”,右键点击“**pages**”文件夹,选择“**New &gt; Page**”,命名为“**second**”,点击“**Finish**”,即完成第二个页面的创建。可以看到文件目录结构如下:
![zh-cn_image_0000001223877210](figures/zh-cn_image_0000001223877210.png) ![zh-cn_image_0000001223877210](figures/zh-cn_image_0000001223877210.png)
2. **添加文本及按钮。** 2. 添加文本及按钮。
参照第一个页面,在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“**second.hml**”文件的示例如下: 参照第一个页面,在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“**second.hml**”文件的示例如下:
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
</div> </div>
``` ```
3. **设置页面样式**。“**second.css**”文件的示例如下: 3. 设置页面样式。“**second.css**”文件的示例如下:
``` ```
.container { .container {
...@@ -165,7 +165,7 @@ ...@@ -165,7 +165,7 @@
页面间的导航可以通过[页面路由router](../ui/ui-js-building-ui-routes.md)来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。 页面间的导航可以通过[页面路由router](../ui/ui-js-building-ui-routes.md)来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1. **第一个页面跳转到第二个页面。** 1. 第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。“**index.js**”示例如下: 在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。“**index.js**”示例如下:
...@@ -181,7 +181,7 @@ ...@@ -181,7 +181,7 @@
} }
``` ```
2. **第二个页面返回到第一个页面。** 2. 第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。“**second.js**”示例如下: 在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。“**second.js**”示例如下:
...@@ -195,7 +195,7 @@ ...@@ -195,7 +195,7 @@
} }
``` ```
3. **打开index文件夹下的任意一个文件,点击预览器中的** ![zh-cn_image_0000001262339067](figures/zh-cn_image_0000001262339067.png) **按钮进行刷新。** 效果如下图所示: 3. 打开index文件夹下的任意一个文件,点击预览器中的 ![zh-cn_image_0000001262339067](figures/zh-cn_image_0000001262339067.png) 按钮进行刷新。效果如下图所示:
![zh-cn_image_0000001216269940](figures/zh-cn_image_0000001216269940.png) ![zh-cn_image_0000001216269940](figures/zh-cn_image_0000001216269940.png)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册