|
|
|
|
公众号矩阵

手把手教你低代码开发鸿蒙应用UI

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

作者:狼哥Army来源:鸿蒙社区|2021-11-24 16:02

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

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

【编辑推荐】

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
  2. 打造一款定制化鸿蒙发行版
  3. 鸿蒙开源第三方组件—SwipeCaptcha_ohos3.0旋转验证组件
  4. OpenHarmony源码解析之安全子系统 (应用权限管理)
  5. HarmonyOS Sample之AI能力之NLU引擎服务
  6. HarmonyOS ArkUI之自定义组件侧滑菜单(JS)
【责任编辑:jianghua TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

带你轻松入门 RabbitMQ

带你轻松入门 RabbitMQ

轻松入门RabbitMQ
共4章 | loong576

58人订阅学习

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

14人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

42人订阅学习

视频课程+更多

Python自动化办公

Python自动化办公

讲师:张同乐29060人学习过

linux网络基础

linux网络基础

讲师:周玉强29955人学习过

从基础入门,进阶Python高级之路

从基础入门,进阶Python高级之路

讲师:刘晟剀30564人学习过

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微