update docs

Signed-off-by: Nzengyawen <zengyawen1@huawei.com>

zh-cn/application-dev/quick-start/Readme-CN.md

@@ -9,5 +9,10 @@
         - [通过导入Sample方式创建新工程](import-sample-to-create-project.md)
     - [配置OpenHarmony应用签名信息](configuring-openharmony-app-signature.md)
     - [安装运行OpenHarmony应用](installing-openharmony-app.md)
+- 快速入门
+    - [前言](start-overview.md)
+    - [使用eTS语言开发](start-with-ets.md)
+    - [使用JS语言开发（传统代码方式）](start-with-js.md)
+    - [使用JS语言开发（低代码方式）](start-with-js-low-code.md)
 - [包结构说明](package-structure.md)
-- [资源文件的分类](basic-resource-file-categories.md)
+

zh-cn/application-dev/quick-start/start-overview.md

+# 前言
+
+
+本文档适用于OpenHarmony应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用（如下图所示），快速了解工程目录的主要文件，熟悉OpenHarmony应用开发流程。
+
+
+![zh-cn_image_0000001261809595](figures/zh-cn_image_0000001261809595.png)
+
+
+在开始之前，您需要了解有关OpenHarmony应用的一些基本概念：UI框架的简单说明、Ability的基本概念。
+
+
+## 基本概念
+
+
+### UI框架
+
+OpenHarmony提供了一套UI开发框架，即方舟开发框架（ArkUI框架）。方舟开发框架可为开发者提供进行应用UI开发时所必须的能力，比如多种组件、布局计算、动画能力、UI交互、绘制等等。
+
+方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于JS扩展的类Web开发范式（简称“类Web开发范式”）和基于TS扩展的声明式开发范式（简称“声明式开发范式”）。以下是两种开发范式的简单对比。
+
+  | **开发范式名称** | **语言生态** | **UI更新方式** | **适用场景** | **适用人群** | 
+| -------- | -------- | -------- | -------- | -------- |
+| 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的类小程序应用和卡片 | Web前端开发人员 | 
+| 声明式开发范式 | 扩展的TS语言（eTS） | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 | 
+
+对于DevEco Studio V2.2 Beta1及更高版本，在使用JS语言开发时，除传统代码方式外，还支持使用低代码方式。OpenHarmony低代码开发方式，具有丰富的UI界面编辑功能，遵循[JS开发规范](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791)，通过可视化界面开发方式快速构建布局，可有效降低用户的上手成本并提升用户构建UI界面的效率。
+
+
+### Ability
+
+[Ability](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ability/ability-brief.md)是应用所具备能力的抽象，也是应用程序的重要组成部分。一个应用可以具备多种能力（即可以包含多个Ability）。OpenHarmony支持应用以Ability为单位进行部署。
+
+Ability可以分为[FA（Feature Ability）](https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/glossary/glossary.md#f)和[PA（Particle Ability）](https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/glossary/glossary.md#p)两种类型，每种类型为开发者提供了不同的模板，以便实现不同的业务功能。其中，FA支持[Page Ability](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ability/fa-pageability.md)模板，以提供与用户交互的能力。一个Page Ability可以含有一个或多个页面（即Page），Page Ability与Page的关系如下图所示：
+
+![zh-cn_image_0000001215206886](figures/zh-cn_image_0000001215206886.png)
+
+快速入门提供了一个含有两个页面的Page Ability实例。更多Ability的开发内容及指导，请参见[Ability](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ability/ability-brief.md)。
+
+
+## 工具准备
+
+1. 安装最新版[DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)。
+
+2. 请参考[[配置OpenHarmony SDK](configuring-openharmony-sdk.md)](zh-cn_topic_0000001113561194.xml)，完成**DevEco Studio**的安装和开发环境配置。
+
+完成上述操作及基本概念的理解后，可参照[使用eTS语言开发](start-with-ets.md)、[使用JS语言开发（传统代码方式）](start-with-js.md)、[使用JS语言开发（低代码方式）](start-with-js-low-code.md)中的任一章节进行下一步体验和学习。

zh-cn/application-dev/quick-start/start-with-ets.md

+# 使用eTS语言开发
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 请使用**DevEco Studio V3.0.0.601 Beta1**及更高版本。
+> 
+> 为确保运行效果，本文以使用**DevEco Studio V3.0.0.900 Beta2**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。
+
+
+## 创建eTS工程
+
+1. 打开**DevEco Studio**，点击**File** > **New > Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+   ![zh-cn_image_0000001260189591](figures/zh-cn_image_0000001260189591.png)
+
+2. 进入配置工程界面，**UI Syntax**选择“**eTS**”，其他参数保持默认设置即可。
+   ![zh-cn_image_0000001217063248](figures/zh-cn_image_0000001217063248.png)
+
+3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
+
+
+## eTS工程项目文件
+
+- **entry：**OpenHarmony工程模块，编译构建生成一个Hap包。
+  - **entry > src > main > ets**：用于存放ets源码。
+     - **entry > src >main > ets > MainAbility：**应用/服务的入口。
+        - **entry > src >main > ets > MainAbility > pages：**MainAbility包含的页面。
+        - **entry > src >main > ets >  MainAbility > app.ets**：承载Ability生命周期。
+  - **entry > src > main > resources：**用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。
+  - **entry > src > main >config.json：**模块配置文件。主要包含HAP包的配置信息、应用在具体设备上的配置信息以及应用的全局配置信息。
+  - **entry > build-profile.json5：**模块的模块信息 、编译信息配置项，包括 buildOption target配置等。
+  - **entry > hvigorfile.js**：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
+
+- **build-profile.json5：**应用级配置信息，包括签名、产品配置等。
+
+- **hvigorfile.js：**应用级编译构建任务脚本。
+
+
+## 构建第一个页面
+
+1. **文本组件。**
+   工程同步完成后，在“**Project**”窗口，点击“**entry > src > main > ets > MainAbility > pages**”，打开“**index.ets**”文件，可以看到页面由Text组件组成。“**index.ets**”文件的示例如下：
+
+   
+   ```
+   @Entry
+   @Component
+   struct Index {
+     @State message: string = 'Hello World'
+   
+     build() {
+       Row() {
+         Column() {
+           Text(this.message)
+             .fontSize(50)
+             .fontWeight(FontWeight.Bold)
+         }
+         .width('100%')
+       }
+       .height('100%')
+     }
+   }
+   ```
+
+2. **添加按钮。**
+   在默认页面基础上，我们添加一个Button组件，作为按钮接受用户点击的动作，从而实现跳转到另一个页面。“**index.ets**”文件的示例如下：
+
+   
+   ```
+   @Entry
+   @Component
+   struct Index {
+     @State message: string = 'Hello World'
+   
+     build() {
+       Row() {
+         Column() {
+           Text(this.message)
+             .fontSize(50)
+             .fontWeight(FontWeight.Bold)
+           // 添加按钮，以接受用户点击
+           Button(){
+             Text('Next')
+             .fontSize(30)
+             .fontWeight(FontWeight.Bold)
+           }.type(ButtonType.Capsule)
+           .margin({
+             top:20
+           })
+           .backgroundColor('#0D9FFB')
+           .width('40%')
+           .height('5%')
+         }
+         .width('100%')
+       }
+       .height('100%')
+     }
+   }
+   ```
+
+3. **在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。**第一个页面效果如下图所示：
+   ![zh-cn_image_0000001216239356](figures/zh-cn_image_0000001216239356.png)
+
+
+## 构建第二个页面
+
+1. **创建第二个页面。**
+   在“**Project**”窗口，打开“**entry > src > main > ets > MainAbility**”，右键点击“**pages**”文件夹，选择“**New > Page**”，命名为“**second**”，点击“**Finish**”，即完成第二个页面的创建。可以看到文件目录结构如下：
+
+   ![zh-cn_image_0000001261233671](figures/zh-cn_image_0000001261233671.png)
+
+2. **添加文本及按钮。**
+   参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“**second.ets**”文件的示例如下：
+
+   
+   ```
+   @Entry
+   @Component
+   struct Second {
+     @State message: string = 'Hi there'
+   build() {
+     Row() {
+       Column() {
+         Text(this.message)
+           .fontSize(50)
+           .fontWeight(FontWeight.Bold)
+         Button() {
+           Text('Back')
+             .fontSize(25)
+             .fontWeight(FontWeight.Bold)
+         }.type(ButtonType.Capsule)
+         .margin({
+           top: 20
+         })
+         .backgroundColor('#0D9FFB')
+         .width('40%')
+         .height('5%')
+       }
+       .width('100%')
+     }
+     .height('100%')
+   }
+   }
+   ```
+
+
+## 实现页面间的跳转
+
+页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面，从而实现跳转。使用页面路由请导入router模块。
+
+1. **第一个页面跳转到第二个页面。**
+   在第一个页面中，跳转按钮绑定onClick方法，当按钮点击时触发页面路由变化，跳转到第二页。“**index.ets**”文件的示例如下：
+
+   
+   ```
+   import router from '@system.router';
+   
+   @Entry
+   @Component
+   struct Index {
+     @State message: string = 'Hello World'
+   
+     build() {
+       Row() {
+         Column() {
+           Text(this.message)
+             .fontSize(50)
+             .fontWeight(FontWeight.Bold)
+           // 添加按钮，以接受用户点击
+           Button(){
+             Text('Next')
+             .fontSize(30)
+             .fontWeight(FontWeight.Bold)
+           }.type(ButtonType.Capsule)
+           .margin({
+             top:20
+           })
+           .backgroundColor('#0D9FFB')
+           .width('40%')
+           .height('5%')
+           // 跳转按钮绑定onClicke方法，点击时触发页面路由变化，跳转到第二页
+           .onClick(()=>{
+             router.push({uri:'pages/second'})
+           })
+         }
+         .width('100%')
+       }
+       .height('100%')
+     }
+   }
+   ```
+
+2. **第二个页面返回到第一个页面。**
+   在第二个页面中，返回按钮绑定onClick方法，当按钮点击时触发页面路由返回，返回到第一页。“**second.ets**”文件的示例如下：
+
+   
+   ```
+   import router from '@system.router';
+   
+   @Entry
+   @Component
+   struct Second {
+       @State message: string = 'Hi there'
+       build() {
+           Row() {
+               Column() {
+                   Text(this.message)
+                       .fontSize(50)
+                       .fontWeight(FontWeight.Bold)
+                   Button() {
+                       Text('Back')
+                           .fontSize(25)
+                           .fontWeight(FontWeight.Bold)
+                   }.type(ButtonType.Capsule)
+                   .margin({
+                       top: 20
+                   })
+                   .backgroundColor('#0D9FFB')
+                   .width('40%')
+                   .height('5%')
+                   // 返回按钮绑定onClicke方法，点击时触发页面返回，返回到第一页
+                   .onClick(()=>{
+                       router.back()
+                   })
+               }
+               .width('100%')
+           }
+           .height('100%')
+       }
+   }
+   ```
+
+3. **打开index.ets文件，点击预览器中的**![zh-cn_image_0000001262219043](figures/zh-cn_image_0000001262219043.png)**按钮进行刷新。**效果如下图所示：
+   ![zh-cn_image_0000001260684127](figures/zh-cn_image_0000001260684127.png)
+
+
+## 使用真机运行应用
+
+1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
+
+2. 点击**File >Project Structure** > **Project > Signing**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
+   ![zh-cn_image_0000001217365030](figures/zh-cn_image_0000001217365030.png)
+
+3. **在编辑窗口右上角的工具栏，点击**![zh-cn_image_0000001262206247](figures/zh-cn_image_0000001262206247.png)**按钮运行。**效果如下图所示：
+   ![zh-cn_image_0000001217526428](figures/zh-cn_image_0000001217526428.png)

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

+# 使用JS语言开发（低代码方式）
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 该特性在**DevEco Studio V2.2 Beta1**及更高版本中支持。
+> 
+> 为确保运行效果，本文以使用**DevEco Studio V3.0.0.900 Beta2**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。
+
+
+OpenHarmony低代码开发方式，具有丰富的UI界面编辑功能，遵循[JS开发规范](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791)，通过可视化界面开发方式快速构建布局，可有效降低用户的上手成本并提升用户构建UI界面的效率。
+
+
+使用低代码开发应用或服务有以下两种开发方式：
+
+
+- 直接创建一个支持低代码开发的新工程以进行开发。本文以此方式为例进行说明。
+
+- 在已有工程中，创建Visual文件来进行开发。
+
+
+## 创建新工程支持低代码开发
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 该功能在DevEco Studio 3.0 Beta2及更高版本中支持，且compileSdkVersion必须为7或以上。
+
+1. 打开**DevEco Studio**，点击**File** > **New > Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+   ![zh-cn_image_0000001259949659](figures/zh-cn_image_0000001259949659.png)
+
+2. 进入配置工程界面，打开“**Super Visual Enable**”开关**，UI Syntax**选择“**JS**”，其他参数保持默认设置即可。
+   ![zh-cn_image_0000001261786055](figures/zh-cn_image_0000001261786055.png)
+
+3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
+
+
+## 低代码开发工程项目文件
+
+工程同步完成后，自动生成以下目录结构：
+
+![zh-cn_image_0000001216753776](figures/zh-cn_image_0000001216753776.png)
+
+- **pages > index > index.js**：低代码页面的逻辑描述文件，定义了页面里所用到的所有的逻辑关系，比如数据、事件等，详情请参考[JS语法参考](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/js-framework-syntax-js-0000000000611432)。如果创建了多个低代码页面，则pages目录下会生成多个页面文件夹及对应的js文件。
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+  > 使用低代码页面开发时，其关联js文件的同级目录中不能包含hml和css页面，例如上图中的**js > MainAbility > pages > index**目录下不能包含hml与css文件，否则会出现编译报错。
+
+- **pages > index > index.visual**：visual文件存储低代码页面的数据模型，双击该文件即可打开低代码页面，进行可视化开发设计。如果创建了多个低代码页面，则pages目录下会生成多个页面文件夹及对应的visual文件。
+
+
+## 构建第一个页面
+
+工程同步完成后，第一个页面已有一个容器、文本（Hello World）显示。为了更详细地了解低代码开发，我们将删除画布原有模板组件，从零开始完成页面的添加、设置。
+
+第一个页面内有一个容器、文本和一个按钮，通过Div、Text和Button组件来实现。
+
+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>
+   选中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. **添加文本。**
+   选中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. **添加按钮。**
+   选中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，打开预览器。**第一个页面效果如下图所示：
+   ![zh-cn_image_0000001216288558](figures/zh-cn_image_0000001216288558.png)
+
+
+## 构建第二个页面
+
+1. **创建第二个页面。**
+   在“**Project**”窗口，打开“**entry &gt; src &gt; main &gt; js &gt; MainAbility**”，右键点击“**pages**”文件夹，选择“**New &gt; Visual**”，命名为“**second**”，单击“**Finish**”，即完成第二个页面的创建。可以看到文件目录结构如下：
+
+   ![zh-cn_image_0000001261129245](figures/zh-cn_image_0000001261129245.png)
+
+2. **[删除画布原有模板组件。](#delete_origin_content)**
+
+3. **[添加容器，设置Div容器的样式和属性](#add_container)**
+
+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. **添加按钮。**
+   选中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)
+
+
+## 实现页面间的跳转
+
+页面间的导航可以通过[页面路由router](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ui-js-building-ui-routes.md)来实现。页面路由router根据页面uri找到目标页面，从而实现跳转。使用页面路由请导入router模块。
+
+1. **第一个页面跳转到第二个页面。**
+     在第一个页面中，跳转按钮绑定onclick方法，当按钮点击时触发页面路由变化，跳转到第二页。需同时处理js文件及visual文件。
+   - “**index.js**”示例如下：
+     
+     ```
+     import router from '@system.router';  
+     
+     export default {     
+         onclick() {         
+             router.push ({             
+                 uri:'pages/second/second', // 指定要跳转的页面         
+             })     
+         } 
+     }
+     ```
+   
+   - “**index.viusal**”： 打开index.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001215388136](figures/zh-cn_image_0000001215388136.png)（Events），鼠标点击Click事件的输入框，选择onclick事件，如下所示：
+     ![zh-cn_image_0000001261137889](figures/zh-cn_image_0000001261137889.png)
+
+2. **第二个页面返回到第一个页面。**
+   在第二个页面中，返回按钮绑定onClick方法，当按钮点击时触发页面路由返回，返回到第二页。
+
+   需同时处理js文件及visual文件。
+
+   - “**second.js**”示例如下：
+     
+      ```
+      import router from '@system.router';  
+      
+      export default {     
+          back() {         
+              router.back ()     
+          } 
+      }
+      ```
+   - “**second.viusal**”： 打开second.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001215388262](figures/zh-cn_image_0000001215388262.png)（Events），鼠标点击Click事件的输入框，选择back事件，如下所示：
+
+   ![zh-cn_image_0000001216618320](figures/zh-cn_image_0000001216618320.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)
+
+
+## 使用真机运行应用
+
+1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
+
+2. 点击**File &gt;Project Structure** &gt; **Project &gt; Signing**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
+   ![zh-cn_image_0000001217527948](figures/zh-cn_image_0000001217527948.png)
+
+3. **在编辑窗口右上角的工具栏，点击**![zh-cn_image_0000001262207811](figures/zh-cn_image_0000001262207811.png)**按钮运行。**效果如下图所示：
+   ![zh-cn_image_0000001262127855](figures/zh-cn_image_0000001262127855.png)

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

+# 使用JS语言开发（传统代码方式）
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 为确保运行效果，本文以使用**DevEco Studio V3.0.0.900 Beta2**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。
+
+
+## 创建JS工程
+
+1. 打开**DevEco Studio**，点击**File** > **New > Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+   ![zh-cn_image_0000001215029852](figures/zh-cn_image_0000001215029852.png)
+
+2. 进入配置工程界面，**UI Syntax**选择“**JS**”，其他参数保持默认设置即可。
+   ![zh-cn_image_0000001217384890](figures/zh-cn_image_0000001217384890.png)
+
+3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
+
+
+## JS工程项目文件
+
+- **entry：**OpenHarmony工程模块，编译构建生成一个Hap包。
+  - **entry > src > main > js**：用于存放js源码。
+     - **entry > src >main > js > MainAbility：**应用/服务的入口。
+        - **entry > src >main > js > MainAbility > pages：**MainAbility包含的页面。
+        - **entry > src >main >js > MainAbility > app.js**：承载Ability生命周期。
+  - **entry > src > main > resources：**用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。
+  - **entry > src > main > config.json**：模块配置文件。主要包含HAP包的配置信息、应用在具体设备上的配置信息以及应用的全局配置信息。
+  - **entry > build-profile.json5：**模块的模块信息 、编译信息配置项，包括 buildOption target配置等。
+  - **entry > hvigorfile.js**：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
+
+- **build-profile.json5：**应用级配置信息，包括签名、产品配置等。
+
+- **hvigorfile.js：**应用级编译构建任务脚本。
+
+
+## 构建第一个页面
+
+1. **文本组件。**
+   工程同步完成后，在“**Project**”窗口，点击“**entry > src >main > js > MainAbility > pages> index**”，打开“**index.hml**”文件，设置Text组件内容。“**index.hml**”文件的示例如下：
+
+   
+   ```
+   <div class="container">
+       <text class="title">
+           Hello World
+       </text>
+   </div>
+   ```
+
+2. **添加按钮，并绑定onclick方法。**
+   在默认页面基础上，我们添加一个button类型的input组件，作为按钮接受用户点击的动作，从而实现跳转到另一个页面。“**index.hml**”文件的示例代码如下：
+
+   
+   ```
+   <div class="container">
+       <text class="title">
+           Hello World
+       </text>
+       <!-- 添加按钮，值为Next，并绑定onclick方法-->
+       <input class="btn" type="button" value="Next" onclick="onclick"></input>
+   </div>
+   ```
+
+3. **设置页面样式。**
+   在“**Project**”窗口，点击“**entry &gt; src &gt;main &gt; js &gt; MainAbility &gt; pages&gt; index**”，打开“**index.css**”文件，可以对页面中文本、按钮设置宽高、字体大小、间距等样式。“**index.css**”文件的示例如下：
+
+   
+   ```
+   .container {
+       display: flex;
+       flex-direction: column;
+       justify-content: center;
+       align-items: center;
+       left: 0px;
+       top: 0px;
+       width: 100%;
+       height: 100%;
+   }
+   
+   .title {
+       font-size: 100px;
+       font-weight: bold;
+       text-align: center;
+       width: 100%;
+       margin: 10px;
+   }
+   .btn{
+       font-size: 60px;
+       font-weight: bold;
+       text-align: center;
+       width: 40%;
+       height: 5%;
+       margin-top: 20px;
+   }
+   ```
+
+4. **在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。**第一个页面效果如下图所示：
+   ![zh-cn_image_0000001216084724](figures/zh-cn_image_0000001216084724.png)
+
+
+## 构建第二个页面
+
+1. **创建第二个页面。**
+   在“**Project**”窗口，打开“**entry &gt; src &gt; main &gt; js &gt; MainAbility**”，右键点击“**pages**”文件夹，选择“**New &gt; Page**”，命名为“**second**”，点击“**Finish**”，即完成第二个页面的创建。可以看到文件目录结构如下：
+
+   ![zh-cn_image_0000001261233695](figures/zh-cn_image_0000001261233695.png)
+
+2. **添加文本及按钮。**
+   参照第一个页面，在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“**second.hml**”文件的示例如下：
+
+   
+   ```
+   <div class="container">
+     <text class="title">
+       Hi there
+     </text>
+     <!-- 添加按钮，值为Back，并绑定back方法-->
+     <input class="btn" type="button" value="Back" onclick="back"></input>
+   </div>
+   ```
+
+3. **设置页面样式**。“**second.css**”文件的示例如下：
+   
+   ```
+   .container {
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     left: 0px;
+     top: 0px;
+     width: 100%;
+     height: 100%;
+   }
+   
+   .title {
+     font-size: 100px;
+     font-weight: bold;
+     text-align: center;
+     width: 100%;
+     margin: 10px;
+   }
+   .btn{
+     font-size: 60px;
+     font-weight: bold;
+     text-align: center;
+     width: 40%;
+     height: 5%;
+     margin-top: 20px;
+   }
+   ```
+
+
+## 实现页面间的跳转
+
+页面间的导航可以通过[页面路由router](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ui-js-building-ui-routes.md)来实现。页面路由router根据页面uri找到目标页面，从而实现跳转。使用页面路由请导入router模块。
+
+1. **第一个页面跳转到第二个页面。**
+   在第一个页面中，跳转按钮绑定onClick方法，当按钮点击时触发页面路由变化，跳转到第二页。“**index.js**”示例如下：
+
+   
+   ```
+   import router from '@system.router'
+   
+   export default {
+       onclick: function () {
+           router.push({
+               uri: "pages/second/second"
+           })
+       }
+   }
+   ```
+
+2. **第二个页面返回到第一个页面。**
+   在第二个页面中，返回按钮绑定onClick方法，当按钮点击时触发页面路由返回，返回到第二页。“**second.js**”示例如下：
+
+   
+   ```
+   import router from '@system.router'
+   
+   export default {
+       back: function () {
+           router.back()
+       }
+   }
+   ```
+
+3. **打开index文件夹下的任意一个文件，点击预览器中的**![zh-cn_image_0000001262339067](figures/zh-cn_image_0000001262339067.png)**按钮进行刷新。**效果如下图所示：
+   ![zh-cn_image_0000001216269940](figures/zh-cn_image_0000001216269940.png)
+
+
+## 使用真机运行应用
+
+1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
+
+2. 点击**File &gt;Project Structure** &gt; **Project &gt; Signing**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
+   ![zh-cn_image_0000001262327095](figures/zh-cn_image_0000001262327095.png)
+
+3. **在编辑窗口右上角的工具栏，点击**![zh-cn_image_0000001217047316](figures/zh-cn_image_0000001217047316.png)**按钮运行。**效果如下图所示：
+   ![zh-cn_image_0000001217527892](figures/zh-cn_image_0000001217527892.png)