From 83804f3238a7d5512275fd8509292eba8f4dc002 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=9B=E4=BA=9A=E8=8A=B3?= Date: Mon, 25 Apr 2022 03:04:06 +0000 Subject: [PATCH] update zh-cn/application-dev/quick-start/start-with-ets-low-code.md. Signed-off-by: @ge-yafang --- .../quick-start/start-with-ets-low-code.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/zh-cn/application-dev/quick-start/start-with-ets-low-code.md b/zh-cn/application-dev/quick-start/start-with-ets-low-code.md index f95204d611..b9e4b77409 100644 --- a/zh-cn/application-dev/quick-start/start-with-ets-low-code.md +++ b/zh-cn/application-dev/quick-start/start-with-ets-low-code.md @@ -23,9 +23,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 ## 创建新工程支持低代码开发 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**，工具会自动生成示例代码和相关资源，等待工程创建完成。 @@ -69,6 +71,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 ![zh-cn_image_0000001235732402](figures/zh-cn_image_0000001233208988.gif) 5. **在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。** 第一个页面效果如下图所示： + ![zh-cn_image_0000001235892798](figures/zh-cn_image_0000001233049004.png) @@ -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组件，拖动放大。操作如下所示： - ![zh-cn_image_0000001280255513](figures/zh-cn_image_0000001277608817.gif) + + ![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，使得其文字放大。操作如下所示： @@ -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，如下所示： + ![zh-cn_image_0000001235745716](figures/zh-cn_image_0000001233049040.png) 2. **第二个页面返回到第一个页面。** @@ -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，如下所示： + ![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) @@ -183,9 +190,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 2. 点击**File** > **Project Structure** > **Project** > **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)吧。 -- GitLab