乐趣区

关于harmonyos:HDC2021技术分论坛HarmonyOS低代码开发介绍

作者:sunyuhui,wangxiaoyan,华为 2012 实验室软件 IDE 专家

什么是低代码开发?低代码开发次要特点有哪些?如何利用低代码开发原子化服务?本文带你一探到底~

一、什么是 HarmonyOS 低代码开发?
低代码开发,顾名思义,就是用更少的代码量,实现更高效的利用交付。低代码开发让更多的人能够参加到利用程序开发当中,不仅是具备业余编程能力的程序员,非技术背景的业务人员同样能够构建利用;对于大型企业来讲,低代码开发还能够升高 IT 团队培训、技术部署的初始老本。

二、HarmonyOS 低代码开发界面介绍
如图 1 所示,低代码开发界面由 UI 控件栏、组件树、性能面板、画布、属性款式栏组成。

图 1 低代码开发界面

① UI 控件栏:能够将相应的组件选中并拖动到画布(Canvas)中,实现控件的增加。

② 组件树:在低代码开发界面中,能够不便开发者直观地看到组件的层级构造、摘要信息以及谬误提醒。开发者能够通过选中组件树中的组件(画布中对应的组件被同步选中),实现画布内组件的疾速定位;点击组件后的图标,能够暗藏 / 显示相应的组件。

③ 性能面板:包含罕用的画布放大放大、撤销、显示 / 暗藏组件虚构边框、设施切换、模式切换、可视化布局界面一键转换为 hml 和 css 文件等。

④ 画布:开发者可在此区域对组件进行拖拽、拉伸等可视化操作,构建 UI 界面布局成果。

⑤ 属性款式栏:选中画布中的相应组件后,在右侧属性款式栏能够对该组件的属性款式进行配置。

更多低代码开发详情请参考官网:

https://developer.harmonyos.c…

三、HarmonyOS 低代码开发的次要特点
HarmonyOS 低代码开发利用可视化“利落拽”的开发方式代替传统的编码开发,免去了开发人员手动编写平台相干代码,加重了非技术开发人员的压力,通过编写大量代码即可实现 UI 界面的开发,可无效升高开发者的上手老本并晋升开发者构建 UI 界面的效率。

接下来咱们一起看看 HarmonyOS 低代码开发平台有哪些特点:

  1. 丰盛的组件和模板

如图 2 所示,低代码开发是基于一个个组件的,目前已反对 20 个组件,同时 IDE 还提供了一系列罕用场景下的模板,帮忙开发者疾速上手。

图 2 丰盛的组件和模板

  1. 高效的可视化设计

HarmonyOS 低代码开发针对 UI 界面开发提供了一整套的可视化设计工具。

(1)拖拽组件时显示辅助条

如图 3 所示,当开发者拖拽 ListItem 组件时,只有挪动到配套的 List 组件中,才会呈现能够搁置组件的辅助条,防止组件错配问题。开发者在对组件“利落拽”时会主动生成代码,缩小了开发者在代码编写中常见的问题,比方拼写错误、标签闭环等。

图 3 组件拖拽

(2)缩放和参数调整。

如图 4 所示,能够间接拖拽组件实现组件缩放,也能够如图 5 通过属性栏来给每个组件做具体的参数配置。

图 4 组件缩放

5.gif

图 5 参数调整

(3)其余性能

HarmonyOS 低代码开发反对复制、剪切、粘贴、撤销、重做等罕用的性能。

针对前端开发罕用的色彩调整,HarmonyOS 低代码开发提供了一个色彩选择器,不便开发者对组件或字体的色彩等作出调整,还会记录历史选用过的色彩。

针对 image 组件,或者其余组件的背景图片,HarmonyOS 低代码开发提供了图片资源选择器,不便开发者抉择图片,防止手动输出图片文件门路的麻烦。

  1. 所见即所得

HarmonyOS 低代码开发提供所见即所得的能力,如图 6 所示,当开发者在低代码编辑器上批改时,所看到的成果和预览器上的成果雷同,这样开发者就无需频繁地在代码与预览之间切换,只需专一于前端页面的开发,更加高效便捷。

6.jpg

图 6 所见即所得

  1. 多设施开发

针对 HarmonyOS 面向多设施的个性,低代码编辑器还反对多屏流转、多端部署。如图 7 所示,开发者在低代码开发平台能够十分不便地进行多设施开发及横竖屏切换。同时,开发者也能够抉择针对某一个设施的显示成果以可视化的模式进行调整,而不影响到其余设施,极大进步了多设施页面开发的效率。

7.jpg

图 7 多设施开发

  1. 逻辑解析和关联

在视觉页面调整实现后,如果想让 UI 界面具备动态化能力,就必须对其中的数据、事件进行绑定。如图 8 所示,低代码开发平台复用了 HarmonyOS 利用开发框架的接口,主动剖析开发者在代码中编写的数据与事件,以便让开发者对组件进行数据和事件绑定,让页面真正能动态化起来。

8.jpg

图 8 逻辑解析和关联

四、HarmonyOS 低代码开发示例
接下来给大家演示用低代码开发一个静止衰弱页面的原子化服务:

https://v.qq.com/x/page/f3310…
看完视频,是不是感觉超简略?只需通过“利落拽”就能够轻松实现 UI 界面开发,就算是没有代码根底的小白也能够轻松上手,还在等什么,连忙关上 IDE 疾速开发你的 UI 界面吧。

HarmonyOS 低代码开发将来还将反对自定义组件,更多功能个性,敬请期待!

退出移动版