了解更多开源请访问：开源基础软件社区https://ost.51cto.com3月31日OpenHarmony首款应用开发工具，DevEcoStudio3.0Beta3forOpenHarmony，发布，其中支持可视化界面UI开发是一大亮点。资料中心只介绍了JS的低代码开发。OpenHarmony的低代码开发方式遵循JS和TS开发规范，具有丰富的UI界面编辑功能。掌握后可以通过可视化的方式快速搭建版面。可以大大减少开发时间，提高构建UI界面的效率。事实上，ETS完全有能力进行低代码可视化开发来体验它的速度和效率。准备为OpenHarmony安装DevEcoStudio3.0Beta3。Hi3516开发板，烧写OpenHarmony3.1Release标准系统。一根TypeC数据线。准备好自己喜欢的图片资源。创建低代码可视化开发项目，点击“EnableSupperVisual”创建低代码可视化项目，API8和API9都可用。在项目目录下自动生成低代码目录结构，打开“index.visual”文件即可设计开发页面可视化布局。删除并清除默认模板中的“文本”和“行”控件，拖放组件栏中的Column组件，将其放到画布上使其全屏，拖放Column组件中的Text组件，并在属性栏中设置为正确的样式。将Swiper组件拖放到Column组件中，在右侧属性栏中设置样式，将多个图片组件拖放到Swiper组件中，并关联相应的图片资源。同时设置Swiper组件的AutoPlay为true。打开预览器，第一个图片轮播页面就完成了。然后创建第二个低代码页面来实现天气预报轮播。在entry/src/main/ets/MainAbility/pages下新建一个页面，清除模板原有的控件。拖放Column组件以使其在画布中全屏显示。将Text和Swiper组件拖放到Column组件中，操作同索引页面。在Swiper组件下，将Column、Row、Text、Progress和Image组件组合成一个组合组件。在Swiper中，复制组合的组件以生成其他日期的UI。分别设置每个组件的属性和样式。同时将Swiper组件AutoPlay设置为true，这样第二个低代码页面也已经生成。两个UI页面无代码，全部通过拖拽完成。为了实现页面之间的跳转以及其他逻辑控制、数据驱动等，目前ETS还需要少量的代码。在entry/src/main/ets/MainAbility/pages/index.ets中添加onclick方法。importrouterfrom'@system.router';@Entry@ComponentstructIndex{build(){}onclick(){router.push({uri:'pages/page'})}}在入口/src/main/ets/MainAbility/pages/page.ets添加onclick方法。importrouterfrom'@system.router';@Entry@ComponentstructPage{build(){}onclick(){router.push({uri:'pages/index'})}}点击两个页面的Swiper组件分别（Events）图标，绑定onClick事件，实现点击图片切换页面的功能。至此，低代码开发已经完成。签名烧录点击“文件-项目结构-项目-签名配置”，在弹出的窗口中勾选“自动生成签名”，等待签名完成，点击“确定”。用usb线连接电脑和3516开发板。开发板启动后，会自动连接IDE。点击设备“运行”按钮，完成工程编译，同时下载到3516开发板。总结低代码开发简单易学，操作简单。低代码开发效率高，节省时间。低代码开发出错的几率极低。目前主要用于UI开发。如有需要，可一键转换为ETS代码，继续完善。与JS的低代码开发相比，ETS可用控件较少，部分功能无法实现。相信在后续版本中会逐步加入各种常用组件。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。
