OpenHarmony DevEco Studio使用指南-低代码开发

概述

OpenHarmony低代码开发方式，具有丰富的UI界面编辑功能，遵循​​JS、ArkTS开发规范​​，通过可视化界面开发方式快速构建布局，可有效降低用户的时间成本和提升用户构建UI界面的效率。

说明

支持使用低代码进行JS/ArkTS页面开发，本章节以开发ArkTS页面为例，介绍低代码功能及使用方法。

低代码开发界面介绍

低代码开发界面如下图所示：

1. Components：UI控件栏，可以将相应的组件选中并拖动到画布（Canvas）中，实现控件的添加。分为公共Common和自定义Custom两个页签。
3. ​Component Tree

：组件树，在低代码开发界面中，可以方便开发者直观地看到组件的层级结构、摘要信息以及错误提示。开发者可以通过选中组件树中的组件（画布中对应的组件被同步选中），实现画布内组件的快速定位；单击组件后的



或



图标，可以隐藏/显示相应的组件。
4. ​
5. Panel：功能面板，包括常用的画布缩小放大、撤销、显示/隐藏组件虚拟边框、设备切换、模式切换、可视化布局界面一键转换为ArkTS文件等。
6. ​Canvas：画布，开发者可在此区域对组件进行拖拽、拉伸等可视化操作，构建UI界面布局效果。
7. Properties/Events：属性及事件页签。

• Properties：用于设置组件基本标识和外观显示特征的属性，如组件的大小、背景、位置等属性。此处会根据不同的组件显示不同的属性设置组合。
• Events：为组件绑定相关事件，并设置绑定事件的回调函数。

使用低代码开发应用或服务

使用低代码开发应用或服务有以下两种开发方式：

• 创建一个支持低代码开发的新工程，开发应用或服务的UI界面。
• 在已有工程中，创建Visual文件来开发应用或服务的UI界面。

ArkTS工程和JS工程使用低代码的步骤相同，接下来以ArkTS工程为例分别讲解这两种开发方式。

创建新工程支持低代码开发

在工程模板中，提供了低代码开发的工程模板，您可以直接选择一个支持低代码开发的工程模板来开发应用或服务的UI界面。

说明

该功能在DevEco Studio 3.0 Beta2及更高版本中支持，且compileSdkVersion必须为8或以上。

接下来我们以创建一个Empty Ability工程模板为示例进行说明。

1. 打开DevEco Studio，​​创建新工程​​，在OpenHarmony页签选择Empty Ability模板。

2. 打开Enable Super Visual开关，表示使用低代码开发功能开发应用/服务。单击Finish等待工程同步完成。

同步完成后，工程目录中自动生成低代码目录结构。

• ets > MainAbility > pages > index.ets：低代码页面的逻辑描述文件，定义了页面里所用到的所有的逻辑关系，比如数据、事件等。如果创建了多个低代码页面，则pages目录下会生成多个ets文件。

说明

如果是JS模块，低代码页面的逻辑描述文件的路径为js > MainAbility > pages > index > index.js，js文件的编辑具体请参考​​JS语法参考​​。

使用低代码页面开发时，其关联js文件的同级目录中不能包含hml和css页面，即js > MainAbility > pages > index目录下不能包含hml与css文件，可能会出现报错。

• supervisual > MainAbility > pages > index.visual：visual文件存储低代码页面的数据模型，双击该文件即可打开低代码页面，进行可视化开发设计。如果创建了多个低代码页面，则pages目录下会对应生成多个visual文件。

3. 打开“.visual”文件，即可进行页面的可视化布局设计与开发。

说明

  ● 使用低代码开发界面过程中，如果界面需要使用到其它暂不支持可视化布局的控件时，可以在低代码界面开发完成后，单击

按钮，将低代码界面转换为ArkTS代码（ets模块）或hml和css代码（js模块）。注意，代码转换操作会删除visual文件，且为不可逆过程，代码转换后不能通过ets或hml/css文件反向生成visual文件。
  ● 多设备开发的场景，可以单击界面画布上方设备/模式切换按钮，进行设备切换或模式切换。其中，单击

按钮，切换到​​media query​​模式，可以针对不同设备和屏幕状态设置专属的样式和属性值。当前media query模式仅针对不同设备类型和不同屏幕状态（横屏\竖屏）有效。

在已有工程中添加Visual支持低代码开发

在已有的OpenHarmony工程中，可以通过创建Visual文件的方式，使用低代码开发应用或服务的UI界面。

1. 在打开的工程中，选中模块的pages文件夹，单击鼠标右键，选择New >Visual。

2. 在弹出的对话框中，输入Visual name，单击Finish。创建Visual后，会在工程中自动生成低代码的目录结构，如下图所示：

• ets > MainAbility > pages > page.ets：低代码页面的逻辑描述文件，定义了页面里所用到的所有的逻辑关系，比如数据、事件等。如果创建了多个低代码页面，则pages目录下会生成多个对应ets文件。

说明

如果是JS模块，低代码页面的逻辑描述文件的路径为js > MainAbility > pages > page > page.js，js文件的编辑具体请参考​​JS语法参考​​。

使用低代码页面开发时，其关联ets文件或js文件的同级目录中不能包含hml和css页面，例如上图中的MainAbility > pages目录下不能包含hml与css文件，可能会出现报错。

• supervisual > MainAbility > pages > page.visual：visual文件存储低代码页面的数据模型，双击该文件即可打开低代码页面，进行可视化开发设计。如果创建了多个低代码页面，则pages目录下会生成多个visual文件。

说明

不建议通过文本编辑的方式更改visual文件，否则，可能导致不能正常使用低代码功能。

3. 打开“page.visual”文件，即可进行页面的可视化布局设计与开发。

说明

  ●  使用低代码开发界面过程中，如果界面需要使用到其它暂不支持可视化布局的控件时，可以在低代码界面开发完成后，单击

按钮，将低代码界面转换为ArkTS代码（ets模块）或hml和css代码（js模块）。注意，代码转换操作会删除visual文件，且为不可逆过程，代码转换后不能通过ets或hml/css文件反向生成visual文件。

  ● 多设备开发的场景，可以单击界面画布上方设备/模式切换按钮，进行设备切换或模式切换。其中，单击

按钮，切换到media query模式，可以为组件在不同设备设置不同的样式和属性。

使用低代码开发完OpenHarmony应用或服务后，如果需要真机设备调试/运行，JS工程，需要单击

按钮，将Visual文件转换为hml和css代码后才能运行。

导入Sketch文件生成界面

​​HarmonyOS应用开发网站​​提供了用于HarmonyOS设备的设计资源文件，内容包括色彩、控件和界面模板，可以帮助开发者设计符合HarmonyOS风格的界面。

DevEco Studio的低代码开发功能，支持通过导入Sketch源文件生成界面。导入时，可以转换的元素为：

• HarmonyOS设计资源中的元素
• 由HarmonyOS设计资源中的元素组成的自定义组件
• 原生的图像元素和文字元素
• 组件样式和属性

说明

该功能在DevEco Studio 3.1 Beta1及更高版本中支持，且创建的工程必须是compileSdkVersion为8或以上的ArkTS工程。

1. 在菜单栏选择File > New > Import... > Import Sketch，打开Sketch To Visual对话框。

2. 单击Choose Sketch File，选择本地需要导入的Sketch源文件。如果Sketch文件中包含不支持的组件及属性，在导入后将会收到提示，不支持的组件及属性将不会被导入。
3. 在Pages和Custom components页签完成页面及组件配置。Sketch中包含的页面及组件，在导入时，将分别在Pages和Custom components页签中展示，您可以勾选需要导入的页面及组件，并设置相应的文件路径及归属的Ability。
4. 单击OK，完成Sketch文件导入。完成导入后，DevEco Studio将自动生成页面.visual文件、自定义组件.visual文件以及.ets文件。

低代码开发中使用自定义组件

开发者在使用DevEco Studio的低代码功能进行可视化开发时，可以通过自定义组件功能自由封装业务逻辑类组件，实现能力复用，降低开发及维护成本。

说明

该功能在DevEco Studio 3.1 Beta1及更高版本中支持，且创建的工程必须是compileSdkVersion为8或以上的ArkTS工程。

自定义组件

由已有的基础组件（或组合）创建自定义组件

1. 右击基础组件（或组件组合），在弹出的菜单中选择Create Custom Component。

2. 在弹出的对话框中输入自定义组件名称，然后单击OK。

自定义组件创建完成后，DevEco Studio将会自动生成.visual和.ets文件，Stage模型和FA模型下生成的文件路径有所区别：

• Stage模型：

    ○  .visual文件：src/main/supervisual/page/xxx.visual

    ○  .ets文件：src/main/ets/page/xxx.ets

• FA模型：

    ○  .visual文件：src/main/supervisual/xxxAbility/common/xxx.visual

    ○  ets文件：src/main/ets/xxxAbility/common/xxx.ets

3. 自定义组件创建完成后，DevEco Studio将自动打开自定义组件设计界面，开发者可以在设计界面编辑自定义组件的属性、事件和布局。

新建一个自定义组件

1. 选中支持的目录，选择File > New > Visual > Component，或者右击目录，选择New > Visual > Component。其中支持新建自定义组件的目录，Stage模型和FA模型有所区别：

• Stage模型：切换到Ohos视图后的ets目录及下属目录（不包含test目录）。
• FA模型：切换到Ohos视图后的Page类型Ability目录及下属目录。

2. 在弹出的New Visual Component对话框中，输入自定义组件名称，单击Finish。

3. 自定义组件创建完成后，DevEco Studio将自动打开自定义组件设计界面，开发者可以在设计界面编辑自定义组件的属性、事件和布局。

使用自定义组件

自定义组件创建后，开发者可以直接在应用设计界面的Custom页签查看到已经创建的自定义组件，并可以直接拖拽到画布中使用，另外开发者也可以在.ets代码页面直接导入并使用自定义组件。

在.ets代码页面使用自定义组件示例如下所示：

import ImgButton from '../CustomComponents/ImgButton'
@Entry
@Component
struct Index {

  @State message: string = 'Hello World'

  build() {
    Column(){
      ImgButton()
    }
    .width('100%')
    .height('100%')
  }
}

自定义属性

开发者可以为自定义组件设置自定义属性。

1. 在自定义组件的.ets文件中定义变量。例如：

@Preview
@Component
export default struct ImgButton {
  @State customLable:string = 'This is my comp'
  build() {
  }
}

2. 在使用自定义组件的设计界面中，选择该自定义组件，在属性栏中将显示自定义属性。开发者可自行设置属性值，设置属性值后可同步修改自定义组件显示效果。

自定义事件

开发者可以为自定义组件设置自定义事件。

1. 在自定义组件的.ets文件中定义事件函数。例如：

@Preview
@Component
export default struct ImgButton {
  @State customLable:string = 'This is my comp'

  customKeyEvent:(event:KeyEvent) => void =(event:KeyEvent):void =>{
    console.log("customKeyEvent")
  }

  build() {
  }
}

2. 在使用自定义组件的设计界面中，选择该自定义组件，在事件栏中将显示自定义事件。开发者可自行绑定事件函数。

文章转载自：​​https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ohos-ide-low-code-custom-0000001500953481-V3​​