!7564 快速入门上线：需同步翻译

Merge pull request !7564 from 葛亚芳/master

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

@@ -8,10 +8,9 @@
 - 快速开始
     - 快速入门
         - [开发准备](quick-start/start-overview.md)
-        - [使用eTS语言开发（传统代码方式）](quick-start/start-with-ets.md)
-        - [使用eTS语言开发（低代码方式）](quick-start/start-with-ets-low-code.md)
-        - [使用JS语言开发（传统代码方式）](quick-start/start-with-js.md)
-        - [使用JS语言开发（低代码方式）](quick-start/start-with-js-low-code.md)
+        - [使用eTS语言开发（Stage模型）](quick-start/start-with-ets-stage.md)
+        - [使用eTS语言开发（FA模型）](quick-start/start-with-ets-fa.md)
+        - [使用JS语言开发（FA模型）](quick-start/start-with-js-fa.md)
     - 开发基础知识
         - [应用包结构说明(FA模型)](quick-start/package-structure.md)
         - [应用包结构说明(Stage模型)](quick-start/stage-structure.md)

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

@@ -2,13 +2,11 @@
 
 - 快速入门
   - [开发准备](start-overview.md)
-  - [使用eTS语言开发（传统代码方式）](start-with-ets.md)
-  - [使用eTS语言开发（低代码方式）](start-with-ets-low-code.md)
-  - [使用JS语言开发（传统代码方式）](start-with-js.md)
-  - [使用JS语言开发（低代码方式）](start-with-js-low-code.md)
+  - [使用eTS语言开发（Stage模型）](start-with-ets-stage.md)
+  - [使用eTS语言开发（FA模型）](start-with-ets-fa.md)
+  - [使用JS语言开发（FA模型）](start-with-js-fa.md)
 - 开发基础知识
   - [应用包结构说明(FA模型)](package-structure.md)
   - [应用包结构说明(Stage模型)](stage-structure.md)
   - [SysCap说明](syscap.md)
-  - [HarmonyAppProvision配置文件](app-provision-structure.md)
-
+  - [HarmonyAppProvision配置文件](app-provision-structure.md)
\ No newline at end of file

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

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

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

+# 使用eTS语言开发（FA模型）
+
+
+>  **说明：**
+> 请使用**DevEco Studio V3.0.0.601 Beta1**及更高版本。
+> 
+> 为确保运行效果，本文以使用**DevEco Studio V3.0.0.991 Beta4**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。
+
+
+## 创建eTS工程
+
+1. 若首次打开**DevEco Studio**，请点击**Create Project**创建工程。如果已经打开了一个工程，请在菜单栏选择**File** > **New** > **Create Project**来创建一个新工程。选择**OpenHarmony**模板库，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+   ![01](figures/01.png)
+
+2. 进入配置工程界面，**Compile SDK** 选择“**8**”（**Complie SDK**选择“**9**”时注意同步选择**Model** 为“**FA**”，此处以选择“**8**”为例），**Language**选择“**eTS**”，其他参数保持默认设置即可。
+   ![02](figures/02.png)
+
+   > **说明：**
+   > DevEco Studio V3.0 Beta3及更高版本支持使用eTS[低代码开发](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652)方式。
+   > 
+   > 低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。
+   > 
+   > 如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。
+
+3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
+
+
+## eTS工程目录结构
+
+- **entry**：OpenHarmony工程模块，编译构建生成一个[HAP](../../glossary.md#hap)包。
+  - **src > main > ets**：用于存放ets源码。
+  - **src > main > ets > MainAbility**：应用/服务的入口。
+  - **src > main > ets > MainAbility > pages**：MainAbility包含的页面。
+  - **src > main > ets > MainAbility > pages > index.ets**：pages列表中的第一个页面，即应用的首页入口。
+  - **src > main > ets > MainAbility > app.ets**：承载Ability生命周期。
+  - **src > main > resources**：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见[资源文件的分类](../ui/ui-ts-basic-resource-file-categories.md)。
+  - **src > main > config.json**：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见[应用包结构配置文件的说明（FA模型）](package-structure.md)。
+  - **build-profile.json5**：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
+  - **hvigorfile.js**：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
+
+- **build-profile.json5**：应用级配置信息，包括签名、产品配置等。
+
+- **hvigorfile.js**：应用级编译构建任务脚本。
+
+
+## 构建第一个页面
+
+1. 使用文本组件。
+   工程同步完成后，在“**Project**”窗口，点击“**entry > src > main > ets > MainAbility > pages**”，打开“**index.ets**”文件，可以看到页面由Text组件组成。“**index.ets**”文件的示例如下：
+
+   
+   ```ts
+   // 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**”文件的示例如下：
+
+   
+   ```ts
+   // 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_0000001364254741](figures/zh-cn_image_0000001364254741.png)
+
+
+## 构建第二个页面
+
+1. 创建第二个页面。
+   - 新建第二个页面文件。在“**Project**”窗口，打开“**entry > src > main > ets > MainAbility**”，右键点击“**pages**”文件夹，选择“**New > eTS File**”，命名为“**second**”，点击“**Finish**”。可以看到文件目录结构如下：
+
+      ![zh-cn_image_0000001311334932](figures/zh-cn_image_0000001311334932.png)
+
+      > **说明：**
+      > 开发者也可以在右键点击“**pages**”文件夹时，选择“**New > Page**”，则无需手动配置相关页面路由。
+   - 配置第二个页面的路由。在config.json文件中的“module - js - pages”下配置第二个页面的路由“pages/second”。示例如下：
+     
+      ```json
+      {
+        "module": {
+          "js": [
+            {
+              "pages": [
+                "pages/index",
+                "pages/second"
+              ],
+              }
+          ]
+        }
+      }
+      ```
+
+2. 添加文本及按钮。
+   参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“**second.ets**”文件的示例如下：
+
+   
+   ```ts
+   // 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根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。
+
+1. 第一个页面跳转到第二个页面。
+   在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。“**index.ets**”文件的示例如下：
+
+   
+   ```ts
+   // index.ets
+   import router from '@ohos.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%')
+           // 跳转按钮绑定onClick事件，点击时跳转到第二页
+           .onClick(() => {
+             router.push({ url: 'pages/second' })
+           })
+         }
+         .width('100%')
+       }
+       .height('100%')
+     }
+   }
+   ```
+
+2. 第二个页面返回到第一个页面。
+   在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。“**second.ets**”文件的示例如下：
+
+   
+   ```ts
+   // second.ets
+   import router from '@ohos.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%')
+           // 返回按钮绑定onClick事件，点击按钮时返回到第一页
+           .onClick(() => {
+             router.back()
+           })
+         }
+         .width('100%')
+       }
+       .height('100%')
+     }
+   }
+   ```
+
+3. 打开index.ets文件，点击预览器中的![zh-cn_image_0000001311175120](figures/zh-cn_image_0000001311175120.png)按钮进行刷新。效果如下图所示：
+   ![zh-cn_image_0000001364173989](figures/zh-cn_image_0000001364173989.png)
+
+
+## 使用真机运行应用
+
+1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
+
+2. 点击**File**> **Project Structure...** > **Project**>**SigningConfigs** 界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
+   ![06](figures/06.png)
+
+3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001311494580](figures/zh-cn_image_0000001311494580.png)按钮运行。效果如下图所示：
+   ![zh-cn_image_0000001363934577](figures/zh-cn_image_0000001363934577.png)
+
+恭喜您已经使用eTS语言开发（FA模型）完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。

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

-# 使用eTS语言开发（低代码方式）
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该特性在**DevEco Studio V3.0 Beta3**及更高版本中支持。
-> 
-> 目前eTS低代码开发方式支持的组件较少，更多组件的支持将在后续版本中实现。
-> 
-> 为确保运行效果，本文以使用**DevEco Studio V3.0.0.900 Beta3**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony)获取下载链接。
-
-
-OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。
-
-
-使用低代码开发应用或服务有以下两种开发方式：
-
-
-- 直接创建一个支持低代码开发的新工程以进行开发。本文以此方式为例进行说明。
-
-- 在已有工程中，创建visual文件来进行开发。此种方式的操作可参考[创建visual文件支持低代码开发](#构建第二个页面)。
-
-
-## 创建新工程支持低代码开发
-
-1. 若首次打开**DevEco Studio**，请点击**Create Project**创建工程。如果已有一个工程，请点击**File** > **New** > **Create Project**。选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
-
-   ![zh-cn_image_0000001233528152](figures/zh-cn_image_0000001233528152.png)
-
-2. 进入配置工程界面，打开“**Enable Super Visual**”开关，**UI Syntax**选择“**eTS**”，其他参数保持默认设置即可。
-
-   ![zh-cn_image_0000001277728569](figures/zh-cn_image_0000001277728569.png)
-
-3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
-
-
-## 低代码开发工程项目文件
-
-工程同步完成后，自动生成以下目录结构：
-
-![zh-cn_image_0000001277809333](figures/zh-cn_image_0000001277809333.png)
-
-- **entry > src > main > ets > MainAbility > pages > index.ets**：低代码页面的逻辑描述文件，定义了页面里所用到的所有的逻辑关系，比如数据、事件等，详情请参考[TS语法糖](../ui/ts-syntactic-sugar.md)。如果创建了多个低代码页面，则pages目录下会生成多个页面文件夹及对应的ets文件。
-
-- **entry > src > main > supervisual > MainAbility > pages > index.visual**：visual文件存储低代码页面的数据模型，双击该文件即可打开低代码页面，进行可视化开发设计。如果创建了多个低代码页面，则pages目录下会生成多个页面文件夹及对应的visual文件。
-
-
-## 构建第一个页面
-
-工程同步完成后，第一个页面已有一个容器、一段文本（Hello World）显示。为了更详细地了解低代码开发，我们将删除画布原有模板组件，从零开始完成页面的添加、设置。
-
-第一个页面内有一个容器、一段文本和一个按钮，通过Column、Text和Button组件来实现。其中，Column为沿垂直方向布局的容器组件，具体使用请见[Column](../reference/arkui-ts/ts-container-column.md)。
-
-1. 删除画布原有模板组件。<a name="delete_origin_content"></a>
-   打开index.visual文件，选中画布中的组件，单击鼠标右键，选择Delete删除画布原有模板组件。操作如下所示：
-
-   ![zh-cn_image_0000001233208980](figures/zh-cn_image_0000001233208980.gif)
-
-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，使得其子组件在水平轴上居中显示。操作如下所示：
-
-   ![zh-cn_image_0000001277488977](figures/zh-cn_image_0000001277488977.gif)
-
-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组件，拖动放大。操作如下所示：
-
-   ![zh-cn_image_0000001235731706](figures/zh-cn_image_0000001233528156.gif)
-
-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，使得其文字放大。操作如下所示：
-
-   ![zh-cn_image_0000001235732402](figures/zh-cn_image_0000001233208988.gif)
-
-5. 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：
-
-   ![zh-cn_image_0000001235892798](figures/zh-cn_image_0000001233049004.png)
-
-
-## 构建第二个页面
-
-1. 创建第二个页面。
-   在“**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)
-
-2. [删除画布原有模板组件。](#delete_origin_content)
-
-3. [添加容器，设置Column容器的样式和属性。](#add_container)
-
-4. 添加文本。
-   
-   - 在second.ets文件中，将本页面的message文本内容设置为“Hi there”，示例如下：
-     
-      ```ts
-      // second.ets
-      @Entry
-      @Component
-      struct Second {
-        @State message: string = 'Hi there'
-      
-        /**
-        * In low-code mode, do not add anything to the build function, as it will be
-        * overwritten by the content generated by the .visual file in the build phase.
-        */
-        build() {
-      
-        }
-      }
-      ```
-   - 选中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)
-   
-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，使得其文字放大。操作如下所示：
-
-   ![zh-cn_image_0000001280383937](figures/zh-cn_image_0000001277809361.gif)
-
-
-## 实现页面间的跳转
-
-页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。
-
-1. 第一个页面跳转到第二个页面。
-     在第一个页面中，跳转按钮绑定onclick方法，点击按钮时跳转到第二页。需同时处理ets文件及visual文件。
-   - “**index.ets**”示例如下：
-     
-     ```ts
-     // index.ets
-     import router from '@ohos.router';
-     
-     @Entry
-     @Component
-     struct Index {
-       @State message: string = 'Hello World'
-     
-       /**
-        * In low-code mode, do not add anything to the build function, as it will be
-        * overwritten by the content generated by the .visual file in the build phase.
-        */
-       onclick() {
-         router.push({
-           url: 'pages/second', // 指定要跳转的页面
-         })
-       }
-     
-       build() {
-       }
-     }
-     ```
-   
-   - “**index.visual**”： 打开index.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001233209020](figures/zh-cn_image_0000001233209020.png)（Events），鼠标点击OnClick事件的输入框，选择this.onclick，如下所示：
-
-     ![zh-cn_image_0000001235745716](figures/zh-cn_image_0000001233049040.png)
-
-2. 第二个页面返回到第一个页面。
-   在第二个页面中，返回按钮绑定back方法，点击按钮时返回到第一页。需同时处理ets文件及visual文件。
-
-   - “**second.ets**”示例如下：
-     
-      ```ts
-      // second.ets
-      import router from '@ohos.router';
-      
-      @Entry
-      @Component
-      struct Second {
-        @State message: string = 'Hi there'
-      
-        /**
-        * In low-code mode, do not add anything to the build function, as it will be
-        * overwritten by the content generated by the .visual file in the build phase.
-        */
-        back() {
-          router.back()
-        }
-      
-        build() {
-      
-        }
-      }
-      ```
-   - “**second.visual**”： 打开second.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001233368900](figures/zh-cn_image_0000001233368900.png)（Events），鼠标点击OnClick事件的输入框，选择this.back，如下所示：
-
-      ![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) 按钮进行刷新。效果如下图所示：
-
-   ![zh-cn_image_0000001233528192](figures/zh-cn_image_0000001233528192.png)
-
-
-## 使用真机运行应用
-
-1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
-
-2. 点击**File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
-
-   ![zh-cn_image_0000001277728613](figures/zh-cn_image_0000001277728613.png)
-
-3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001277809373](figures/zh-cn_image_0000001277809373.png)按钮运行。效果如下图所示：
-
-   ![zh-cn_image_0000001233209024](figures/zh-cn_image_0000001233209024.png)
-
-恭喜您已经使用eTS语言开发（低代码方式）完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。

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

-# 使用eTS语言开发（传统代码方式）
+# 使用eTS语言开发（Stage模型）
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 请使用**DevEco Studio V3.0.0.601 Beta1**及更高版本。
+
+> **说明：**
+> 请使用**DevEco Studio V3.0.0.900 Beta3**及更高版本。
 > 
-> 为确保运行效果，本文以使用**DevEco Studio V3.0.0.900 Beta3**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony)获取下载链接。
+> 为确保运行效果，本文以使用**DevEco Studio V3.0.0.991 Beta4**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。
 
 
 ## 创建eTS工程
 
-1. 若首次打开**DevEco Studio**，请点击**Create Project**创建工程。如果已有一个工程，请点击**File** > **New** > **Create Project**。选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+1. 若首次打开**DevEco Studio**，请点击**Create Project**创建工程。如果已经打开了一个工程，请在菜单栏选择**File** > **New** > **Create Project**来创建一个新工程。选择**OpenHarmony**模板库，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+   ![01](figures/01.png)
 
-   ![zh-cn_image_0000001223556342](figures/zh-cn_image_0000001223556342.png)
+2. 进入配置工程界面，**Compile SDK**选择“**9**”，**Model** 选择“**Stage**”，**Language** 选择“**eTS**”，其他参数保持默认设置即可。
+   ![07](figures/07.png)
 
-2. 进入配置工程界面，**UI Syntax**选择“**eTS**”，其他参数保持默认设置即可。
+   > **说明：**
+   >
+   > 支持使用eTS[低代码开发](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652)方式。
+   >
+   > 低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。
+   >
+   > 如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。
+   
+3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
 
-   ![zh-cn_image_0000001223716826](figures/zh-cn_image_0000001223716826.png)
 
-3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
+## eTS工程目录结构
 
+![zh-cn_image_0000001364054489](figures/zh-cn_image_0000001364054489.png)
 
-## eTS工程项目文件
+- **AppScope > app.json5**：应用的全局配置信息。
 
-- **entry** ：OpenHarmony工程模块，编译构建生成一个[HAP](../../glossary.md#hap)包。
-  - **src > main > ets** ：用于存放ets源码。
-  - **src > main > ets > MainAbility** ：应用/服务的入口。
-  - **src > main > ets > MainAbility > pages** ：MainAbility包含的页面。
-  - **src > main > ets > MainAbility > pages > index.ets** ：pages列表中的第一个页面，即应用的首页入口。
-  - **src > main > ets > MainAbility > app.ets** ：承载Ability生命周期。
-  - **src > main > resources** ：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。
-  - **src > main > config.json** ：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见[应用包结构配置文件的说明](package-structure.md)。
-  - **build-profile.json5** ：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
-  - **hvigorfile.js** ：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
+- **entry**：OpenHarmony工程模块，编译构建生成一个[HAP](../../glossary.md#hap)包。
+  - **src > main > ets**：用于存放ets源码。
+  - **src > main > ets > Application > AbilityStage.ts**：实现AbilityStage接口。
+  - **src > main > ets > MainAbility**：应用/服务的入口。
+  - **src > main > ets > MainAbility > MainAbility.ts**：承载Ability生命周期。
+  - **src > main > ets > pages**：MainAbility包含的页面。
+  - **src > main > resources**：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见[资源文件的分类](../ui/ui-ts-basic-resource-file-categories.md)。
+  - **src > main > module.json5**：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见[应用包结构配置文件的说明（Stage模型）](stage-structure.md)。
+  - **build-profile.json5**：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
+  - **hvigorfile.js**：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
 
-- **build-profile.json5** ：应用级配置信息，包括签名、产品配置等。
+- **build-profile.json5**：应用级配置信息，包括签名、产品配置等。
 
-- **hvigorfile.js** ：应用级编译构建任务脚本。
+- **hvigorfile.js**：应用级编译构建任务脚本。
 
 
 ## 构建第一个页面
 
 1. 使用文本组件。
-工程同步完成后，在“**Project**”窗口，点击“**entry > src > main > ets > MainAbility > pages**”，打开“**index.ets**”文件，可以看到页面由Text组件组成。“**index.ets**”文件的示例如下：
+   工程同步完成后，在“**Project**”窗口，点击“**entry > src > main > ets > MainAbility > pages**”，打开“**index.ets**”文件，可以看到页面由Text组件组成。“**index.ets**”文件的示例如下：
 
    
    ```ts
@@ -103,46 +114,33 @@
    ```
 
 3. 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：
-
-   ![zh-cn_image_0000001216239356](figures/zh-cn_image_0000001216239356.png)
+   ![zh-cn_image_0000001311334976](figures/zh-cn_image_0000001311334976.png)
 
 
 ## 构建第二个页面
 
 1. 创建第二个页面。
-    - 新建第二个页面文件。在“**Project**”窗口，打开“**entry > src > main > ets > MainAbility**”，右键点击“**pages**”文件夹，选择“**New > eTS File**”，命名为“**second**”，点击“**Finish**”。可以看到文件目录结构如下：
-
-    ![zh-cn_image_0000001223397122](figures/zh-cn_image_0000001223397122.png)
+   - 新建第二个页面文件。在“**Project**”窗口，打开“**entry > src > main > ets**”，右键点击“**pages**”文件夹，选择“**New > eTS File**”，命名为“**second**”，点击“**Finish**”。可以看到文件目录结构如下：
 
-    > 说明：
-    >
-    > 开发者也可以在右键点击“**pages**”文件夹时，选择“**new > Page**”，则无需手动配置相关页面的路由。
+      ![09](figures/09.png)
 
-    - 配置第二个页面的路由。在config.json文件中的“module - js - pages”下配置第二个页面的路由“pages/second”。示例如下：
-    
-    ```
+      > **说明：**
+      > 开发者也可以在右键点击“**pages**”文件夹时，选择“**New > Page**”，则无需手动配置相关页面路由。
+   - 配置第二个页面的路由。在“**Project**”窗口，打开“**entry > src > main > resources > base > profile **”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/second”。示例如下：
+     
+      ```json
       {
-        ...
-          "module": {
-           ...
-            "js": [
-              {
-                ...
-                "pages": [
-                "pages/index",
-                "pages/second"
-              ]
-                ...
-              }
-          ]
-        }
+        "src": [
+          "pages/index",
+          "pages/second"
+        ]
       }
-    ```
+      ```
 
 2. 添加文本及按钮。
    参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“**second.ets**”文件的示例如下：
 
-
+   
    ```ts
    // second.ets
    @Entry
@@ -268,21 +266,18 @@
    }
    ```
 
-3. 打开index.ets文件，点击预览器中的 ![zh-cn_image_0000001262219043](figures/zh-cn_image_0000001262219043.png) 按钮进行刷新。 效果如下图所示：
-
-   ![zh-cn_image_0000001260684127](figures/zh-cn_image_0000001260684127.png)
+3. 打开index.ets文件，点击预览器中的![zh-cn_image_0000001311015192](figures/zh-cn_image_0000001311015192.png)按钮进行刷新。效果如下图所示：
+   ![zh-cn_image_0000001364254773](figures/zh-cn_image_0000001364254773.png)
 
 
 ## 使用真机运行应用
 
 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
 
-2. 点击**File** > **Project Structure** > **Project** > **SigningConfigs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
-
-   ![zh-cn_image_0000001268077317](figures/zh-cn_image_0000001268077317.png)
-
-3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001262206247](figures/zh-cn_image_0000001262206247.png)按钮运行。效果如下图所示：
+2. 点击**File**> **Project Structure...** > **Project**>**SigningConfigs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
+   ![06](figures/06.png)
 
-   ![zh-cn_image_0000001217526428](figures/zh-cn_image_0000001217526428.png)
+3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001364054485](figures/zh-cn_image_0000001364054485.png)按钮运行。效果如下图所示：
+   ![zh-cn_image_0000001311334972](figures/zh-cn_image_0000001311334972.png)
 
-恭喜您已经使用eTS语言（传统代码方式）开发完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。
+恭喜您已经使用eTS语言开发（Stage模型）完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。

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

-# 使用JS语言开发（传统代码方式）
+# 使用JS语言开发（FA模型）
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 为确保运行效果，本文以使用**DevEco Studio V3.0.0.900 Beta3**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony)获取下载链接。
+> **说明：**
+> 为确保运行效果，本文以使用**DevEco Studio V3.0.0.991 Beta4**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。
 
 
 ## 创建JS工程
 
-1. 若首次打开**DevEco Studio**，请点击**Create Project**创建工程。如果已有一个工程，请点击**File** > **New** > **Create Project**。选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+1. 若首次打开**DevEco Studio**，请点击**Create Project**创建工程。如果已经打开了一个工程，请在菜单栏选择**File** > **New** > **Create Project**来创建一个新工程。选择**OpenHarmony**模板库，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+   ![01](figures/01.png)
 
-   ![zh-cn_image_0000001223558814](figures/zh-cn_image_0000001223558814.png)
+2. 进入配置工程界面，**Compile SDK**选择“**8**”（**Complie SDK**选择“**9**”时注意同步选择 **Model** 为“**FA**”，此处以选择“**8**”为例），**Language**选择“**JS**”，其他参数保持默认设置即可。
+   ![04](figures/04.png)
 
-2. 进入配置工程界面，**UI Syntax**选择“**JS**”，其他参数保持默认设置即可。
-
-   ![zh-cn_image_0000001223877162](figures/zh-cn_image_0000001223877162.png)
+   > **说明：**
+   > DevEco Studio V2.2 Beta1及更高版本支持使用JS[低代码开发](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652)方式。
+   > 
+   > 低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。
+   > 
+   > 如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。
 
 3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
 
 
-## JS工程项目文件
+## JS工程目录结构
 
 - **entry**：OpenHarmony工程模块，编译构建生成一个[HAP](../../glossary.md#hap)包。
-  - **src > main > js** ：用于存放js源码。
-  - **src > main > js > MainAbility** ：应用/服务的入口。
-  - **src > main > js > MainAbility > i18n** ：用于配置不同语言场景资源内容，比如应用文本词条、图片路径等资源。
-  - **src > main > js > MainAbility > pages** ：MainAbility包含的页面。
-  - **src > main > js > MainAbility > app.js** ：承载Ability生命周期。
+  - **src > main > js**：用于存放js源码。
+  - **src > main > js > MainAbility**：应用/服务的入口。
+  - **src > main > js > MainAbility > i18n**：用于配置不同语言场景资源内容，比如应用文本词条、图片路径等资源。
+  - **src > main > js > MainAbility > pages**：MainAbility包含的页面。
+  - **src > main > js > MainAbility > app.js**：承载Ability生命周期。
 
-  - **src > main > resources** ：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。
-  - **src > main > config.json** ：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见[应用包结构配置文件的说明](package-structure.md)。
-  - **build-profile.json5** ：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
-  - **hvigorfile.js** ：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
+  - **src > main > resources**：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见[资源限定与访问](../ui/js-framework-resource-restriction.md)。
+  - **src > main > config.json**：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见[应用包结构配置文件的说明（FA模型）](package-structure.md)。
+  - **build-profile.json5**：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
+  - **hvigorfile.js**：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
 
-- **build-profile.json5** ：应用级配置信息，包括签名、产品配置等。
+- **build-profile.json5**：应用级配置信息，包括签名、产品配置等。
 
-- **hvigorfile.js** ：应用级编译构建任务脚本。
+- **hvigorfile.js**：应用级编译构建任务脚本。
 
 
 ## 构建第一个页面
@@ -44,7 +49,7 @@
 
    
    ```html
-   <!--index.hml-->
+   <!-- index.hml -->
    <div class="container">
        <text class="title">
            Hello World
@@ -57,7 +62,7 @@
 
    
    ```html
-   <!--index.hml-->
+   <!-- index.hml -->
    <div class="container">
        <text class="title">
            Hello World
@@ -73,6 +78,7 @@
 
    
    ```css
+   /* index.css */
    .container {
        display: flex;
        flex-direction: column;
@@ -103,9 +109,7 @@
    ```
 
 4. 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：
-
-
-   ![zh-cn_image_0000001216084724](figures/zh-cn_image_0000001216084724.png)
+   ![zh-cn_image_0000001311494592](figures/zh-cn_image_0000001311494592.png)
 
 
 ## 构建第二个页面
@@ -113,14 +117,14 @@
 1. 创建第二个页面。
    在“**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_0000001311334944](figures/zh-cn_image_0000001311334944.png)
 
 2. 添加文本及按钮。
    参照第一个页面，在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“**second.hml**”文件的示例如下：
 
    
    ```html
-   <!--second.hml-->
+   <!-- second.hml -->
    <div class="container">
        <text class="title">
            Hi there
@@ -131,9 +135,10 @@
    </div>
    ```
 
-3. 设置页面样式。“**second.css**”文件的示例如下：
+3. **设置页面样式。**“**second.css**”文件的示例如下：
    
    ```css
+   /* second.css */
    .container {
        display: flex;
        flex-direction: column;
@@ -200,24 +205,18 @@
    }
    ```
 
-3. 打开index文件夹下的任意一个文件，点击预览器中的 ![zh-cn_image_0000001262339067](figures/zh-cn_image_0000001262339067.png) 按钮进行刷新。效果如下图所示：
-
-   ![zh-cn_image_0000001216269940](figures/zh-cn_image_0000001216269940.png)
+3. 打开index文件夹下的任意一个文件，点击预览器中的![zh-cn_image_0000001364174013](figures/zh-cn_image_0000001364174013.png)按钮进行刷新。效果如下图所示：
+   ![zh-cn_image_0000001311175132](figures/zh-cn_image_0000001311175132.png)
 
 
 ## 使用真机运行应用
 
 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
 
-2. 点击**File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
-
-   ![zh-cn_image_0000001223557290](figures/zh-cn_image_0000001223557290.png)
-
-3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001217047316](figures/zh-cn_image_0000001217047316.png)按钮运行。效果如下图所示：
+2. 点击**File**&gt; **Project Structure...** &gt; **Project**&gt;**Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
+   ![06](figures/06.png)
 
-   ![zh-cn_image_0000001217527892](figures/zh-cn_image_0000001217527892.png)
+3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001311494604](figures/zh-cn_image_0000001311494604.png)按钮运行。效果如下图所示：
+   ![zh-cn_image_0000001363934589](figures/zh-cn_image_0000001363934589.png)
 
-恭喜您已经使用JS语言开发（传统代码方式）完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。
-## 相关实例
-针对使用JS语言（传统代码方式）开发快速入门，有以下相关实例可供参考：
-- [`JsHelloWorld`：你好世界（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/common/JsHelloWorld)
+恭喜您已经使用JS语言开发（FA模型）完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。

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 Beta3**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony)获取下载链接。
-
-
-OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。
-
-
-使用低代码开发应用或服务有以下两种开发方式：
-
-
-- 直接创建一个支持低代码开发的新工程以进行开发。本文以此方式为例进行说明。
-
-- 在已有工程中，创建visual文件来进行开发。此种方式的操作可参考[创建visual文件支持低代码开发](#构建第二个页面)。
-
-
-## 创建新工程支持低代码开发
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该功能在DevEco Studio 3.0 Beta2及更高版本中支持，且compileSdkVersion必须为7或以上。
-
-1. 若首次打开**DevEco Studio**，请点击**Create Project**创建工程。如果已有一个工程，请点击**File** > **New** > **Create Project**。选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
-
-   ![zh-cn_image_0000001268198893](figures/zh-cn_image_0000001268198893.png)
-
-2. 进入配置工程界面，打开“**Enable Super Visual**”开关，**UI Syntax**选择“**JS**”，其他参数保持默认设置即可。
-
-   ![zh-cn_image_0000001223717294](figures/zh-cn_image_0000001223717294.png)
-
-3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
-
-
-## 低代码开发工程项目文件
-
-工程同步完成后，自动生成以下目录结构：
-
-![zh-cn_image_0000001223558810](figures/zh-cn_image_0000001223558810.png)
-
-- **entry > src > main > js > MainAbility > pages > index > index.js** ：低代码页面的逻辑描述文件，定义了页面里所用到的所有的逻辑关系，比如数据、事件等，详情请参考[JS语法参考](../ui/js-framework-syntax-js.md)。如果创建了多个低代码页面，则pages目录下会生成多个页面文件夹及对应的js文件。
-  
-  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-  > 使用低代码页面开发时，其关联js文件的同级目录中不能包含hml和css页面，例如上图中的 **js > MainAbility > pages > index** 目录下不能包含hml与css文件，否则会出现编译报错。
-  
-- **entry > src > main > supervisual > MainAbility > 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 > src > main > js > MainAbility**”，右键点击“**pages**”文件夹，选择“**New > Visual**”，命名为“**second**”，单击“**Finish**”，即完成第二个页面的创建。
-   新建visual文件的操作如下：
-   
-   <img src="figures/zh-cn_image_202206250937.png" alt="create-newVisual" style="zoom: 67%;" />
-   
-   可以看到文件目录结构如下：
-   
-   ![zh-cn_image_0000001223882030](figures/zh-cn_image_0000001223882030.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](../ui/ui-js-building-ui-routes.md)来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。
-
-1. 第一个页面跳转到第二个页面。
-     在第一个页面中，跳转按钮绑定onclick方法，点击按钮时跳转到第二页。需同时处理js文件及visual文件。
-   - “**index.js**”示例如下：
-     
-     ```js
-     import router from '@ohos.router';  
-     
-     export default {     
-         onclick() {         
-             router.push({             
-                 url:'pages/second/second', // 指定要跳转的页面         
-             })     
-         } 
-     }
-     ```
-   
-   - “**index.visual**”： 打开index.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001215388136](figures/zh-cn_image_0000001215388136.png)（Events），鼠标点击Click事件的输入框，选择onclick，如下所示：
-
-     ![zh-cn_image_0000001223722586](figures/zh-cn_image_0000001223722586.png)
-
-2. 第二个页面返回到第一个页面。
-   在第二个页面中，返回按钮绑定back方法，点击按钮时返回到第一页。
-
-   需同时处理js文件及visual文件。
-
-   - “**second.js**”示例如下：
-     
-      ```js
-      import router from '@ohos.router';  
-      
-      export default {     
-          back() {         
-              router.back()     
-          } 
-      }
-      ```
-   - “**second.visual**”： 打开second.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001215388262](figures/zh-cn_image_0000001215388262.png)（Events），鼠标点击Click事件的输入框，选择back，如下所示：
-
-     ![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) 按钮进行刷新。效果如下图所示：
-
-   ![zh-cn_image_0000001261142799](figures/zh-cn_image_0000001261142799.png)
-
-
-## 使用真机运行应用
-
-1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
-
-2. 点击**File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
-
-   ![zh-cn_image_0000001268283201](figures/zh-cn_image_0000001268283201.png)
-
-3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001262207811](figures/zh-cn_image_0000001262207811.png)按钮运行。效果如下图所示：
-
-   ![zh-cn_image_0000001262127855](figures/zh-cn_image_0000001262127855.png)
-
-恭喜您已经使用JS语言开发（低代码方式）完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。

zh-cn/application-dev/website.md

@@ -4,10 +4,9 @@
 
   - 快速入门
     - [开发准备](quick-start/start-overview.md)
-    - [使用eTS语言开发（传统代码方式）](quick-start/start-with-ets.md)
-    - [使用eTS语言开发（低代码方式）](quick-start/start-with-ets-low-code.md)
-    - [使用JS语言开发（传统代码方式）](quick-start/start-with-js.md)
-    - [使用JS语言开发（低代码方式）](quick-start/start-with-js-low-code.md)
+    - [使用eTS语言开发（Stage模型）](quick-start/start-with-ets-stage.md)
+    - [使用eTS语言开发（FA模型）](quick-start/start-with-ets-fa.md)
+    - [使用JS语言开发（FA模型）](quick-start/start-with-js-fa.md)
 
   - 开发基础知识
     - [应用包结构说明(FA模型)](quick-start/package-structure.md)