diff --git a/zh-cn/application-dev/quick-start/start-with-js-low-code.md b/zh-cn/application-dev/quick-start/start-with-js-low-code.md index fd4ffd4fa90daa2f7bd82a0119fc9a34b66198a7..5ccddd4f7ef474410ba142ada802fd01450f16e8 100644 --- a/zh-cn/application-dev/quick-start/start-with-js-low-code.md +++ b/zh-cn/application-dev/quick-start/start-with-js-low-code.md @@ -24,9 +24,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 > 该功能在DevEco Studio 3.0 Beta2及更高版本中支持,且compileSdkVersion必须为7或以上。 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**”,其他参数保持默认设置即可。 + ![zh-cn_image_0000001223717294](figures/zh-cn_image_0000001223717294.png) 3. 点击**Finish**,工具会自动生成示例代码和相关资源,等待工程创建完成。 @@ -73,6 +75,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ![zh-cn_image_0000001260928361](figures/zh-cn_image_0000001260928361.gif) 5. **在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。** 第一个页面效果如下图所示: + ![zh-cn_image_0000001216288558](figures/zh-cn_image_0000001216288558.png) @@ -140,7 +143,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ``` - “**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) **按钮进行刷新。** 效果如下图所示: @@ -152,6 +155,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 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)按钮运行。效果如下图所示: