diff --git a/zh-cn/application-dev/quick-start/figures/icon-note.gif b/zh-cn/application-dev/quick-start/figures/icon-note.gif new file mode 100644 index 0000000000000000000000000000000000000000..6314297e45c1de184204098efd4814d6dc8b1cda Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/icon-note.gif differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625085729328.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625085729328.png new file mode 100644 index 0000000000000000000000000000000000000000..ad124f28324f25c7cbee4d1d44238e14236199a3 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625085729328.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_202206250937.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_202206250937.png new file mode 100644 index 0000000000000000000000000000000000000000..c4aa65192d174763ee3b6c74e10274978868ac67 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_202206250937.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625094253256.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625094253256.png new file mode 100644 index 0000000000000000000000000000000000000000..33c3fd7d689bf5ce33f76547b0c7f414a5082715 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625094253256.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625094444644.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625094444644.png new file mode 100644 index 0000000000000000000000000000000000000000..33c3fd7d689bf5ce33f76547b0c7f414a5082715 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625094444644.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625094459124.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625094459124.png new file mode 100644 index 0000000000000000000000000000000000000000..1e4ebd7a6afedc3e0910e2776771f503b11df8d9 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625094459124.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625094953763.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625094953763.png new file mode 100644 index 0000000000000000000000000000000000000000..63419aabfea21d3636d478c744f54c22010e1bda Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625094953763.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625095047700.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625095047700.png new file mode 100644 index 0000000000000000000000000000000000000000..f59a38a9312325688c3dc86790f5e57f7c64ec64 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_20220625095047700.png differ 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 e98ceb6a4956f2d85700011a2f89b47622c84912..2b365363ffe1914137e6bda07104e1c6803a548c 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 @@ -13,10 +13,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 使用低代码开发应用或服务有以下两种开发方式： -- 直接创建一个支持低代码开发的新工程以进行开发。本文以此方式为例进行说明。 - +- 直接创建一个支持低代码开发的新工程以进行开发。 - 在已有工程中，创建visual文件来进行开发。 +下面分别用两种方式演示： + ## 创建新工程支持低代码开发 @@ -33,6 +34,45 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可 3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。 +## 创建visual文件支持低代码开发 + +1. 在打开的JS工程中，选中模块的pages文件夹，单击鼠标右键，选择**New > JS Visual**。 + +![img](figures/zh-cn_image_202206250937.png) + +2. 在弹出的对话框中，输入JS Visual Name，点击**Finish**。 + +![image-20220625032256509](figures/zh-cn_image_20220625085729328.png) + + + +3.创建JS Visual后，会在工程中自动生成低代码的目录结构，如下图所示。 + + + +![zh-cn_image_0000001223558810](figures/zh-cn_image_20220625094444644.png) + +- **entry > src > main > js > MainAbility > pages > index > index.js** ：低代码页面的逻辑描述文件，定义了页面里所用到的所有的逻辑关系，比如数据、事件等。详情请参考[JS语法参考](../ui/js-framework-syntax-js.md)。如果创建了多个低代码页面，则pages目录下会生成多个页面文件夹及对应的js文件。 + + > ![icon-note.gif](figures/icon-note.gif) **说明：** + > + > 使用低代码页面开发时，其关联js文件的同级目录中不能包含hml和css页面，例如上图中的 **js > MainAbility > pages > index** 目录下不能包含hml与css文件，否则会出现编译报错。 + +- **entry > src > main > supervisual > MainAbility > pages > index > index.visual** ：visual文件存储低代码页面的数据模型，双击该文件即可打开低代码页面，进行可视化开发设计。如果创建了多个低代码页面，则pages目录下会生成多个页面文件夹及对应的visual文件。 + +4. 打开“page.visual”文件，即可进行页面的可视化布局设计与开发。 + +> **说明：** +> +> - 使用低代码开发界面过程中，如果界面需要使用到其它暂不支持可视化布局的控件时，可以在低代码界面开发完成后，点击![img](figures/zh-cn_image_20220625095047700.png)按钮，将低代码界面转换为hml和css代码。**注意**，代码转换操作会删除visual文件及其父目录，且为不可逆过程，代码转换后不能通过hml/css文件反向生成visual文件。 +> - 多设备开发的场景，可以点击界面画布右上角设备/模式切换按钮![img](figures/zh-cn_image_20220625094953763.png)，进行设备切换或模式切换。 + + + +![image-20220625033408831](figures/zh-cn_image_20220625094459124.png) + +使用低代码开发完OpenHarmony应用或服务后，如果需要使用模拟器或真机设备调试/运行，需要点击![img](figures/zh-cn_image_20220625095047700.png)按钮，将JS Visual文件转换为hml和css代码后才能运行。 + ## 低代码开发工程项目文件