!3247 快速入门新增eTS低代码开发章节，无需修改

Merge pull request !3247 from 葛亚芳/master

en/application-dev/quick-start/Readme-EN.md

@@ -2,7 +2,8 @@
 
 -   Getting Started
     -   [Preparations](start-overview.md)
-    -   [Getting Started with eTS](start-with-ets.md)
+    -   [Getting Started with eTS in the Traditional Coding Approach](start-with-ets.md)
+    -   [Getting Started with eTS in the Low-Code Approach](start-with-ets-low-code.md)
     -   [Getting Started with JavaScript in the Traditional Coding Approach](start-with-js.md)
     -   [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md)
     

en/application-dev/quick-start/start-overview.md

@@ -23,7 +23,11 @@ ArkUI comes with two development paradigms: JavaScript-based web-like developmen
 | Web-like development paradigm | JavaScript | Data-driven | Applications and service widgets with simple UIs | Frontend web developers |
 | Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers |
 
-For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development. On the OpenHarmony low-code development pages, you can design your app UI in an efficient, intuitive manner, with a wide array of UI editing features complying with JS Development Specifications.
+For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development.
+
+For eTS language development, DevEco Studio V3.0 Beta3 and later versions support low-code development in addition to the traditional code development mode.
+
+On the OpenHarmony low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
 
 
 ### Ability
@@ -43,4 +47,4 @@ This document provides a Page ability instance with two pages. For more informat
 
 2. Install DevEco Studio and configure the development environment. For details, see [Configuring the OpenHarmony SDK](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-setting-up-environment-0000001263160443).
 
-When you are done, follow the instructions in [Getting Started with eTS](start-with-ets.md),[Getting Started with JavaScript in the Traditional Coding Approach](start-with-js.md), and [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md).
+When you are done, follow the instructions in [Getting Started with eTS in the Traditional Coding Approach](start-with-ets.md),[Getting Started with eTS in the Low-Code Approach](start-with-ets-low-code.md), [Getting Started with JavaScript in the Traditional Coding Approach](start-with-js.md), and [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md).

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

+# Getting Started with eTS in the Low-Code Approach
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note：**
+> This feature is supported in DevEco Studio V3.0 Beta3 and later versions.
+> 
+> The component lineup that supports low-code development in eTS is now at its preliminary stage and will be expanding in coming versions.
+> 
+> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
+
+
+On the OpenHarmony low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
+
+
+You can develop applications or services in the low-code approach using either of the following methods:
+
+
+- Create a project that supports low-code development. This method is used as an example in this topic.
+
+- In an existing project, create a .visual file for development.
+
+
+## Creating a Project That Supports Low-Code Development
+
+1. Open DevEco Studio, choose **File** > **New** > **Create Project**, select **Empty Ability**, and click **Next**.
+   ![en-us_image_0000001233528152](figures/en-us_image_0000001233528152.png)
+
+2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **eTS**, and retain the default values for other parameters.
+   ![en-us_image_0000001277728569](figures/en-us_image_0000001277728569.png)
+
+3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
+
+
+## Low-code Project Files
+
+After the project synchronization is complete, a low-code directory structure is automatically generated in the project, as shown below.
+
+![en-us_image_0000001277809333](figures/en-us_image_0000001277809333.png)
+
+- **entry > src > main > ets > MainAbility > pages > index.ets**: defines logical relationships, such as data and events, used on low-code pages. For details, see [About Syntactic Sugar](../ui/ts-syntactic-sugar.md). If multiple low-code development pages are created, a page folder and the corresponding **.ets** file will be created for each of these pages.
+
+- **entry > src > main > supervisual > MainAbility > pages > index.visual**: stores the data model of the low-code development page. You can double-click the file to open the low-code development page. If multiple low-code development pages are created, a page folder and the corresponding **.visual** file will be created for each of these pages.
+
+
+## Building the First Page
+
+After the project synchronization is complete, the default first page contains the **Column** and **Text** (**Hello World**) components. To better understand low-code development, we'll delete these template components from the canvas and set the page from scratch.
+
+Add **Column**, **Text**, and **Button** components to the first page. A column is a container component whose child components are vertically arranged. For details, see [Column](../reference/arkui-ts/ts-container-column.md).
+
+1. Delete the existing template components from the canvas.<a name="delete_origin_content"></a>
+   Open the index.visual file, right-click the existing template components on the canvas, and choose **Delete** from the shortcut menu to delete them. Below is an illustration of the operations.
+
+   ![en-us_image_0000001233208980](figures/en-us_image_0000001233208980.gif)
+
+2. Add a **Column** component and set its styles and attributes.<a name="add_container"></a>
+   Drag the **Column** component from the **UI Control** area to the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001233048996](figures/en-us_image_0000001233048996.png)**General** and set **Height** to **100%** so that the component fills the entire screen. Click ![en-us_image_0000001233368860](figures/en-us_image_0000001233368860.png)**Feature** and set **AlignItems** to **center** so that the child components of the **Column** component are centered along the horizontal axis. Below is an illustration of the operations.
+
+   ![en-us_image_0000001277488977](figures/en-us_image_0000001277488977.gif)
+
+3. Add a **Text** component.
+   Drag the **Text** component from the **UI Control** area to the canvas and then to the center area of the **Column** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001277608813](figures/en-us_image_0000001277608813.png)**Feature**, set **Content** of the **Text** component to **this.message** (that is, **Hello World**), set **FontSize** to **30fp**, and set **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
+
+   ![en-us_image_0000001235731706](figures/en-us_image_0000001235731706.gif)
+
+4. Add a **Button** component.
+   Drag the **Button** component from the **UI Control** area to the canvas and then to a position under the **Text** component. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001277728577](figures/en-us_image_0000001277728577.png)**General** and set **Height** of the **Button** component to **40vp**. Click ![en-us_image_0000001277809337](figures/en-us_image_0000001277809337.png)**Feature** and set **Label** to **Next** and **FontSize** to **25fp**. Below is an illustration of the operations.
+
+   ![en-us_image_0000001235732402](figures/en-us_image_0000001235732402.gif)
+
+5. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. Below is how the first page looks in the Previewer.
+   ![en-us_image_0000001235892798](figures/en-us_image_0000001235892798.png)
+
+
+## Building the Second Page
+
+1. Create the second page.
+   In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Visual**, name the page **second**, and click **Finish**. Below is the structure of the **pages** folder.
+
+   ![en-us_image_0000001233368868](figures/en-us_image_0000001233368868.png)
+
+2. [Delete the existing template components from the canvas.](#delete_origin_content)
+
+3. [Add a **Column** component and set its styles and attributes.](#add_container)
+
+4. Add a **Text** component.
+   - In the **second.ets** file, set the message text content to **Hi there**. The sample code is as follows:
+     
+      ```
+      @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() {
+      
+        }
+      }
+      ```
+   - Drag the **Text** component to the canvas and then to the center area of the **Column** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001277488985](figures/en-us_image_0000001277488985.png)**Feature**, set **Content** of the **Text** component to **this.message** (that is, **Hi there**), set **FontSize** to **30fp**, and set **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
+      ![en-us_image_0000001280255513](figures/en-us_image_0000001280255513.gif)
+
+5. Add a **Button** component.
+   Drag the **Button** component from the **UI Control** area to the canvas and then to a position under the **Text** component. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001233528160](figures/en-us_image_0000001233528160.png)**General** and set **Height** of the **Button** component to **40vp**. Click ![en-us_image_0000001277728597](figures/en-us_image_0000001277728597.png)**Feature** and set **Value** to **Back** and **FontSize** to **25fp**. Below is an illustration of the operations.
+
+   ![en-us_image_0000001280383937](figures/en-us_image_0000001280383937.gif)
+
+
+## Implementing Page Redirection
+
+You can implement page redirection through the page router, which finds the target page based on the page URI. Import the **router** module and then perform the steps below:
+
+1. Implement redirection from the first page to the second page.
+     In the files of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. This operation needs to be completed in both .ets and .visual files.
+   - In the **index.ets** file:
+     
+     ```
+     import router from '@system.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({
+           uri: 'pages/second', // Specify the page to be redirected to.
+         })
+       }
+     
+       build() {
+       }
+     }
+     ```
+   
+   - In the index.visual file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001233209020](figures/en-us_image_0000001233209020.png)**Events** and set **OnClick** to **this.onclick**.
+     ![en-us_image_0000001235745716](figures/en-us_image_0000001235745716.png)
+
+2. Implement redirection from the second page to the first page.
+   In the files of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page. This operation needs to be completed in both .ets and .visual files.
+
+   - In the **second.ets** file:
+     
+      ```
+      import router from '@system.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() {
+      
+        }
+      }
+      ```
+   - In the second.visual file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001233368900](figures/en-us_image_0000001233368900.png)**Events** and set **OnClick** to **this.back**.
+      ![en-us_image_0000001280385809](figures/en-us_image_0000001280385809.png)
+
+3. Open the **index.visual** or **index.ets** file and click ![en-us_image_0000001277608849](figures/en-us_image_0000001277608849.png) in the Previewer to refresh the file. The figure below shows the effect.
+   ![en-us_image_0000001233528192](figures/en-us_image_0000001233528192.png)
+
+
+## Running the Application on a Real Device
+
+1. Connect the development board running the OpenHarmony standard system to the computer.
+
+2. Choose **File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
+   ![en-us_image_0000001277728613](figures/en-us_image_0000001277728613.png)
+
+3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001277809373](figures/en-us_image_0000001277809373.png). The display effect is shown in the figure below.
+   ![en-us_image_0000001233209024](figures/en-us_image_0000001233209024.png)
+
+Congratulations! You have finished developing your OpenHarmony application in eTS in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md).

en/application-dev/quick-start/start-with-ets.md

-# Getting Started with eTS
+# Getting Started with eTS in the Traditional Coding Approach
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **Note：**
 > To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later.
@@ -247,4 +247,4 @@ You can implement page redirection through the page router, which finds the targ
 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001262206247](figures/en-us_image_0000001262206247.png). The display effect is shown in the figure below.
    ![en-us_image_0000001217526428](figures/en-us_image_0000001217526428.png)
 
-Congratulations! You have finished developing your OpenHarmony application in eTS. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)
+Congratulations! You have finished developing your OpenHarmony application in eTS in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)

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

@@ -6,7 +6,7 @@
 > For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
 
 
-On the OpenHarmony low-code development pages, you can design your app UI in an efficient, intuitive manner, with a wide array of UI editing features complying with JS Development Specifications.
+On the OpenHarmony low-code development pages, you can design your app UI in an efficient, intuitive manner, with a wide array of UI editing features.
 
 
 You can develop applications or services in the low-code approach using either of the following methods:

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

@@ -2,7 +2,8 @@
 
 - 快速入门
     - [开发准备](start-overview.md)
-    - [使用eTS语言开发](start-with-ets.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)
 - 开发基础知识

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

@@ -23,7 +23,11 @@ OpenHarmony提供了一套UI开发框架，即方舟开发框架（ArkUI框架
 | 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的程序应用和卡片 | Web前端开发人员 |
 | 声明式开发范式 | 扩展的TS语言（eTS） | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 |
 
-对于DevEco Studio V2.2 Beta1及更高版本，在使用JS语言开发时，除传统代码方式外，还支持使用低代码方式。OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，遵循JS开发规范，通过可视化界面开发方式快速构建布局，可有效降低用户的上手成本并提升用户构建UI界面的效率。
+对于DevEco Studio V2.2 Beta1及更高版本，在使用JS语言开发时，除传统代码方式外，还支持使用低代码方式。
+
+对于eTS语言开发，除传统代码方式外，低代码方式则在DevEco Studio V3.0 Beta3及更高版本中支持。
+
+OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，遵循JS开发规范，通过可视化界面开发方式快速构建布局，可有效降低用户的上手成本并提升用户构建UI界面的效率。
 
 
 ### Ability
@@ -43,4 +47,5 @@ Ability可以分为[FA（Feature Ability）](../../glossary.md#f)和[PA（Partic
 
 2. 请参考[配置OpenHarmony SDK](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-setting-up-environment-0000001263160443)，完成**DevEco Studio**的安装和开发环境配置。
 
-完成上述操作及基本概念的理解后，可参照[使用eTS语言开发](start-with-ets.md)、[使用JS语言开发（传统代码方式）](start-with-js.md)、[使用JS语言开发（低代码方式）](start-with-js-low-code.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)中的任一章节进行下一步体验和学习。
+

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文件来进行开发。
+
+
+## 创建新工程支持低代码开发
+
+1. 打开**DevEco Studio**，点击**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”，示例如下：
+     
+      ```
+      @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根据页面uri找到目标页面，从而实现跳转。使用页面路由请导入router模块。
+
+1. **第一个页面跳转到第二个页面。**
+     在第一个页面中，跳转按钮绑定onclick方法，点击按钮时跳转到第二页。需同时处理ets文件及visual文件。
+   - “**index.ets**”示例如下：
+     
+     ```
+     import router from '@system.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({
+           uri: '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**”示例如下：
+     
+      ```
+      import router from '@system.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

-# 使用eTS语言开发
-
+# 使用eTS语言开发（传统代码方式）
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
 > 请使用**DevEco Studio V3.0.0.601 Beta1**及更高版本。
@@ -9,7 +8,7 @@
 
 ## 创建eTS工程
 
-1. 打开**DevEco Studio**，点击**File** > **New > Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+1. 打开**DevEco Studio**，点击**File** > **New** > **Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
    ![zh-cn_image_0000001223556342](figures/zh-cn_image_0000001223556342.png)
 
 2. 进入配置工程界面，**UI Syntax**选择“**eTS**”，其他参数保持默认设置即可。
@@ -245,11 +244,11 @@
 
 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
 
-2. 点击**File > Project Structure** > **Project > SigningConfigs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
+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)按钮运行。效果如下图所示：
 
    ![zh-cn_image_0000001217526428](figures/zh-cn_image_0000001217526428.png)
 
-恭喜您已经使用eTS语言开发完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。
+恭喜您已经使用eTS语言（传统代码方式）开发完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。

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

@@ -7,7 +7,7 @@
 > 为确保运行效果，本文以使用**DevEco Studio V3.0.0.900 Beta3**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony)获取下载链接。
 
 
-OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，遵循JS开发规范，通过可视化界面开发方式快速构建布局，可有效降低用户的上手成本并提升用户构建UI界面的效率。
+OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低用户的上手成本并提升用户构建UI界面的效率。
 
 
 使用低代码开发应用或服务有以下两种开发方式：
@@ -23,7 +23,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，遵循JS
 > ![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**进行下一步配置。
+1. 打开**DevEco Studio**，点击**File** > **New** > **Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
    ![zh-cn_image_0000001268198893](figures/zh-cn_image_0000001268198893.png)
 
 2. 进入配置工程界面，打开“**Enable Super Visual**”开关，**UI Syntax**选择“**JS**”，其他参数保持默认设置即可。
@@ -151,7 +151,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，遵循JS
 
 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
 
-2. 点击**File > Project Structure** > **Project >  Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
+2. 点击**File** > **Project Structure** > **Project** > **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/application-dev/quick-start/start-with-js.md

@@ -7,7 +7,7 @@
 
 ## 创建JS工程
 
-1. 打开**DevEco Studio**，点击**File** > **New > Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+1. 打开**DevEco Studio**，点击**File** > **New** > **Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
    ![zh-cn_image_0000001223558814](figures/zh-cn_image_0000001223558814.png)
 
 2. 进入配置工程界面，**UI Syntax**选择“**JS**”，其他参数保持默认设置即可。
@@ -202,7 +202,7 @@
 
 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
 
-2. 点击**File > Project Structure** > **Project > Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
+2. 点击**File** > **Project Structure** > **Project** > **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)按钮运行。效果如下图所示：