0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

什么是HarmonyOS低代码开发

电子发烧友开源社区 来源:HarmonyOS开发者 作者:HarmonyOS开发者 2021-11-22 10:50 次阅读

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

一、什么是HarmonyOS低代码开发?

低代码开发,顾名思义,就是用更少的代码量,完成更高效的应用交付。低代码开发让更多的人可以参与到应用程序开发当中,不仅是具有专业编程能力的程序员,非技术背景的业务人员同样可以构建应用;对于大型企业来讲,低代码开发还可以降低IT团队培训、技术部署的初始成本。

二、HarmonyOS低代码开发界面介绍

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

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

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

③ 功能面板:包括常用的画布缩小放大、撤销、显示/隐藏组件虚拟边框、设备切换、模式切换、可视化布局界面一键转换为hml和css文件等。

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

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

三、HarmonyOS低代码开发的主要特点

HarmonyOS低代码开发利用可视化“拖拉拽”的开发方式替代传统的编码开发,免去了开发人员手动编写平台相关代码,减轻了非技术开发人员的压力,通过编写少量代码即可完成UI界面的开发,可有效降低开发者的上手成本并提升开发者构建UI界面的效率。接下来我们一起看看HarmonyOS低代码开发平台有哪些特点:

1

丰富的组件和模板

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

2

高效的可视化设计

HarmonyOS低代码开发针对UI界面开发提供了一整套的可视化设计工具。(1)拖拽组件时显示辅助条如图3所示,当开发者拖拽ListItem组件时,只有移动到配套的List组件中,才会出现可以放置组件的辅助条,避免组件错配问题。开发者在对组件“拖拉拽”时会自动生成代码,减少了开发者在代码编写中常见的问题,比如拼写错误、标签闭环等。

(2)缩放和参数调整。

如图4所示,可以直接拖拽组件实现组件缩放,也可以如图5通过属性栏来给每个组件做详细的参数配置。

HarmonyOS低代码开发支持复制、剪切、粘贴、撤销、重做等常用的功能。

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

针对image组件,或者其他组件的背景图片,HarmonyOS低代码开发提供了图片资源选择器,方便开发者选择图片,避免手动输入图片文件路径的麻烦。

3

所见即所得

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

4

多设备开发

针对HarmonyOS面向多设备的特性,低代码编辑器还支持多屏流转、多端部署。如图7所示,开发者在低代码开发平台可以非常方便地进行多设备开发及横竖屏切换。同时,开发者也可以选择针对某一个设备的显示效果以可视化的形式进行调整,而不影响到其他设备,极大提高了多设备页面开发的效率。

5

逻辑解析和关联

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

四、HarmonyOS低代码开发示例

接下来给大家演示用低代码开发一个运动健康页面的原子化服务:

看完视频,是不是觉得超简单?只需通过“拖拉拽”就可以轻松完成UI界面开发,就算是没有代码基础的小白也可以轻松上手,还在等什么,赶紧打开IDE快速开发你的UI界面吧。

HarmonyOS低代码开发未来还将支持自定义组件,更多功能特性,敬请期待!

责任编辑:haq

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 代码
    +关注

    关注

    30

    文章

    4553

    浏览量

    66665
  • 鸿蒙系统
    +关注

    关注

    183

    文章

    2605

    浏览量

    65251
  • HarmonyOS
    +关注

    关注

    79

    文章

    1780

    浏览量

    29234

原文标题:HDC2021技术分论坛:HarmonyOS低代码开发介绍

文章出处:【微信号:HarmonyOS_Community,微信公众号:电子发烧友开源社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    润开鸿获鸿蒙先锋授牌,荣膺华为HarmonyOS开发服务商

    3月27日,华为HDD行业沙龙在北京举办,本次活动由HarmonyOS产品专家带来了精彩的议题分享,涵盖HarmonyOS操作系统介绍、HarmonyOS应用特性分享、意图框架介绍、行业解决方案应用、
    的头像 发表于 03-29 10:33 115次阅读
    润开鸿获鸿蒙先锋授牌,荣膺华为<b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>服务商

    拓维信息及旗下开鸿智谷同获华为HarmonyOS开发服务商认证

    近日,拓维信息及旗下开鸿智谷双双通过华为HarmonyOS开发服务商认证,成为华为“鸿蒙服务商先锋计划”认证级伙伴。秉持共同发展、共创价值的合作理念,拓维信息、开鸿智谷将携手华为打造
    的头像 发表于 03-29 08:13 86次阅读
    拓维信息及旗下开鸿智谷同获华为<b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>服务商认证

    HarmonyOS鸿蒙原生应用开发设计- 华为分享图标

    HarmonyOS设计文档中,为大家提供了独特的华为分享图标,开发者可以根据需要直接引用。 开发者直接使用官方提供的华为分享图标内容,既可以符合HarmonyOS原生应用的
    发表于 10-25 14:28

    HarmonyOS鸿蒙原生应用开发设计- HarmonyOS Sans 字体

    HarmonyOS设计文档中,为大家提供了独特的字体,开发者可以根据需要直接引用。 开发者直接使用官方提供的字体内容,既可以符合HarmonyOS原生应用的
    发表于 10-23 16:12

    HarmonyOS语言基础类库开发指南上线啦!

    代码。 异步并发能力适用于单次I/O任务的场景开发,例如一次网络请求、一次文件读写等操作。 文档链接 **异步并发概述:**​​https://developer.harmonyos.com/cn
    发表于 10-18 16:36

    HarmonyOS语言基础类库开发指南上线啦!

    指南中提供了详细的介绍和开发指导,帮助开发者全面了解并发实现、容器类库基础操作、XML的生成解析与转换等。 本期HarmonyOS开发者资料直通车带您快速了解内容干货~ 一 语言基础类
    的头像 发表于 10-18 16:20 268次阅读
    <b class='flag-5'>HarmonyOS</b>语言基础类库<b class='flag-5'>开发</b>指南上线啦!

    HarmonyOS NEXT新能力,一站式高效开发HarmonyOS应用

    更复杂应用开发。首先HarmonyOS支持大型应用模块化开发,并且支持通过轻量化应用组件,减少运行资源占用。同时,通过ArkUI跨平台框架的能力,可以实现一次开发, 多平台运行,高度复
    发表于 08-14 15:08

    HarmonyOS NEXT新能力,一站式高效开发HarmonyOS应用

    2023年8月6日华为开发者大会2023(HDC.Together)圆满收官,伴随着HarmonyOS 4的发布,华为向开发者发布了汇聚所有最新开发能力的
    的头像 发表于 08-11 12:10 564次阅读

    HarmonyOS NEXT新能力,一站式高效开发HarmonyOS应用

    2023年8月4日的华为开发者大会2023(HDC.Together)拉开帷幕,伴随着HarmonyOS 4的发布,华为向开发者发布了汇聚所有最新开发能力的
    的头像 发表于 08-09 17:16 775次阅读

    【直播预告】HarmonyOS极客松赋能直播第四期:HarmonyOS开发经验分享

    Release新版发布 HarmonyOS Connect认证测试 原文标题:【直播预告】HarmonyOS极客松赋能直播第四期:HarmonyOS开发经验分享 文章出处:【微信公众
    的头像 发表于 07-03 09:05 332次阅读
    【直播预告】<b class='flag-5'>HarmonyOS</b>极客松赋能直播第四期:<b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>经验分享

    【直播预告】HarmonyOS极客松赋能直播第三期:一次开发多端部署与ArkTS卡片开发

    Release新版发布 HarmonyOS Connect认证测试 原文标题:【直播预告】HarmonyOS极客松赋能直播第三期:一次开发多端部署与ArkTS卡片开发 文章出处:【微
    的头像 发表于 06-28 09:05 295次阅读
    【直播预告】<b class='flag-5'>HarmonyOS</b>极客松赋能直播第三期:一次<b class='flag-5'>开发</b>多端部署与ArkTS卡片<b class='flag-5'>开发</b>

    HarmonyOS开发:舒尔特方格游戏

    为丰富 HarmonyOS 对云端开发的支持、实现 HarmonyOS 生态端云联动,DevEco Studio 推出了云开发功能,开发者在
    的头像 发表于 06-19 15:05 487次阅读
    <b class='flag-5'>HarmonyOS</b>云<b class='flag-5'>开发</b>:舒尔特方格游戏

    HarmonyOS代码开发-在已有工程中添加Visual

    的步骤相同,接下来以JS工程为例分别讲解。 在已有的HarmonyOS工程中,可以通过创建Visual文件的方式,使用代码开发应用或服务的UI界面,要求compileSdkVersi
    发表于 05-24 16:01

    HarmonyOS代码开发-多语言支持及屏幕适配

    为3的场景,此场景下1px等于渲染出3个物理像素。例如设置Width为100px时,Width实际渲染像素为300物理像素。 说明:designWidth和autoDesignWidth相关具体概念请参考js标签配置。 *附件:HarmonyOS
    发表于 05-23 14:37

    HarmonyOS代码开发-创建新工程方式

    模式,可以针对不同设备和屏幕状态设置专属的样式和属性值,如下图,当前模式仅针对P40竖屏状态有效 *附件:HarmonyOS代码开发-创建新工程方式.docx
    发表于 05-18 16:34