社区编辑申请
注册/登录
HarmonyOS Connect设备开发--抛除束缚,自定义设备UI
系统 OpenHarmony
这一节我们将模板复杂的control模块移除、新建的control ui,不会java也不必担心碰一碰的实现。

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

本帖将实现配网完成后,跳转到自定义的ui。

一、抛除束缚,自定义设备UI

1、 了解OneHop template

第一天使用OneHop模板新建的工程中,可以看到在netconfig页面配网完成后会携带session_id、product_id、product_name跳转到control模块,如下图所示:

control模块主要做两件事:

  • ①定义控制ui。
  • ②处理设备消息。

ui是基于现有控件、弹窗等设计的,而非JS原始的元素;在ailife-view目录下提供了dialog、control容器,开发者需要在src-main-rawfile目录下进行声明使用,如下图:

├─control
└─ailife-view //该目录无需修改
├─control //控件容器
├─display //信息展示类控件
├─enum //枚举类控件
├─increasedecrease //加减器控件
├─item //显示子元素
├─multifunction //多功能控件
├─progress //进度条控件
└─reversal //开关类控件
├─customdisplay //自定义展示区
├─dialog //弹窗容器
├─dialogbox
├─enumlist //枚举弹窗
├─info //信息显示弹窗
├─picker //选择器弹窗
└─radiolist //单选弹窗
├─observed
└─utils
└─src
└─main
├─java //该目录下内容可见下方类定义
├─js
└─default
├─common //该目录下为本地资源文件,主要都是用于显示的图标资源
└─FAN
ic_on.png
ic_off.png
...
└─pages
└─index
index.js //起始js
└─resources
└─rawfile
├─FAN
FAN_en.json //本地英文模板配置文件
FAN_zh.json //本地中文模板配置文件

这样不太灵活,如果我们想使用类web范式自定义UI可以么? 当然可以,往后看。

2、 删除control 模块

在工程目录中选中control,右键卸载,然后记得在文件目录中直接删除control文件夹;同时在运行调试中移出control模块。如下图:

3、Entry模块pages下新建jscontrol

为方便入门,使用低代码方式新建页面,后期转为hml文件。新建页面命名为jscontrol,控制ui以及数据处理均在这个页面完成,也就是说配网完成后跳转到该页面。具体操作如下:

在pages目录下多了一个jscontrol页面,这是我们想要的。你会得到一个HelloWorld页面。摆脱了模板提供的容器限制,空白画布交给你,接下来可以随意展示才艺。

4、自定义风扇UI

低代码开发UI比较简单,针对本贴,我将在页面中放一台风扇、一行Smart Fan文本、一个开关。记得把ui改为列布局。操作如下:

这是最简洁的页面组成了,开关用于控制设备侧,这个下一期具体实现。为了编写更丰富的ui,你也可以转换为hml文件(不可逆操作)。操作如下:

转换后,你将得到jscontrol页面对应的css、hml文件。记住红圈中绑定的函数,将用于发送消息控制风扇开关。

这里发现一个bug,低代码开发ui,switch绑定change函数后,在js中并不会响应,转换为hml文件后,发现在change关键字前没给加@符号,这应该是ui编辑器的bug。

5、设jscontrol为跳转目标页面

回到netconfis.js 的goToControl()函数下将原来的ability代码注释或删除,新添加一个页面路由(需要在该js文件引入:import router from ‘@system.router’),操作如下:

如此配网完成后将跳转到我们的jscontrol页面。

小结

这一节我们将模板复杂的control模块移除、新建的control ui,不会java也不必担心碰一碰的实现。

本贴适合我这类APP开发小白;另外风扇的ui可以做得丰富些,如添加slider组件可以实现风扇不同转速等。帖子为了突出核心,力求简洁。

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​​。

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

2022-06-22 09:19:55

HDC鸿蒙ADB命令

2022-06-15 16:16:21

分布式数据库鸿蒙

2022-04-13 11:24:18

ETS开发HarmonyOS鸿蒙

2022-04-28 15:38:42

WebViewJavaUI

2022-04-07 15:28:16

HarmonyOS鸿蒙操作系统

2022-06-21 14:30:16

Vim自定义Linux

2022-05-24 15:06:57

AbilityeTS FA鸿蒙

2022-06-07 17:01:31

UI框架前端

2022-04-24 15:26:38

服务卡鸿蒙

2022-05-09 11:52:38

Java卡片服务卡片

2022-05-30 09:32:07

Spring容器

2022-05-17 10:33:58

设备开发鸿蒙操作系统

2022-05-09 11:19:12

CSS函数开源

2022-06-09 21:34:41

2022-06-15 09:54:51

PythonIDELinux

2022-04-14 11:35:01

HarmonyOS手表Demo操作系统

2022-04-07 14:17:15

Harmonytoast组件鸿蒙

2022-04-18 17:28:14

React前端

2022-06-10 07:45:09

CentOS国产操作系统

2022-03-21 15:19:27

鸿蒙UI组件ets自定义

同话题下的热门内容

HarmonyOS - HDC命令与ADB命令使用对比OHOS构建自定义服务实战啃论文俱乐部—数据密集型应用内存压缩HarmonyOS - 自定义组件之计时器HarmonyOS - 方舟开发框架ArkUI 流光按钮效果基于OpenHarmony3.1的购物车应用的实现OpenHarmony3.1-Ace-Formcomponent源码解析OpenHarmony HiSysEvent打点调用实践(L2)

编辑推荐

HarmonyOS 2.0鸿蒙第二期开发者Beta公测申请指南HarmonyOS LYEVK-3861开发板播放《蜜雪冰城》鸿蒙HarmonyOS分布式软总线:构建低时延、高带宽的多设备虚拟网络华为HarmonyOS的强势突围: 直面物联网迷宫的蓄力进击鸿蒙HarmonyOS2.0发布会现场回忆录
我收藏的内容
点赞
收藏

51CTO技术栈公众号