社区编辑申请
注册/登录
手把手教你低代码开发鸿蒙应用UI
开发
Dreamweaver 是一个“所见即所得”的可视化网站开发工具,主要用于动态网页和静态网页的开发;Fireworks主要是用于对网页上常用的jpg、gif的制作和处理,也可用于制作网页布局;Flash主要用来制作动画。

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

创建图片详细页面。

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

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

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

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

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

拖拉一个Image组件。

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

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

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

最终效果为:

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

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

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2022-06-12 06:48:34

2022-06-05 21:09:47

Python办公自动化

2022-04-02 20:45:04

Hi3516开发板操作系统鸿蒙

2022-04-18 10:37:01

鸿蒙操作系统开发工具

2022-06-16 17:02:49

微软智能云混合云Azure

2022-06-22 09:19:55

HDC鸿蒙ADB命令

2022-05-26 11:01:24

2022-04-15 14:31:02

鸿蒙操作系统

2022-05-11 15:08:52

驱动开发系统移植

2022-06-28 12:35:21

DockerPython

2022-04-07 15:28:16

HarmonyOS鸿蒙操作系统

2022-06-15 16:16:21

分布式数据库鸿蒙

2022-06-01 11:14:42

Java代码技巧

2022-06-16 07:32:38

VSCodePython插件

2022-06-27 19:01:04

Python应用程序数据

2022-06-07 17:01:31

UI框架前端

2022-05-28 16:14:13

手机更新APP

2022-06-27 17:46:53

PythonFlask

2022-06-15 11:51:14

Vue3开发避坑

2022-06-28 09:34:24

可视化Python代码

同话题下的热门内容

源码探秘:Python 中对象是如何被调用的?使用Java和Python进行数据统计和分析C++与Java“相爱相杀”:一个步步紧逼,一个节节败退裁员真能拯救中国互联网?吐血推荐17个提升开发效率的“轮子”Flask vs Django: 该如何选择Python框架?哪个版本的JVM最快?编写完10万行代码,我发了篇长文吐槽Rust

编辑推荐

2017年9月编程语言排行榜:Java、C与C++三巨头还能统治排行榜多久?2017年最受欢迎的5个前端框架比较2017年11月编程语言排行榜:脚本语言怎么了?2017年3月编程语言排行榜:Swift首次进入前十最近租房有点烦!技术人如何用Python找到称心如意的“小窝”?
我收藏的内容
点赞
收藏

51CTO技术栈公众号