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

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

3天内不再提示

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

OpenHarmony技术社区 来源:鸿蒙技术社区 作者:狼哥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

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

    关注

    8

    文章

    633

    浏览量

    29134
  • ui
    ui
    +关注

    关注

    0

    文章

    204

    浏览量

    21339
  • HarmonyOS
    +关注

    关注

    79

    文章

    1967

    浏览量

    30004

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

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

收藏 人收藏

    评论

    相关推荐

    【书籍评测活动NO.47】HarmonyOS NEXT启程:零基础构建纯血鸿蒙应用

    要在2000万 。这一呼吁引起了全球开发者的关注,也意味着市场对HarmonyOS开发人才的需求将快速增长。 什么是纯血鸿蒙 HarmonyOS
    发表于 10-14 14:36

    庆科信息获HarmonyOS高级应用开发能力认证!助力品牌快速打造鸿蒙原生应用

    近日,上海庆科信息技术有限公司荣获HarmonyOS应用开发者高级认证,公司在华为鸿蒙生态的开发能力得到进一步拓展,能够帮助客户快速开发基于
    的头像 发表于 07-17 13:24 545次阅读
    庆科信息获<b class='flag-5'>HarmonyOS</b>高级应用<b class='flag-5'>开发</b>能力认证!助力品牌快速打造<b class='flag-5'>鸿蒙</b>原生应用

    鸿蒙ArkUI:【从代码UI显示的整体渲染流程】

    方舟开发框架(简称ArkUI)是鸿蒙开发UI框架,提供如下两种开发范式,我们 **只学声明式开发
    的头像 发表于 05-13 16:06 798次阅读
    <b class='flag-5'>鸿蒙</b>ArkUI:【从<b class='flag-5'>代码</b>到<b class='flag-5'>UI</b>显示的整体渲染流程】

    最新开源代码证实!“鸿蒙原生版”微信正在积极开发

    立刻保存,不需要同步或刷新调用。共享内存一般用于后台开发HarmonyOS NEXT 也就是鸿蒙星河版——俗称“纯血鸿蒙”,其采用华为自研内核,抛弃了传统的 Linux 内核以及
    发表于 05-08 17:08

    代码开发平台的崛起:优势、特点与应用

    代码开发平台是近年来迅速崛起的一种创新型软件开发工具,以其高效、灵活的开发模式正颠覆着传统的开发
    的头像 发表于 04-18 10:43 337次阅读
    <b class='flag-5'>低</b><b class='flag-5'>代码</b><b class='flag-5'>开发</b>平台的崛起:优势、特点与应用

    代码开发有哪些优势?

    代码平台以其高效、便捷、低成本的优势,正逐渐成为软件开发领域中的性价比之王。它不仅能够满足快速开发的需求,还能够降低技术门槛和维护成本,提高开发
    的头像 发表于 04-09 16:03 830次阅读
    <b class='flag-5'>低</b><b class='flag-5'>代码</b><b class='flag-5'>开发</b>有哪些优势?

    鸿蒙新篇章,领航新征程 I 软通动力荣膺首批“HarmonyOS开发服务商”

    HarmonyOS开发服务商”,成为华为该领域首批认证服务商。 软通动力高级副总裁石蓉(右),华为终端云开发者服务与平台部总裁望岳(左) HarmonyOS
    的头像 发表于 03-14 17:19 490次阅读
    <b class='flag-5'>鸿蒙</b>新篇章,领航新征程 I 软通动力荣膺首批“<b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>服务商”

    鸿蒙开发者预览版如何?

    在24年的华为鸿蒙发布会中表示。预览版已经向开发者开放申请,首批支持的机型有三款分别为华为 Mate 60、华为Mate 60 Pro、华为Mate X5。 其HarmonyOS NEXT去除
    发表于 02-17 21:54

    鸿蒙开发-HarmonyOS UI架构

    填充数据,就能正常显示一个列表了。 数据从哪来 可以看到上面的代码里是没有数据的,只有一个空数组。我们想要从网络获取数据。那么,数据怎么来呢?最简单粗暴的写法就是在aboutToAppear()中异步
    发表于 02-16 16:38

    鸿蒙开发教程

    去年8 月份华为发布会上,华为发布了HarmonyOS NEXT预览版,宣布不再兼容安卓应用。大家期待的纯血鸿蒙终于要来临了,next 预览版本现在已经开放申请渠道了,Next 开发者预览版本目前只
    的头像 发表于 01-31 17:11 724次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>教程

    华为宣布HarmonyOS NEXT鸿蒙星河版开发者预览面向开发者开放申请

    华为宣布HarmonyOS NEXT鸿蒙星河版开发者预览面向开发者开放申请,这意味着鸿蒙生态进入第二阶段,将加速千行百业的应用
    的头像 发表于 01-29 16:42 1359次阅读
    华为宣布<b class='flag-5'>HarmonyOS</b> NEXT<b class='flag-5'>鸿蒙</b>星河版<b class='flag-5'>开发</b>者预览面向<b class='flag-5'>开发</b>者开放申请

    淘宝与华为合作将基于HarmonyOS NEXT启动鸿蒙原生应用开发

    1月25日,淘宝与华为举办鸿蒙合作签约仪式,宣布将基于HarmonyOS NEXT启动鸿蒙原生应用开发
    的头像 发表于 01-26 16:14 1046次阅读

    鸿蒙开发之ArkTS基础知识

    一、ArkTS简介 ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript(简称TS)的基础上,匹配了鸿蒙的ArkUI框架,扩展了声明式UI、状态管理等相应的能
    的头像 发表于 01-24 16:44 2110次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>之ArkTS基础知识

    HarmonyOS SDK,助力开发者打造焕然一新的鸿蒙原生应用

    鸿蒙星河版重磅发布,带来了全新架构、全新体验、全新生态。作为支撑鸿蒙原生应用开发的技术源动力,HarmonyOS SDK 将系统级能力全面对外开放,覆盖了应用框架、应用服务、系统、媒
    发表于 01-19 10:31

    免费学习鸿蒙HarmonyOS开发,一些地址分享

    国内一流高校。通过鸿蒙班的设立,高校可以为学生提供专业的鸿蒙OS学习环境和丰富的实践机会,培养出更多的鸿蒙开发人才,为鸿蒙OS系统的生态建设
    发表于 01-12 20:48