手把手教你低代码开发鸿蒙应用UI 原创 精华

狼哥Army
发布于 2021-11-23 15:57
浏览
8收藏

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

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

手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

其实“所见即所得”的开发工具,很久之前就有了,这里为什么要提一下呢?因为它确实可以帮助新手快速入门,作为新手如果想开发一个简单的应用,就要先知道各组件的属性和事件,从而使新手们的兴趣,一下子就变成了有些难以下手,这时如果使用“所见即所得”的开发界面,只要轻松拖拉一下组件,修改一下组件各属性值,就可以立刻看到修改后的效果,从而不用写任何一行代码就可以把自己想要的界面拖拉,设置出来了,只要踏出了第一步,下来我们就可以通过查看生成的代码,从中就可以在拖拉和代码之间学习,而不是一开始就从代码上学习,这样就大大给新手们添加了学习兴趣。

介绍了以前的历史,现在说说HUAWEI DevEco Studio工具,也是有“所见即所得”的低代码开发功能,HarmonyOS低代码开发方式,具有丰富的UI界面编辑功能,遵循HarmonyOS JS开发规范,通过可视化界面开发方式快速构建布局,可有效降低用户的时间成本和提升用户构建UI界面的效率。

  1. 打开DevEco Studio,创建一个新工程,模板选择支持Phone的模板,创建空白JS项目
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  2. 这里选Application桌面, 低代码开发功能适用于Phone和Tablet设备的HarmonyOS应用、原子化服务,目前只支持JS语言,且compileSdkVersion必须为6
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  3. 选中模块的pages文件夹,单击鼠标右键,选择New > JS Visual。
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  4. 这里取名为list, 用来展示图片列表
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  5. 拖拉一个List组件到画布上
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  6. 调整List组件宽度与高度为100%
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  7. 拖拉一个ListItem组件到List组件里, 并设置宽度为100%, 高度为100px;
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  8. 拖拉一个Image组件到ListItem组件里, 并设置宽度为200px, 高度为100%
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  9. 拖拉Text组件到ListItem组件里, 并在Image组件右边, 设置宽度为100%, 高度100%
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  10. 在list.js文件准备好List组件需要的数据.
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  11. 选择ListItem组件, 设置数据源
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  12. 选择Image组件, 设置图片源为$item.img, 修改图片宽度为200px, ObjectFit: contain
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  13. 选择Text组件, 设置文本组件显示内容
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  14. 修改Text组件左内边距为10px
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  15. 大慨效果出来了, 但还是觉得不够靓仔, 比如每行靠得太近了, 还有在每行下面加上分隔线就更好看了.
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  16. 界面就拖拉好了, 那下来就把这个界面显示到项目中, 先把界面转换为hml和css文件
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  17. 导出hml和css文件后, 文件名为list, 预览器不给通过,后来修改文件名就可以了.
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  18. 创建图片详细页面
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  19. 拖拉一个Text组件到画面上, 设置宽度和高度, 文本对齐方式
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  20. 调整最外层div的对齐方式
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  21. 拖拉一个Image组件
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

  22. 要到导出hml和css文件的时候了.
    手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

最终效果为:

B站:https://www.bilibili.com/video/BV1Ag411N7T8/

手把手教你低代码开发鸿蒙应用UI-鸿蒙开发者社区

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
11
收藏 8
回复
举报
5条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

这已经是傻瓜教程了,感谢楼主细心贴图

1
回复
2021-11-23 16:27:47
狼哥Army
狼哥Army

是的,对于没有编程基础的小伙伴,也可以简单上手,拖拉一下组件,就排版出一个界面出来了。

1
回复
2021-11-23 17:19:50
胸毛大猛汉
胸毛大猛汉

有点当时用游戏引擎写游戏的那感觉了,堆叠元素。

回复
2021-11-24 10:46:06
狼哥Army
狼哥Army 回复了 胸毛大猛汉
有点当时用游戏引擎写游戏的那感觉了,堆叠元素。

现在鸿蒙走进校园了,有这样的低代码开发,对于初接触编程的小伙伴来说,是一个不错的开始。

回复
2021-11-24 11:11:41
Whyalone
Whyalone

让我想起了大学时代DreamWaver写页面

回复
2021-11-26 12:00:48
回复
    相关推荐