1 HarmonyOS低代码开发-创建新工程方式 - HarmonyOS技术社区 - 电子技术论坛 - 广受欢迎的专业电子论坛 - 德赢Vwin官网

[文章]HarmonyOS低代码开发-创建新工程方式

阅读量0
0
0

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

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

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

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

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

1.打开DevEco Studio,创建一个新的工程,选择Empty Ability模板。

HarmonyOS低代码开发-创建新工程方式-开源基础软件社区

2.打开Enable Super Visual,表示使用低代码开发功能开发应用/服务。单击Finish等待工程同步完成。
HarmonyOS低代码开发-创建新工程方式-开源基础软件社区

同步完成后,工程目录中自动生成低代码目录结构。
HarmonyOS低代码开发-创建新工程方式-开源基础软件社区
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”文件,即可进行页面的可视化布局设计与开发。

说明:使用低代码开发界面过程中,如果界面需要使用到其它暂不支持可视化布局的控件时,可以在低代码界面开发完成后,单击HarmonyOS低代码开发-创建新工程方式-开源基础软件社区按钮,将低代码界面转换为hml和css代码。注意,代码转换操作会删除visual文件及其父目录,且为不可逆过程,代码转换后不能通过hml/css文件反向生成visual文件。

多设备开发的场景,可以单击界面画布右上角设备/模式切换按HarmonyOS低代码开发-创建新工程方式-开源基础软件社区,进行设备切换或模式切换。其中,单击HarmonyOS低代码开发-创建新工程方式-开源基础软件社区按钮,切换到Media Query模式,可以针对不同设备和屏幕状态设置专属的样式和属性值,如下图,当前模式仅针对P40竖屏状态有效

HarmonyOS低代码开发-创建新工程方式-开源基础软件社区

*附件:HarmonyOS低代码开发-创建新工程方式.docx

回帖

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表德赢Vwin官网 网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
链接复制成功,分享给好友