侵权投诉

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

3天内不再提示

HarmonyOS 低代码开发开发鸿蒙应用UI

gh_834c4b3d87fe 来源:鸿蒙技术社区 作者:狼哥Army 2021-12-03 10:39 次阅读

早些时候,应该都有听说过网页三剑客,是一套强大的网页编辑工具,最初是由美国的 Macromedia 公司开发出来的。由 Dreamweaver,Fireworks,Flash 三个软件组成,俗称网页三剑客。

Dreamweaver 是一个“所见即所得”的可视化网站开发工具,主要用于动态网页和静态网页的开发;Fireworks 主要是用于对网页上常用的 jpg、gif 的制作和处理,也可用于制作网页布局;Flash 主要用来制作动画。

其实“所见即所得”的开发工具,很久之前就有了,这里为什么要提一下呢?

因为它确实可以帮助新手快速入门,作为新手如果想开发一个简单的应用,就要先知道各组件的属性和事件,从而使新手们的兴趣,一下子就变成了有些难以下手。

这时如果使用“所见即所得”的开发界面,只要轻松拖拉一下组件,修改一下组件各属性值,就可以立刻看到修改后的效果,从而不用写任何一行代码就可以把自己想要的界面拖拉,设置出来了。

只要踏出了第一步,下面我们就可以通过查看生成的代码,从中就可以在拖拉和代码之间学习,而不是一开始就从代码上学习,这样就大大给新手们添加了学习兴趣。

介绍了以前的历史,现在说说 HUAWEI DevEco Studio 工具,也是有“所见即所得”的低代码开发功能。

HarmonyOS 低代码开发方式,具有丰富的 UI 界面编辑功能,遵循 HarmonyOS JS 开发规范,通过可视化界面开发方式快速构建布局,可有效降低用户的时间成本和提升用户构建 UI 界面的效率。

①打开 DevEco Studio,创建一个新工程,模板选择支持 Phone 的模板,创建空白 JS 项目。

②这里选 Application 桌面, 低代码开发功能适用于 Phone 和 Tablet 设备的 HarmonyOS 应用、原子化服务,目前只支持 JS 语言,且 compileSdkVersion 必须为 6。

③选中模块的 pages 文件夹,单击鼠标右键,选择 New→JS Visual。

④这里取名为 list,用来展示图片列表。

⑤拖拉一个 List 组件到画布上。

⑥调整 List 组件宽度与高度为 100%。

⑦拖拉一个 ListItem 组件到 List 组件里,并设置宽度为 100%,高度为 100px。

⑧拖拉一个 Image 组件到 ListItem 组件里,并设置宽度为 200px,高度为100%。

⑨拖拉 Text 组件到 ListItem 组件里,并在 Image 组件右边,设置宽度为 100%,高度100%。

⑩在 list.js 文件准备好 List 组件需要的数据。

⑪选择 ListItem 组件,设置数据源。

⑫选择 Image 组件,设置图片源为 $item.img,修改图片宽度为 200px,ObjectFit: contain。

⑬选择 Text 组件,设置文本组件显示内容。

⑭修改 Text 组件左内边距为 10px。

⑮大慨效果出来了,但还是觉得不够靓仔,比如每行靠得太近了,还有在每行下面加上分隔线就更好看了。

⑯界面就拖拉好了,那下来就把这个界面显示到项目中,先把界面转换为 hml 和 css 文件。

⑰导出 hml 和 css 文件后,文件名为 list,预览器不给通过,后来修改文件名就可以了。

⑱创建图片详细页面。

d3e070c4-53c0-11ec-b2e9-dac502259ad0.png

⑲拖拉一个 Text 组件到画面上,设置宽度和高度,文本对齐方式。

d405d44a-53c0-11ec-b2e9-dac502259ad0.png

⑳调整最外层 div 的对齐方式。

d4315322-53c0-11ec-b2e9-dac502259ad0.png

㉑拖拉一个 Image 组件。

d4669a28-53c0-11ec-b2e9-dac502259ad0.png

㉒要到导出 hml 和 css 文件的时候了。

d478e232-53c0-11ec-b2e9-dac502259ad0.png

最终效果为:

d4add898-53c0-11ec-b2e9-dac502259ad0.gif

Gitee 源码:

https://gitee.com/army16_harmony/low-code-one.git

编辑:jq

原文标题:低代码开发鸿蒙应用UI,妙啊!

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:HarmonyOS技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    HarmonyOS应用开发-Svg组件ellipse

    一、说明椭圆形状。 [table] [tr][td]说明:该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记...
    发表于 01-20 15:47 202次 阅读
    HarmonyOS应用开发-Svg组件ellipse

    HD-GR基带模块的全部Verilog源码文件

    本文列出了HD-GR基带模块的全部Verilog源码文件。你可以点击链接阅读它们,还可以在 GNU LGPL协议约束下复制、修改、...
    发表于 01-20 06:52 0次 阅读

    HarmonyOS应用开发-Svg组件circle

    一、说明 圆形形状。 说明:该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版...
    发表于 01-19 09:39 101次 阅读

    HDC2021技术分论坛:组件通信、硬件池化,这些创新技术你get了吗?

    作者:ligang 华为分布式硬件技术专家,sunbinxin 华为应用框架技术专家 HarmonyOS是一款全新的分布式操作系统,为开发者提供...
    发表于 01-18 11:29 610次 阅读
    HDC2021技术分论坛:组件通信、硬件池化,这些创新技术你get了吗?

    HarmonyOS应用开发-HMS Core了解和熟悉

    HMS Core(华为移动核心服务)是华为移动服务(HMS,HUAWEI Mobile Services)提供的端、云开放能力的合集,助力...
    发表于 01-18 11:10 101次 阅读
    HarmonyOS应用开发-HMS Core了解和熟悉

    DevEco Studio 3.0 Beta2 -本地虚拟机体验

    在最新发布的DevEco Studio 3.0 Beta2 除了支持远程真机运行,还支持本地虚拟机,在没有网的情况下也可以使用。 安装本地...
    发表于 01-17 15:33 303次 阅读

    【年度精选】2021年度TOP榜单——HarmonyOS技术社区问答

    本榜单汇总了2021年回复数最多的提问帖,看看是否也是你在学习路上经常遇到的难题,每个帖子都有推荐理由,希望这个榜单能给各位...
    发表于 01-17 14:55 303次 阅读

    liunx下文件系统,都会与块设备层交互吗?

    下面这张图大家应该都很熟悉了,看起来linux下文件系统都要走块设备层。然后再与具体的存储器件交互。那么,请问下,是否有例外呢...
    发表于 01-17 11:29 303次 阅读
    liunx下文件系统,都会与块设备层交互吗?

    打造HarmonyOS智能全场景,7大BUFF为您助力!

    [quote]《HarmonyOS Connect系列课》上线,7套课程教会开发者打造智能全场景: 《HarmonyOS Connect系列课》共含7套课...
    发表于 01-17 10:38 101次 阅读

    【鸿蒙技术】开课啦!!!OH成长计划知识赋能第三期课程——标准系统应用开发

    OpenAtomOpenHarmony(以下简称“OpenHarmony”)开源开发者成长计划项目自....
    的头像 jf_35791075 发表于 01-17 09:35 8次 阅读
    【鸿蒙技术】开课啦!!!OH成长计划知识赋能第三期课程——标准系统应用开发

    【年度精选】2021年度top榜单——HarmonyOS技术社区讨论

    本榜单汇总了2021年HarmonyOS技术社区回复数最多的讨论帖,当中的讨论是否也带给你启发?每个帖子都有推荐理由,希望这个榜单...
    发表于 01-14 17:34 707次 阅读

    图形测试分析毫无头绪HarmonyOS图形栈测试技术帮你解决

    HarmonyOS图形栈是整个HarmonyOS操作系统的基座,包括ArkUI 2D和3D部分。图形....
    的头像 物联网星球 发表于 01-12 16:07 1529次 阅读
    图形测试分析毫无头绪HarmonyOS图形栈测试技术帮你解决

    新能力让数据多端协同更便捷,数据跨端迁移更高效

    分布式数据管理平台新增变量和文件的全局访问框架,以及文件分享框架,帮助开发者更便捷地实现数据的“多端....
    的头像 物联网星球 发表于 01-12 16:07 1563次 阅读
    新能力让数据多端协同更便捷,数据跨端迁移更高效

    为何基本共射极放大电路存在信号源与放大器不共地的问题?

    低频小信号ui的负极是与Vbb的正极相连,要是共地,应该是两者的负极同时接着地,这是我的理解转载于:....
    发表于 01-10 13:08 4次 阅读
    为何基本共射极放大电路存在信号源与放大器不共地的问题?

    Qt ECG Monitor Qt嵌入式床旁心电监护仪项目源码

    Qt ECG Monitor是由Qt-UI开发和维护的嵌入式床旁心电监护仪界面项目。项目提供C++/....
    发表于 01-10 11:41 15次 阅读
    Qt ECG Monitor Qt嵌入式床旁心电监护仪项目源码

    iMX8M mini开发板制作开机动画的思路

    ​ 一、下载 psplash源码 1.下载psplash:gitclone git://git.yo....
    发表于 01-10 10:24 27次 阅读
    iMX8M mini开发板制作开机动画的思路

    iMX8MQ linux5.4.3 修改开机进度条

    ​   一、下载psplash源码   下载 psplash:git clone git://git....
    发表于 01-10 10:23 26次 阅读
    iMX8MQ  linux5.4.3 修改开机进度条

    2021完整运营版本影视电影小程序源码 后端是苹果cms

    介绍:带流量主激励广告,电视投屏,分享防封技术场景设置功能等,功能比较多。文件里有教程网盘下载地址:....
    发表于 01-10 09:32 14次 阅读
    2021完整运营版本影视电影小程序源码 后端是苹果cms

    ADAYO华阳为AITO问界M5配套10.25寸高清液晶仪表

    在华为冬季新品发布会上,由金康赛力斯和华为合作开发的AITO首款车型问界M5正式面世。该车型凭借极致....
    的头像 ADAYO华阳通用 发表于 01-07 11:09 1660次 阅读

    电源开关机测试

    自己做了个简单的Qt界面实现相应的功能,最后附上代码,当然还有些小问题仅供参考一·主界面说明:电源开....
    发表于 01-07 10:22 12次 阅读
    电源开关机测试

    ADAYO华阳助力金康赛力斯打造智慧出行时代引领者

    在华为冬季新品发布会上,由金康赛力斯和华为合作开发的AITO首款车型问界M5正式面世。该车型凭借极致....
    的头像 ADAYO华阳集团 发表于 01-06 09:44 1503次 阅读

    HC32F460移植RT-Thread Nano+FinSh工程源码下载

    HC32F460移植RT-Thread Nano+FinSh工程源码下载
    发表于 01-05 10:30 29次 阅读

    HarmonyOS 2 提前完成所有既定产品正式版本上线

    据华为官方公告:已有上百款华为、荣耀设备升级到了 HarmonyOS 2 正式版,HarmonyOS....
    的头像 HarmonyOS技术社区 发表于 01-04 14:27 423次 阅读

    HarmonyOS如何玩 3d 游戏

    总有网友期待 HarmonyOS 什么时候能出 3d 游戏,今天就教你写一个能玩的 3d 游戏。
    的头像 HarmonyOS技术社区 发表于 01-04 14:23 286次 阅读

    HarmonyOS基于 ArkUI 中 TS 扩展声明式开发范式

    本来计划要做一个本地数据库存储相关的项目,但是官方的小伙伴给我说,ArkUI 数据库目前不支持最新的....
    的头像 HarmonyOS技术社区 发表于 01-04 14:19 267次 阅读

    HarmonyOS百度网盘客户端可适配手机页面

    什么是菟盘?菟盘是由百度网盘开放平台提供的 API 开发的一个百度网盘客户端。主要提供网盘文件浏览,....
    的头像 HarmonyOS技术社区 发表于 01-04 13:58 374次 阅读

    HarmonyOS 中的几个自定义控件介绍

    HarmonyOS 开发自定义组件目前还不是很丰富,在开发过程中常常会有一些特殊效果的组件,这就需要....
    的头像 HarmonyOS技术社区 发表于 01-04 13:49 305次 阅读

    首发!成功移植OpenHarmony到瑞芯微RK2206开发板,2022年2月即将开源~

    经过三周的时间,我们成功将OpenHarmony 1.1.2版本移植到瑞芯微RK2206开发板上,板....
    的头像 jf_56650670 发表于 01-04 09:49 341次 阅读
    首发!成功移植OpenHarmony到瑞芯微RK2206开发板,2022年2月即将开源~

    HarmonyOS如何用一套OS源码部署到多种终端

    作者:peitaiyi,华为终端OS产品交付专家HarmonyOS是一款面向万物互联时代的、全新的分....
    的头像 HarmonyOS开发者 发表于 12-31 16:44 370次 阅读

    华为HarmonyOS智能座舱应用生态打造软硬结合座舱新体验

    12月,在 “2021华为智能汽车解决方案生态论坛”上,华为以“开放共融,聚众行远”为主题,发布了H....
    的头像 华为智能汽车解决方案 发表于 12-30 15:40 2496次 阅读

    OpenHarmony开源见面会 中科创达带你拥抱OpenHarmony

    OpenHarmony开源见面会上中科创达带你拥抱OpenHarmony OpenHarmony开源....
    的头像 inr999 发表于 12-28 15:46 1052次 阅读
    OpenHarmony开源见面会 中科创达带你拥抱OpenHarmony

    OpenHarmony开源见面会上 拓维信息谈赋能千行百业

    OpenHarmony开源见面会上 拓维信息谈赋能千行百业 OpenHarmony开源见面会(南京站....
    发表于 12-28 10:54 899次 阅读
    OpenHarmony开源见面会上 拓维信息谈赋能千行百业

    led流水灯隔一个亮一个luok 仿真电路和源码

    led流水灯隔一个亮一个luok 仿真电路和源码
    发表于 12-28 09:34 26次 阅读

    超级终端场景下的多种设备在不同环境下如何组成一个网络

    相信大家对HarmonyOS的“超级终端”比较熟悉了。那么,您知道超级终端场景下的多种设备在不同环境....
    的头像 HarmonyOS官方合作社区 发表于 12-25 09:02 781次 阅读
    超级终端场景下的多种设备在不同环境下如何组成一个网络

    HarmonyOS分布式应用上架问题分析

    HarmonyOS是新一代的智能终端操作系统,给开发者提供了设备发现、设备连接、跨设备调用等丰富的分....
    的头像 HarmonyOS官方合作社区 发表于 12-24 17:56 616次 阅读
    HarmonyOS分布式应用上架问题分析

    华为智能生活馆·石家庄欢乐汇12月25日盛大开业

    坐落高端商圈,璀璨新星升起 12月25日,华为智能生活馆·石家庄欢乐汇盛大开业。门店位于石家庄欢乐汇....
    的头像 鹰眼 发表于 12-24 11:11 460次 阅读

    HarmonyOS UI界面活动可实现不同屏幕的界面适配能力

    HarmonyOS的界面设计/组件设计需要拥有良好的自适应能力,可快速进行不同尺寸屏幕的开发。其次,....
    的头像 HarmonyOS开发者 发表于 12-23 09:50 350次 阅读

    HarmonyOS 3D渲染引擎介绍

    随着3D技术的应用普及,越来越多的场景都能看到3D的身影,比如充电动效、3D壁纸、游戏等等,给用户带....
    的头像 HarmonyOS开发者 发表于 12-23 09:49 523次 阅读
    HarmonyOS 3D渲染引擎介绍

    华为HarmonyOS智能座舱生态提供个性化、智能化、多样化服务体验

    2021华为智能汽车解决方案生态论坛以“聚享生态、合创未来”为主题,汇聚汽车产业生态圈多方伙伴。
    的头像 华为智能汽车解决方案 发表于 12-22 14:32 519次 阅读

    酷炫3D效果在瘦设备上也能实现?

    未来,HarmonyOS 3D渲染引擎以及配套的3D开发工具链将随着HarmonyOS持续演进,不断....
    的头像 物联网星球 发表于 12-21 17:55 1196次 阅读
    酷炫3D效果在瘦设备上也能实现?

    在 Ubuntu 上使用源码安装 OpenResty

    镜像下载、域名解析、时间同步请点击 阿里云开源镜像站   本文将介绍如何在 Ubuntu 上使用源码....
    发表于 12-21 11:34 30次 阅读

    润和软件携OpenHarmony最新成果出席2021AIoT开源科技节

    12月10日,2021AIOT开源科技节暨OpenHarmony技术论坛在广州召开,润和软件作为Op....
    的头像 HiHope社区 发表于 12-19 14:12 64次 阅读
    润和软件携OpenHarmony最新成果出席2021AIoT开源科技节

    HarmonyOS设备功能调测相关的常见问题

    在开发HarmonyOS Connect生态产品时,你是否也有设备功能调测方面的疑问?
    的头像 HarmonyOS开发者 发表于 12-17 15:10 665次 阅读

    HarmonyOS校园极客优秀开发案例以及洞察分析

    极客,来源于Geek的音译,常被用于形容对计算机和网络技术有狂热兴趣并投入大量时间钻研的人,他们天生....
    的头像 HarmonyOS开发者 发表于 12-17 14:56 554次 阅读

    方舟开发框架(Ark UI)概述及开发实战

    本期要为大家介绍的是ArkUI入门课程——HarmonyOS技术训练营第四期《方舟开发框架(Ark ....
    的头像 HarmonyOS开发者 发表于 12-17 14:49 730次 阅读

    HarmonyOS对DFX能力的要求

    提到开发一个产品,我们通常首先想到的是要实现什么样的功能,但是除了功能之外,非功能属性也会很大程度上....
    的头像 HarmonyOS开发者 发表于 12-17 14:39 596次 阅读

    HarmonyOS分布式应用评分工具定位于帮助开发者本地快速测试

    HarmonyOS是新一代的智能终端操作系统,给开发者提供了设备发现、设备连接、跨设备调用等丰富的分....
    的头像 HarmonyOS开发者 发表于 12-17 13:50 409次 阅读

    TDK与iCAN合作举办iCAN“未来杯”HarmonyOS技术应用创新大赛

    由中国信息协会主办,山东大学、中国信息协会教育分会、艾肯文化传媒(北京)有限公司、江苏科新智能教育研....
    的头像 TDK中国 发表于 12-16 14:36 455次 阅读

    首发!成功移植鸿蒙到瑞芯微RK2206开发板,代码即将开源~

    经过三周的时间,我们成功将OpenHarmony 1.1.2版本移植到瑞芯微RK2206开发板上,板....
    发表于 12-15 18:21 479次 阅读
    首发!成功移植鸿蒙到瑞芯微RK2206开发板,代码即将开源~

    Harmony OS 设备开发学习记录(十四)--Wifi的STA模式连接wifi

    Harmony OS 设备开发学习记录(十四)–Wifi的STA模式连接wifi基于hispark ....
    发表于 12-14 19:09 81次 阅读
    Harmony OS 设备开发学习记录(十四)--Wifi的STA模式连接wifi

    防水抗摔的AGM三防机X5开箱测评和华为 Sound SE开箱测评

    近期开箱的手机都是时尚绚丽的外观设计,强调色彩,后盖多样化设计。今天开箱的就不一样,相对较为小众的市....
    的头像 智能移动终端拆解开箱图鉴 发表于 12-13 10:00 1543次 阅读
    防水抗摔的AGM三防机X5开箱测评和华为 Sound SE开箱测评

    华为云联合HarmonyOS重磅发布智联生活行业加速器

    据IDC的报告,2021年上半年中国智能家居设备市场出货量约1亿台,同比增长13.7%;2021全年....
    的头像 华为开发者社区 发表于 12-09 09:26 645次 阅读

    LVGL 优化帧率技巧

    目录标题前文LVGL帧率限制代码优化等级前文LVGL——PC模拟器仿真模拟+VS2017f429 d....
    发表于 12-07 13:21 85次 阅读
    LVGL 优化帧率技巧

    使用Unified Communications Managed API获取Lync在线会议的链接地址

    最近在项目上遇到一个问题,需要能够在程序中获取Lync会议的链接地址。Lync是微软出品的一套即时通....
    发表于 12-07 11:51 27次 阅读
    使用Unified Communications Managed API获取Lync在线会议的链接地址

    基于HarmonyOS ArkUI3.0框架的木棉花扫雷

      前言  基于HarmonyOS ArkUI 3.0 框架的木棉花扫雷(上) 已经给大家分享了木棉....
    的头像 HarmonyOS官方合作社区 发表于 12-07 11:08 515次 阅读

    U8g2图形库使用技巧记录(2)

    ~恍恍惚惚中,感觉瓦力已经慢慢悠悠的向我走来,看了他的孤独,感觉自己的也就不算什么了~前言这一次和大....
    发表于 12-05 16:06 142次 阅读
    U8g2图形库使用技巧记录(2)

    基于鸿蒙分布式数据服务开发的聊天室应用

       之前给大家介绍过《HarmonyOS 分布式之仿抖音应用》,此次给大家介绍一下基于鸿蒙分布式数....
    的头像 HarmonyOS技术社区 发表于 12-03 10:35 552次 阅读

    鸿蒙智联生态服务平台—智能硬件伙伴的最佳拍档

    作者:chengjie,鸿蒙智联生态服务平台运营经理您在产品开发和运营过程中是否遇到过以下问题: 产....
    的头像 HarmonyOS开发者 发表于 12-03 09:59 736次 阅读
    鸿蒙智联生态服务平台—智能硬件伙伴的最佳拍档

    基于HarmonyOS API Version 7版本特性说明

    2020年9月11日,HarmonyOS SDK发布了首个Beta版本,支持基于HarmonyOS的....
    的头像 HarmonyOS开发者 发表于 12-03 09:53 707次 阅读
    基于HarmonyOS API Version 7版本特性说明

    如何快速掌握加入HarmonyOS/OpenHarmony开发

    两年前,当HarmonyOS(鸿蒙)第一次亮相华为开发者大会时,很多人对它能否成功甚至活下来,还将信....
    的头像 电子发烧友论坛 发表于 12-01 17:18 704次 阅读