了解更多开源请访问：开源基础软件社区https://ost.51cto.com低代码开发介绍方法，具有丰富的UI界面编辑功能，遵循HarmonyOSJS开发规范，通过可视化界面开发方式快速构建布局，可有效降低用户的时间成本，提高用户构建UI界面的效率。注：DevEcoStudioV2.2Beta1及之后版本支持此功能。DevEcoStudio3.0Beta4及之后的版本支持eTS低代码特性。compileSdkVersion必须为7以上，eTS低代码要求compileSdkVersion为8以上。本次，我们就来对比介绍一下低代码开发的功能和使用方法。这几天一直在用低代码开发制作一些页面效果。即使没有太多的前端设计经验，使用低代码开发也能产生非常好的页面效果、可操作性、美观性和效率。改进，体验不错，所以我也会在一个issue中分享。体验步骤简单3步，即可开始低代码开发。在打开的项目中，选择模块的pages文件夹，点击鼠标右键，选择New>Visual。在弹出的对话框中输入Visual名称，点击Finish。创建Visual后，项目中会自动生成一个低代码目录结构。js版本和eTS文件根据自身特点略有不同。打开“page.visual”文件来设计和开发页面的视觉布局。低代码开发支持哪些操作拖放组件这是最基本的功能，还有组件的复制粘贴；组件的过滤查询（个人觉得如果属性区和样式区也支持过滤查询就更好了）；并通过组件树快速关联画布中的组件，实现组件的显示/隐藏；画布效果即时预览，还可以切换横竖屏、放大缩小、明暗主题；属性和样式、事件设置等功能区低代码开发界面按操作分为5个区域，界面布局如下：JS版低代码开发界面：eTS版低代码开发接口。UI控制区。提供拖放控件。JS版本和eTS版本的控件数量和类型不同。如下图所示，可以看出目前JS控件比较丰富。JS版支持27种拖拽组件。eTS版本支持12种拖放组件。开发者可以通过在组件树中选择组件来快速定位画布中的组件（同步选择画布中对应的组件）；点击组件后面的或图标可以隐藏/显示对应的组件，并查看是否有mediaQuery属性JS版本eTS版本Canvas预览区开发者可以在该区域进行组件拖拽、拉伸等可视化操作，构建UI界面布局效果.Attributesandstylesettingarea属性和样式设置区，JS版本和eTS版本不同，JS版本支持8个面板，eTS支持6个面板，因为属性不同，所以面板支持设置的属性也不同，这里是不一样的上市一个。属性面板（JS）用于设置组件的基本标识和外观显示特征的属性，例如：组件的ID、For、Value、Type、Content、Checked等属性。General面板（JS/eTS）用于设置Width、Height、Background、Position、Display等通用样式。Feture面板（JS/eTS）用于设置组件特有的样式，如描述Text组件的文字大小等的FontSize样式。Flex面板（JS/eTS）用于设置Flex布局的相关样式。事件面板（JS/eTS）为组件绑定相关事件，并设置绑定事件的回调函数。Dimension面板（JS/eTS）用于设置Padding、Border、Margin等与盒模型相关的样式。Gridpanel(JS)只有当Div组件的Display样式设置为grid时才会出现该图标。用于设置网格布局相关的样式。原子面板（JS/eTS）用于设置原子布局相关样式。工具栏操作区。功能面板，包括常用画布缩放、撤销、显示/隐藏组件虚拟边框、设备切换、模式切换、可视化布局界面一键转换为代码文件等。JS版和eTS版，再来说说Switchtomediaquery（切换到媒体查询），也就是这个图标：切换到媒体查询模式，可以为组件设置不同的样式和属性。目前的媒体查询模式只对不同的设备类型和不同的屏幕状态（横屏\竖屏）有效。解释一下这个意思：当我们在竖屏设计界面，然后切换到横屏时，发现一些不合适的地方，点击切换到媒体查询模式，然后进行调整，比如一些宽度比例，调整后完成后，我们切换到竖屏，发现横竖屏都适合。媒体查询模式的效果最终设计完成后。在将低代码接口转化为代码时，我们会在代码中增加媒体查询的相关代码。importmediaQuery_WFRdfrom'@ohos.mediaquery'@Entry@ComponentstructConsoleManager{@Statemessage:string='HelloWorld'/***在低代码模式下，不要向构建函数添加任何内容，因为它将被覆盖*通过.visual文件在构建阶段生成的内容。*/@Staterow1Height_b3cx:字符串|number=undefined@Staterow17Width_b3cx:字符串|number=undefined@Statetext32Width_Xh0M:字符串|number=undefined@Statetext32TextAlign_0MzJ:TextAlign=undefined@Staterow2Height_b3cy:字符串|number=undefined@Statecolumn2Height_x1bW:字符串|number=undefined@Statetext1Height_Xh0M:字符串|number=undefined@Staterow4Height_b3c0:字符串|number=undefined@Stateimage7Height_WFnZ:字符串|number=undefined@Stateimage7ObjectFit_nZTd:ImageFit=undefined@Statetext21Height_Xh0M:字符串|number=undefined@Stateimage8Height_WFnZ:字符串|number=undefined@Stateimage8ObjectFit_nZTh:ImageFit=undefined@Statetext22Height_Xh0M:字符串|number=undefined@Stateimage9Height_WFnZ:字符串|number=undefined@Stateimage9ObjectFit_nZTl:ImageFit=undefined@Statetext23Height_Xh0M:字符串|number=undefined@Stateimage10Height_FnZT:字符串|number=undefined@Stateimage10ObjectFit_ZTEw:ImageFit=undefined@Statetext24Height_Xh0M:字符串|number=undefined@Staterow7Height_b3c3:字符串|number=undefined@Statecolumn16Height_1bW4:字符串|number=undefined@Statetext27Height_Xh0M:字符串|number=undefined@Staterow8Height_b3c4:字符串|number=undefined@Staterow10Height_3cxM:字符串|number=undefined@Staterow9Height_b3c5:字符串|number=undefined@Staterow20Height_3cyM:字符串|number=undefined@Staterow13Height_3cxM:字符串|number=undefined@Stateimage17Height_FnZT:字符串|number=undefined@Stateimage17ObjectFit_ZTE3：ImageFit=undefined@Staterow23Height_3cyM:字符串|number=undefined@Statecolumn32Height_1bW4:字符串|number=undefinedmediaQueryCb_FRdW=nulltabletLandscape_TGFu:boolean=falsetabletPortrait_0UG9:boolean=falselistener_tabletLandscape_TGFu=mediaQuery_WFRd.matchMediaSync('(device-type:tablet)and(orientation:landscape)')listener_tabletPortrait_0UG9=mediaQuery_WFRd.matchMediaSync('(device-type:平板电脑）和（方向：纵向）'）saveMediaQueryResult_hUXV（mediaQueryResult）{switch（mediaQueryResult.media）{case'（设备类型：平板电脑）和（方向：横向）'：this.tabletLandscape_TGFu=mediaQueryResult.matchesbreakcase'（设备类型：平板电脑）和（方向：纵向）'：this.tabletPortrait_0UG9=mediaQueryResult.matches打破默认：break}this.updateForMediaQuery_yTWV()}initForMediaQuery_k1lZ(){this.row1Height_b3cx="280vp"this.row17Width_b3cx="50%“吨his.text32Width_Xh0M="50%"this.text32TextAlign_0MzJ=TextAlign.Endthis.row2Height_b3cy="50vp"this.column2Height_x1bW="80%"this.text1Height_Xh0M="50vp"this.row4Height_b3c0="100vp"this.image7Height_WFnZ="50vp""this.image7ObjectFit_nZTd=undefinedthis.text21Height_Xh0M="50vp"this.image8Height_WFnZ="50vp"this.image8ObjectFit_nZTh=undefinedthis.text22Height_Xh0M="50vp"this.image9Height_WFnZ="50vp"this.image9ObjectFit_nZTl=undefinedthis.text23MHeight"this.image10Height_FnZT="50vp"this.image10ObjectFit_ZTEw=undefinedthis.text24Height_Xh0M="50vp"this.row7Height_b3c3="50vp"this.column16Height_1bW4="80%"this.text27Height_Xh0M="50vp"this.row8Height_b3c4="this.10.row10Height_3cxM="50vp"this.row9Height_b3c5="100vp"this.row20Height_3cyM="50vp"this.row13Height_3cxM="110vp"this.image17Height_FnZT=“50vp”this.image17ObjectFit_ZTE3=undefinedthis.row23Height_3cyM=“50vp”this.column32Height_1bW4=“80%”}updateForMediaQuery_yTWV(){this.initForMediaQuery_k1lZ()if(this.tabletLandscape_TGFu){this.row1Height_b3cx=“150vp”th.textX32Mid="20%"this.text32TextAlign_0MzJ=TextAlign.Startthis.row2Height_b3cy="40vp"this.column2Height_x1bW="100%"this.text1Height_Xh0M="100%"this.row4Height_b3c0="70vp"this.image7Height_WFnZ="50%"this.image7ObjectFit_nZTd=ImageFit.Containthis.text21Height_Xh0M="50%"this.image8Height_WFnZ="50%"this.image8ObjectFit_nZTh=ImageFit.Containthis.text22Height_Xh0M="50%"this.image9Height_WFnZ="50%"this.image9ObjectFit_nZTl=ImageFit.Containthis.text23Height_Xh0M="50%"this.image10Height_FnZT="50%"this.image10ObjectFit_ZTEw=ImageFit.Containthis.text24Height_Xh0M="50%"this.row7Height_b3c3="40vp"this.column16Height_1bW4="100%"this.text27Height_Xh0M="100%"this.row8Height_b3c4="70vp"this.row10Height_3cxM="40vp"this.row9Height_b3c5="7这个.row20Height_3cyM="40vp"this.row13Height_3cxM="70vp"this.image17Height_FnZT="50%"this.image17ObjectFit_ZTE3=ImageFit.Fillthis.row23Height_3cyM="40vp"this.column32Height_1bW4="100%"tGra(){this.row37cWidth="40%"}}aboutToAppear(){this.mediaQueryCb_FRdW=this.saveMediaQueryResult_hUXV.bind(this)this.listener_tabletLandscape_TGFu.on('change',this.mediaQueryCb_FRdW)this.listener_Utabletangraite(0G9Portraite',this.mediaQueryCb_FRdW)}一些通过低代码开发界面实现的效果登录页面首页试用页面控制台页面我的页面注册页面今天的分享就到这里，感谢阅读！了解更多开源信息，请访问：开启源码基础软件社区https://ost.51cto.com
