Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 5bd5bc49 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!3471 快速入门图片/文字间加换行&Sample链接修改：无需翻译 

Merge pull request !3471 from 葛亚芳/master
上级 7a0a2f0a 48f235fe
隐藏空白更改
内联 并排
Showing with 48 addition and 5 deletion
en/application-dev/quick-start/start-with-ets-low-code.md
浏览文件 @ 5bd5bc49
...@@ -22,9 +22,11 @@ You can develop applications or services in the low-code approach using either o ...@@ -22,9 +22,11 @@ You can develop applications or services in the low-code approach using either o
## Creating a Project That Supports Low-Code Development ## Creating a Project That Supports Low-Code Development
1. Open DevEco Studio, choose **File** > **New** > **Create Project**, select **Empty Ability**, and click **Next**. 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) ![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. 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) ![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. 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
...@@ -68,6 +70,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column ...@@ -68,6 +70,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
![en-us_image_0000001235732402](figures/en-us_image_0000001235732402.gif) ![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. 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) ![en-us_image_0000001235892798](figures/en-us_image_0000001235892798.png)
...@@ -101,6 +104,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column ...@@ -101,6 +104,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
} }
``` ```
- Drag the **Text** component to the canvas and then to the center area of the **Column** component. In the **Attributes & 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. - Drag the **Text** component to the canvas and then to the center area of the **Column** component. In the **Attributes & 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) ![en-us_image_0000001280255513](figures/en-us_image_0000001280255513.gif)
5. Add a **Button** component. 5. Add a **Button** component.
...@@ -141,6 +145,7 @@ You can implement page redirection through the page router, which finds the targ ...@@ -141,6 +145,7 @@ You can implement page redirection through the page router, which finds the targ
``` ```
- In the index.visual file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click ![en-us_image_0000001233209020](figures/en-us_image_0000001233209020.png)**Events** and set **OnClick** to **this.onclick**. - In the index.visual file, select the **Button** component on the canvas. In the **Attributes & 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) ![en-us_image_0000001235745716](figures/en-us_image_0000001235745716.png)
2. Implement redirection from the second page to the first page. 2. Implement redirection from the second page to the first page.
...@@ -170,9 +175,11 @@ You can implement page redirection through the page router, which finds the targ ...@@ -170,9 +175,11 @@ You can implement page redirection through the page router, which finds the targ
} }
``` ```
- In the second.visual file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click ![en-us_image_0000001233368900](figures/en-us_image_0000001233368900.png)**Events** and set **OnClick** to **this.back**. - In the second.visual file, select the **Button** component on the canvas. In the **Attributes & 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) ![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. 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) ![en-us_image_0000001233528192](figures/en-us_image_0000001233528192.png)
...@@ -181,9 +188,11 @@ You can implement page redirection through the page router, which finds the targ ...@@ -181,9 +188,11 @@ You can implement page redirection through the page router, which finds the targ
1. Connect the development board running the OpenHarmony standard system to the computer. 1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** > **Project Structure** > **Project** > **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below. 2. Choose **File** > **Project Structure** > **Project** > **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) ![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. 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) ![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). 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
浏览文件 @ 5bd5bc49
...@@ -9,9 +9,11 @@ ...@@ -9,9 +9,11 @@
## Creating an eTS Project ## Creating an eTS Project
1. Open DevEco Studio, choose **File** > **New** > **Create Project**, select **Empty Ability**, and click **Next**. 1. Open DevEco Studio, choose **File** > **New** > **Create Project**, select **Empty Ability**, and click **Next**.
![en-us_image_0000001223556342](figures/en-us_image_0000001223556342.png) ![en-us_image_0000001223556342](figures/en-us_image_0000001223556342.png)
2. On the project configuration page, set **UI Syntax** to **eTS** and retain the default values for other parameters. 2. On the project configuration page, set **UI Syntax** to **eTS** and retain the default values for other parameters.
![en-us_image_0000001223716826](figures/en-us_image_0000001223716826.png) ![en-us_image_0000001223716826](figures/en-us_image_0000001223716826.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. 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
...@@ -234,6 +236,7 @@ You can implement page redirection through the page router, which finds the targ ...@@ -234,6 +236,7 @@ You can implement page redirection through the page router, which finds the targ
``` ```
3. Open the **index.ets** file and click ![en-us_image_0000001262219043](figures/en-us_image_0000001262219043.png) in the Previewer to refresh the file. The figure below shows the effect. 3. Open the **index.ets** file and click ![en-us_image_0000001262219043](figures/en-us_image_0000001262219043.png) in the Previewer to refresh the file. The figure below shows the effect.
![en-us_image_0000001260684127](figures/en-us_image_0000001260684127.png) ![en-us_image_0000001260684127](figures/en-us_image_0000001260684127.png)
...@@ -242,9 +245,11 @@ You can implement page redirection through the page router, which finds the targ ...@@ -242,9 +245,11 @@ You can implement page redirection through the page router, which finds the targ
1. Connect the development board running the OpenHarmony standard system to the computer. 1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** > **Project Structure** > **Project** > **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below. 2. Choose **File** > **Project Structure** > **Project** > **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
![en-us_image_0000001268077317](figures/en-us_image_0000001268077317.png) ![en-us_image_0000001268077317](figures/en-us_image_0000001268077317.png)
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. 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) ![en-us_image_0000001217526428](figures/en-us_image_0000001217526428.png)
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) 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
浏览文件 @ 5bd5bc49
...@@ -23,10 +23,11 @@ You can develop applications or services in the low-code approach using either o ...@@ -23,10 +23,11 @@ You can develop applications or services in the low-code approach using either o
> This feature is available in DevEco Studio 3.0 Beta2 and later versions and works with compileSdkVersion 7 or later. > This feature is available in DevEco Studio 3.0 Beta2 and later versions and works with compileSdkVersion 7 or later.
1. Open DevEco Studio, choose **File** > **New** > **Create Project**, select **Empty Ability**, and click **Next**. 1. Open DevEco Studio, choose **File** > **New** > **Create Project**, select **Empty Ability**, and click **Next**.
![en-us_image_0000001268198893](figures/en-us_image_0000001268198893.png) ![en-us_image_0000001268198893](figures/en-us_image_0000001268198893.png)
2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **JS**, and retain the default values for other parameters. 2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **JS**, and retain the default values for other parameters.
![en-us_image_0000001223717294](figures/en-us_image_0000001223717294.png) ![en-us_image_0000001223717294](figures/en-us_image_0000001223717294.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. 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
...@@ -70,6 +71,7 @@ Add **Div**, **Text**, and **Button** components to the first page. ...@@ -70,6 +71,7 @@ Add **Div**, **Text**, and **Button** components to the first page.
![en-us_image_0000001260928361](figures/en-us_image_0000001260928361.gif) ![en-us_image_0000001260928361](figures/en-us_image_0000001260928361.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 on the Previewer. 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 on the Previewer.
![en-us_image_0000001216288558](figures/en-us_image_0000001216288558.png) ![en-us_image_0000001216288558](figures/en-us_image_0000001216288558.png)
...@@ -137,9 +139,10 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin ...@@ -137,9 +139,10 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
``` ```
- In the second.visual file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click ![en-us_image_0000001215388262](figures/en-us_image_0000001215388262.png)**Events** and set **Click** to **back**. - In the second.visual file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click ![en-us_image_0000001215388262](figures/en-us_image_0000001215388262.png)**Events** and set **Click** to **back**.
![en-us_image_0000001268082945](figures/en-us_image_0000001268082945.png) ![en-us_image_0000001268082945](figures/en-us_image_0000001268082945.png)
3. Open the **index.visual** or **index.js** file and click ![en-us_image_0000001261979271](figures/en-us_image_0000001261979271.png) in the Previewer to refresh the file. The figure below shows the effect. 3. Open the **index.visual** or **index.js** file and click ![en-us_image_0000001261979271](figures/en-us_image_0000001261979271.png) in the Previewer to refresh the file. The figure below shows the effect.
![en-us_image_0000001261142799](figures/en-us_image_0000001261142799.png) ![en-us_image_0000001261142799](figures/en-us_image_0000001261142799.png)
...@@ -148,9 +151,11 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin ...@@ -148,9 +151,11 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
1. Connect the development board running the OpenHarmony standard system to the computer. 1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** > **Project Structure** > **Project** > **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below. 2. Choose **File** > **Project Structure** > **Project** > **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
![en-us_image_0000001268283201](figures/en-us_image_0000001268283201.png) ![en-us_image_0000001268283201](figures/en-us_image_0000001268283201.png)
3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001262207811](figures/en-us_image_0000001262207811.png). The display effect is shown in the figure below. 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001262207811](figures/en-us_image_0000001262207811.png). The display effect is shown in the figure below.
![en-us_image_0000001262127855](figures/en-us_image_0000001262127855.png) ![en-us_image_0000001262127855](figures/en-us_image_0000001262127855.png)
Congratulations! You have finished developing your OpenHarmony app in JavaScript in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md) Congratulations! You have finished developing your OpenHarmony app in JavaScript in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)
en/application-dev/quick-start/start-with-js.md
浏览文件 @ 5bd5bc49
...@@ -7,9 +7,11 @@ ...@@ -7,9 +7,11 @@
## Creating a JavaScript Project ## Creating a JavaScript Project
1. Open DevEco Studio, choose **File** > **New** > **Create Project**, select **Empty Ability**, and click **Next**. 1. Open DevEco Studio, choose **File** > **New** > **Create Project**, select **Empty Ability**, and click **Next**.
![en-us_image_0000001223558814](figures/en-us_image_0000001223558814.png) ![en-us_image_0000001223558814](figures/en-us_image_0000001223558814.png)
2. On the project configuration page, set **UI Syntax** to **JS** and retain the default values for other parameters. 2. On the project configuration page, set **UI Syntax** to **JS** and retain the default values for other parameters.
![en-us_image_0000001223877162](figures/en-us_image_0000001223877162.png) ![en-us_image_0000001223877162](figures/en-us_image_0000001223877162.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. 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
...@@ -189,6 +191,7 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin ...@@ -189,6 +191,7 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
``` ```
3. Open any file in the **index** folder and click ![en-us_image_0000001262339067](figures/en-us_image_0000001262339067.png) in the Previewer to refresh the file. The figure below shows the effect. 3. Open any file in the **index** folder and click ![en-us_image_0000001262339067](figures/en-us_image_0000001262339067.png) in the Previewer to refresh the file. The figure below shows the effect.
![en-us_image_0000001216269940](figures/en-us_image_0000001216269940.png) ![en-us_image_0000001216269940](figures/en-us_image_0000001216269940.png)
...@@ -197,9 +200,11 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin ...@@ -197,9 +200,11 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
1. Connect the development board running the OpenHarmony standard system to the computer. 1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** > **Project Structure** > **Project** > **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below. 2. Choose **File** > **Project Structure** > **Project** > **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
![en-us_image_0000001223557290](figures/en-us_image_0000001223557290.png) ![en-us_image_0000001223557290](figures/en-us_image_0000001223557290.png)
3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001217047316](figures/en-us_image_0000001217047316.png). The display effect is shown in the figure below. 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001217047316](figures/en-us_image_0000001217047316.png). The display effect is shown in the figure below.
![en-us_image_0000001217527892](figures/en-us_image_0000001217527892.png) ![en-us_image_0000001217527892](figures/en-us_image_0000001217527892.png)
Congratulations! You have finished developing your OpenHarmony application in JavaScript in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md) Congratulations! You have finished developing your OpenHarmony application in JavaScript in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)
zh-cn/application-dev/notification/common-event.md
浏览文件 @ 5bd5bc49
...@@ -174,6 +174,6 @@ if (this.subscriber != null) { ...@@ -174,6 +174,6 @@ if (this.subscriber != null) {
针对公共事件开发，有以下相关实例可供参考： 针对公共事件开发，有以下相关实例可供参考：
- [`CommonEvent`：订阅公共事件（eTS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/ability/CommonEvent) - [`CommonEvent`：订阅公共事件（eTS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/Notification/CommonEvent)
zh-cn/application-dev/quick-start/start-with-ets-low-code.md
浏览文件 @ 5bd5bc49
...@@ -23,9 +23,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 ...@@ -23,9 +23,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
## 创建新工程支持低代码开发 ## 创建新工程支持低代码开发
1. 打开**DevEco Studio**，点击**File** > **New** > **Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。 1. 打开**DevEco Studio**，点击**File** > **New** > **Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
![zh-cn_image_0000001233528152](figures/zh-cn_image_0000001233528152.png) ![zh-cn_image_0000001233528152](figures/zh-cn_image_0000001233528152.png)
2. 进入配置工程界面，打开“**Enable Super Visual**”开关，**UI Syntax**选择“**eTS**”，其他参数保持默认设置即可。 2. 进入配置工程界面，打开“**Enable Super Visual**”开关，**UI Syntax**选择“**eTS**”，其他参数保持默认设置即可。
![zh-cn_image_0000001277728569](figures/zh-cn_image_0000001277728569.png) ![zh-cn_image_0000001277728569](figures/zh-cn_image_0000001277728569.png)
3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。 3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
...@@ -69,6 +71,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 ...@@ -69,6 +71,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
![zh-cn_image_0000001235732402](figures/zh-cn_image_0000001233208988.gif) ![zh-cn_image_0000001235732402](figures/zh-cn_image_0000001233208988.gif)
5. **在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。** 第一个页面效果如下图所示： 5. **在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。** 第一个页面效果如下图所示：
![zh-cn_image_0000001235892798](figures/zh-cn_image_0000001233049004.png) ![zh-cn_image_0000001235892798](figures/zh-cn_image_0000001233049004.png)
...@@ -103,7 +106,8 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 ...@@ -103,7 +106,8 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
} }
``` ```
- 选中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组件，拖动放大。操作如下所示： - 选中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)
![zh-cn_image_0000001280255513](figures/zh-cn_image_0000001277608817.gif)
5. **添加按钮。** 5. **添加按钮。**
选中UI Control中的Button组件，将其拖至画布，再拖至Text组件下面。点击右侧属性样式栏中的图标![zh-cn_image_0000001233528160](figures/zh-cn_image_0000001233528160.png)（General），设置Button组件的Height为40vp；点击右侧属性样式栏中的图标![zh-cn_image_0000001277728597](figures/zh-cn_image_0000001277728597.png)（Feature），设置Button组件的Value属性为“Back”；设置组件的FontSize样式为25fp，使得其文字放大。操作如下所示： 选中UI Control中的Button组件，将其拖至画布，再拖至Text组件下面。点击右侧属性样式栏中的图标![zh-cn_image_0000001233528160](figures/zh-cn_image_0000001233528160.png)（General），设置Button组件的Height为40vp；点击右侧属性样式栏中的图标![zh-cn_image_0000001277728597](figures/zh-cn_image_0000001277728597.png)（Feature），设置Button组件的Value属性为“Back”；设置组件的FontSize样式为25fp，使得其文字放大。操作如下所示：
...@@ -143,6 +147,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 ...@@ -143,6 +147,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
``` ```
- “**index.visual**”： 打开index.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001233209020](figures/zh-cn_image_0000001233209020.png)（Events），鼠标点击OnClick事件的输入框，选择this.onclick，如下所示： - “**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) ![zh-cn_image_0000001235745716](figures/zh-cn_image_0000001233049040.png)
2. **第二个页面返回到第一个页面。** 2. **第二个页面返回到第一个页面。**
...@@ -172,9 +177,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 ...@@ -172,9 +177,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
} }
``` ```
- “**second.visual**”： 打开second.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001233368900](figures/zh-cn_image_0000001233368900.png)（Events），鼠标点击OnClick事件的输入框，选择this.back，如下所示： - “**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) ![zh-cn_image_0000001280385809](figures/zh-cn_image_0000001277489017.png)
3. **打开index.visual或index.ets文件，点击预览器中的** ![zh-cn_image_0000001277608849](figures/zh-cn_image_0000001277608849.png) **按钮进行刷新。** 效果如下图所示： 3. **打开index.visual或index.ets文件，点击预览器中的** ![zh-cn_image_0000001277608849](figures/zh-cn_image_0000001277608849.png) **按钮进行刷新。** 效果如下图所示：
![zh-cn_image_0000001233528192](figures/zh-cn_image_0000001233528192.png) ![zh-cn_image_0000001233528192](figures/zh-cn_image_0000001233528192.png)
...@@ -183,9 +190,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 ...@@ -183,9 +190,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 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_0000001277728613](figures/zh-cn_image_0000001277728613.png) ![zh-cn_image_0000001277728613](figures/zh-cn_image_0000001277728613.png)
3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001277809373](figures/zh-cn_image_0000001277809373.png)按钮运行。效果如下图所示： 3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001277809373](figures/zh-cn_image_0000001277809373.png)按钮运行。效果如下图所示：
![zh-cn_image_0000001233209024](figures/zh-cn_image_0000001233209024.png) ![zh-cn_image_0000001233209024](figures/zh-cn_image_0000001233209024.png)
恭喜您已经使用eTS语言开发（低代码方式）完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。 恭喜您已经使用eTS语言开发（低代码方式）完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。
zh-cn/application-dev/quick-start/start-with-ets.md
浏览文件 @ 5bd5bc49
...@@ -9,9 +9,11 @@ ...@@ -9,9 +9,11 @@
## 创建eTS工程 ## 创建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) ![zh-cn_image_0000001223556342](figures/zh-cn_image_0000001223556342.png)
2. 进入配置工程界面，**UI Syntax**选择“**eTS**”，其他参数保持默认设置即可。 2. 进入配置工程界面，**UI Syntax**选择“**eTS**”，其他参数保持默认设置即可。
![zh-cn_image_0000001223716826](figures/zh-cn_image_0000001223716826.png) ![zh-cn_image_0000001223716826](figures/zh-cn_image_0000001223716826.png)
3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。 3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
...@@ -245,6 +247,7 @@ ...@@ -245,6 +247,7 @@
1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 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) ![zh-cn_image_0000001268077317](figures/zh-cn_image_0000001268077317.png)
3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001262206247](figures/zh-cn_image_0000001262206247.png)按钮运行。效果如下图所示： 3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001262206247](figures/zh-cn_image_0000001262206247.png)按钮运行。效果如下图所示：
......
zh-cn/application-dev/quick-start/start-with-js-low-code.md
浏览文件 @ 5bd5bc49
...@@ -24,9 +24,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 ...@@ -24,9 +24,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
> 该功能在DevEco Studio 3.0 Beta2及更高版本中支持，且compileSdkVersion必须为7或以上。 > 该功能在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) ![zh-cn_image_0000001268198893](figures/zh-cn_image_0000001268198893.png)
2. 进入配置工程界面，打开“**Enable Super Visual**”开关，**UI Syntax**选择“**JS**”，其他参数保持默认设置即可。 2. 进入配置工程界面，打开“**Enable Super Visual**”开关，**UI Syntax**选择“**JS**”，其他参数保持默认设置即可。
![zh-cn_image_0000001223717294](figures/zh-cn_image_0000001223717294.png) ![zh-cn_image_0000001223717294](figures/zh-cn_image_0000001223717294.png)
3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。 3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
...@@ -73,6 +75,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 ...@@ -73,6 +75,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
![zh-cn_image_0000001260928361](figures/zh-cn_image_0000001260928361.gif) ![zh-cn_image_0000001260928361](figures/zh-cn_image_0000001260928361.gif)
5. **在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。** 第一个页面效果如下图所示： 5. **在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。** 第一个页面效果如下图所示：
![zh-cn_image_0000001216288558](figures/zh-cn_image_0000001216288558.png) ![zh-cn_image_0000001216288558](figures/zh-cn_image_0000001216288558.png)
...@@ -140,7 +143,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 ...@@ -140,7 +143,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
``` ```
- “**second.visual**”： 打开second.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001215388262](figures/zh-cn_image_0000001215388262.png)（Events），鼠标点击Click事件的输入框，选择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) ![zh-cn_image_0000001268082945](figures/zh-cn_image_0000001268082945.png)
3. **打开index.visual或index.js文件，点击预览器中的** ![zh-cn_image_0000001261979271](figures/zh-cn_image_0000001261979271.png) **按钮进行刷新。** 效果如下图所示： 3. **打开index.visual或index.js文件，点击预览器中的** ![zh-cn_image_0000001261979271](figures/zh-cn_image_0000001261979271.png) **按钮进行刷新。** 效果如下图所示：
...@@ -152,6 +155,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 ...@@ -152,6 +155,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 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) ![zh-cn_image_0000001268283201](figures/zh-cn_image_0000001268283201.png)
3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001262207811](figures/zh-cn_image_0000001262207811.png)按钮运行。效果如下图所示： 3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001262207811](figures/zh-cn_image_0000001262207811.png)按钮运行。效果如下图所示：
......
zh-cn/application-dev/quick-start/start-with-js.md
浏览文件 @ 5bd5bc49
...@@ -8,9 +8,11 @@ ...@@ -8,9 +8,11 @@
## 创建JS工程 ## 创建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) ![zh-cn_image_0000001223558814](figures/zh-cn_image_0000001223558814.png)
2. 进入配置工程界面，**UI Syntax**选择“**JS**”，其他参数保持默认设置即可。 2. 进入配置工程界面，**UI Syntax**选择“**JS**”，其他参数保持默认设置即可。
![zh-cn_image_0000001223877162](figures/zh-cn_image_0000001223877162.png) ![zh-cn_image_0000001223877162](figures/zh-cn_image_0000001223877162.png)
3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。 3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
...@@ -203,6 +205,7 @@ ...@@ -203,6 +205,7 @@
1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 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) ![zh-cn_image_0000001223557290](figures/zh-cn_image_0000001223557290.png)
3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001217047316](figures/zh-cn_image_0000001217047316.png)按钮运行。效果如下图所示： 3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001217047316](figures/zh-cn_image_0000001217047316.png)按钮运行。效果如下图所示：
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或