HarmonyOS低代码开发-创建新工程方式 原创

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

创建一个支持低代码开发的新工程，开发应用或服务的UI界面。在已有工程中，创建Visual文件来开发应用或服务的UI界面。ArkTS工程和JS工程使用低代码的步骤相同，接下来以JS工程为例讲解。创建新工程支持低代码开发

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

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

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

1.打开DevEco Studio，创建一个新的工程，选择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竖屏状态有效