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

概述

说明

该特性支持使用低代码进行JS/ArkTS页面开发，在DevEco Studio V2.2 Beta1及更高版本中支持，其中，ArkTS低代码特性在DevEco Studio 3.0 Beta4及更高版本中支持。

HarmonyOS低代码开发方式，具有丰富的UI界面编辑功能，例如基于图形化的自由拖拽、数据的参数化配置等，遵循​​HarmonyOS JS开发规范​​，通过可视化界面开发方式快速构建布局，可有效降低用户的时间成本和提升用户构建UI界面的效率。

低代码开发界面介绍

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

1.：UI Control：UI控件栏，可以将相应的组件选中并拖动到画布（Canvas）中，实现控件的添加。

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

或

图标，可以隐藏/显示相应的组件。

3.：Panel：功能面板，包括常用的画布缩小放大、撤销、显示/隐藏组件虚拟边框、设备切换、明暗模式切换、Media query切换、可视化布局界面一键转换为hml和css文件等。

4.：Canvas：画布，开发者可在此区域对组件进行拖拽、拉伸等可视化操作，构建UI界面布局效果。

5.：Attributes & Styles：属性样式栏，选中画布中的相应组件后，在右侧属性样式栏可以对该组件的属性样式进行配置。包括：

• Properties：对应

图标，用于设置组件基本标识和外观显示特征的属性，如组件的ID、If等属性。

• ​General：对应

图标，用于设置Width、Height、Background、Position、Display等常规样式。

• Feature：对应

图标，用于设置组件的特有样式，如描述Text组件文字大小的FontSize样式等。

• ​Flex：对应

图标，用于设置Flex布局相关样式。

• ​Events：对应

图标，为组件绑定相关事件，并设置绑定事件的回调函数。

• ​Dimension：对应

图标，用于设置Padding、Border、Margin等与盒式模型相关的样式。

• ​Grid：对应

图标，用于设置Grid网格布局相关样式，该图标只有Div组件的Display样式被设置为grid时才会出现。

• Atomic：对应

图标，用于设置​​原子布局​​相关样式。

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

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

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

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

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

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

说明

该功能在DevEco Studio 3.0 Beta2及更高版本中支持，且compileSdkVersion必须为7或以上。ArkTS低代码要求compileSdkVersion必须为8或以上。

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

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

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

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

• pages > index > index.js：低代码页面的逻辑描述文件，定义了页面里所用到的所有的逻辑关系，比如数据、事件等，详情请参考​​JS语法参考​​。如果创建了多个低代码页面，则pages目录下会生成多个页面文件夹及对应的js文件。

说明

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

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

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

说明

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

按钮，将低代码界面转换为hml和css代码。注意，代码转换操作会删除visual文件及其父目录，且为不可逆过程，代码转换后不能通过hml/css文件反向生成visual文件。

• 多设备开发的场景，可以单击界面画布右上角设备/模式切换按钮

，进行设备切换或模式切换。其中，单击

按钮，切换到Media Query模式，可以针对不同设备和屏幕状态设置专属的样式和属性值，如下图，当前模式仅针对P40竖屏状态有效

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

在已有的HarmonyOS工程中，可以通过创建Visual文件的方式，使用低代码开发应用或服务的UI界面，要求compileSdkVersion必须为7或以上。ArkTS低代码要求compileSdkVersion必须为8或以上。

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

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

• pages > page > page.js：低代码页面的逻辑描述文件，定义了页面里所用到的所有的逻辑关系，比如数据、事件等，详情请参考​​JS语法参考​​。如果创建了多个低代码页面，则pages目录下会生成多个页面文件夹及对应的js文件。

说明

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

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

说明

DevEco Studio预置了JS Visual模板，该模板对应的SDK版本为API 7。因此，在创建JS Visual文件时，如果模块的compileSdkVersion低于7，则会对新建的JS Visual文件对应的SDK版本进行降级处理，使其与模块对应的SDK版本保持一致。

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

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

说明

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

按钮，将低代码界面转换为hml和css代码。注意，代码转换操作会删除visual文件及其父目录，且为不可逆过程，代码转换后不能通过hml/css文件反向生成visual文件。

• 多设备开发的场景，可以单击界面画布右上角设备/模式切换按钮

，进行设备切换或模式切换。其中，单击

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

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

开发者在使用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/ide-low-code-custom-0000001430380856-V3​​