HarmonyOS Connect设备开发–抛除束缚,自定义设备UI

HarmonyOS Connect设备开发--抛除束缚,自定义设备UI

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

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

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

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

HarmonyOS Connect设备开发--抛除束缚,自定义设备UI

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

1、 了解OneHop template

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

HarmonyOS Connect设备开发--抛除束缚,自定义设备UI

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 //本地中文模板配置文件

HarmonyOS Connect设备开发--抛除束缚,自定义设备UI

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

2、 删除control 模块

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

HarmonyOS Connect设备开发--抛除束缚,自定义设备UI

HarmonyOS Connect设备开发--抛除束缚,自定义设备UI

3、Entry模块pages下新建jscontrol

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

HarmonyOS Connect设备开发--抛除束缚,自定义设备UIHarmonyOS Connect设备开发--抛除束缚,自定义设备UI

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

4、自定义风扇UI

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

HarmonyOS Connect设备开发--抛除束缚,自定义设备UIHarmonyOS Connect设备开发--抛除束缚,自定义设备UI

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

HarmonyOS Connect设备开发--抛除束缚,自定义设备UI

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

HarmonyOS Connect设备开发--抛除束缚,自定义设备UI

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

5、设jscontrol为跳转目标页面

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

HarmonyOS Connect设备开发--抛除束缚,自定义设备UI

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

小结

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

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

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

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

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

文章版权声明

 1 原创文章作者:︶ㄣ东哥,如若转载,请注明出处: https://www.52hwl.com/100001.html

 2 温馨提示:软件侵权请联系469472785#qq.com(三天内删除相关链接)资源失效请留言反馈

 3 下载提示:如遇蓝奏云无法访问,请修改lanzous(把s修改成x)

 免责声明:本站为个人博客,所有软件信息均来自网络 修改版软件,加群广告提示为修改者自留,非本站信息,注意鉴别

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2024年1月17日 下午4:12
下一篇 2024年1月17日 下午4:13