一、什么是低代码开发

在了解低代码开发之前,咱们先看看运用低代码开发的效果。

小白指南:手把手教你用低代码开发一个应用页面
低代码开发效果示例

低代码开发是DevEco Studio为HarmonyOS开发者供给的可视化页面的开发方式,具备丰富的UI页面修改才能,开发者能够在图形化的用户界面上自由拖拽组件、完结数据的参数化配置,还能实时预览开发页面的效果,所见即所得。

可能咱们会有这样的疑问,“既然能手敲代码完结页面开发,为什么还要用低代码开发呢?”

低代码开发为咱们开发者供给了UI界面开箱即用的组件,经过简单拖、拉、拽和可视化数据绑定的操作方式,快速开发用户界面。不只能够减少键入的代码量,降低开发成本,还提升了页面开发功率,助力高效开发。

二、低代码开发的特性才能

低代码开发主要包含以下特性:

1.自由拖拽组件;

2.可视化数据绑定;

3.ForEach轻松仿制所需组件;

4.媒体查询(MediaQuery);

5.一键逃生。

接下来,咱们经过开发一个豆浆机运用页面实例来依次介绍这些特性。

三、上手低代码开发

怎么快速创立支撑低代码开发的工程?只需在创立新工程时敞开Enable Super Visual开关即可。

DevEco Studio供给了支撑低代码开发的工程模板,挑选该模板后,只需单击敞开Enable Super Visual开关,即可快速创立支撑低代码开发的工程。

如果是JS工程,compileSdkVersion为7及以上;如果是ArkTS工程,compileSdkVersion为8及以上。

小白指南:手把手教你用低代码开发一个应用页面
创立工程

创立完工程后,会在工程目录中自动生成低代码目录结构(如下图所示)。

其间index.ets文件是低代码页面的逻辑描绘文件,界说页面里所用到的所有的逻辑关系,比如数据、事情等;index.visual文件存储低代码页面的数据模型,在该文件中进行页面的可视化布局规划与开发。

小白指南:手把手教你用低代码开发一个应用页面
工程目录结构

1、自由拖拽组件,静态设置组件特点规划排版

双击翻开index.visual文件,将需求的组件依次拖入画布中,在画布中开发者能够自由拖拽组件进行排版。

一起单击对应组件,即可在特点栏来设置组件的特点,轻松完结页面各板块的规划。

作为示例,咱们依次拖入了4个组件到画布中,对4个组件的特点进行静态设置。

小白指南:手把手教你用低代码开发一个应用页面
静态设置特点

那这些组件的层次关系是什么呢?咱们能够经过左下角的组件树,清晰直观地看到组件之间的层级结构。

小白指南:手把手教你用低代码开发一个应用页面
组件层级结构

2、可视化数据绑定

1)变量绑定:

组件的特点不只只存在静态常量的情况,特点在不同的场景中会需求展示不同的效果,这时就需求经过变量绑定来完结。

在index.ets文件中界说好变量,结合运用 index.visual文件在右侧特点栏,将特点对应的图切换至,然后在下拉框挑选变量this.变量名,快速完结变量的绑定。

作为示例,咱们在index.ets界说了4个数据变量,与index.visual文件中的4个组件进行了数据绑定。

小白指南:手把手教你用低代码开发一个应用页面
数据绑定

2)事情绑定

用户界面在一些特定场景里,还需求有交互的效果,如点击交互,这时给组件绑定相应的事情即可完结。

在index.ets文件里边界说好事情,在组件的Events特点栏挑选已界说好的事情后快速完结事情绑定。

作为示例,咱们在index.ets界说了点击事情,与index.visual文件中的组件进行了事情绑定。

小白指南:手把手教你用低代码开发一个应用页面
事情绑定

3、ForEach轻松仿制所需组件

ForEach功能用来迭代数组,为每个数据项创立相应的组件,在开发用户界面时,如果有类似的组件,能够轻松仿制想要的组件。

在index.ets文件中界说好业务逻辑,挑选相应组件,在ForEach特点栏挑选该特点后,只要完结该组件下的子组件设置,则会自动仿制生成对应组件的特点。

作为示例,咱们在index.ets文件中界说好变量后,绑定了index.visual文件中的组件ForEach,只设置了左侧组件的特点,右侧自动仿制生成相对应的图片和文字。

小白指南:手把手教你用低代码开发一个应用页面
ForEach

4、媒体查询(MediaQuery)完结一次开发多设备页面适配

低代码开发支撑适配多设备适配才能,ArkTS支撑反正屏,结合媒体查询(MediaQuery)能够将组件针对不同设备不同反正屏设置不用的值, 开发一个设备的页面,运用该功能进行简单的配置后,完结不同设备的页面适配。

点击index.visual画布右上角的图标切换到手机横屏,在手机横屏状态下点击画布右上角的图标使mediaquery其处于高亮,来进行多设备页面的规划。

小白指南:手把手教你用低代码开发一个应用页面
MediaQuery

5、一键逃生转换代码

低代码开发支撑将可视化.visual文件生成对应的.ets文件代码供咱们仿制此部分的代码,需求注意的是此操作不可逆,逃生后.ets文件无法转换为.visual文件。

如果需求查看或许仿制页面的代码,能够直接点击图标,一键生成代码。

小白指南:手把手教你用低代码开发一个应用页面
逃生

信任经过以上几个功能点的介绍,大家已经掌握怎么运用低代码开发来规划一个页面了。

小白指南:手把手教你用低代码开发一个应用页面
运用页面开发示例

一起,咱们刚发布的DevEco Studio 3.1 Beta1版本也带来了低代码开发的新特性,欢迎各位开发者探究体会:

丰富了组件类型,增加了Refresh 、TimePicker、Toggle、Select、Search等组件;

支撑规划稿转低代码和自界说组件,支撑导入Sketch文件自动生成可视化页面;

支撑依据场景需求自界说组件打造领域特定组件,提升低代码复用才能。

后续还会有更多好用、好玩的功能发布,敬请期待。