【HarmonyOS Connect设备开发-个人】1.抛除束缚,自定义设备UI 原创 精华

发布于 2022-5-13 15:42
浏览
1收藏

1.抛除束缚,自定义设备UI

@toc

本帖将实现配网完成后,跳转到自定义的ui。
【HarmonyOS Connect设备开发-个人】1.抛除束缚,自定义设备UI-开源基础软件社区

1.抛除束缚,自定义设备UI

1.1 了解OneHop template

第一天使用OneHop模板新建的工程中,可以看到在netconfig页面配网完成后会携带session_id、product_id、product_name跳转到control模块,如下图所示:【HarmonyOS Connect设备开发-个人】1.抛除束缚,自定义设备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设备开发-个人】1.抛除束缚,自定义设备UI-开源基础软件社区
这样不太灵活,如果我们想使用类web范式自定义UI可以么? 当然可以,往后看。

1.2 删除control 模块

在工程目录中选中control,右键卸载,然后记得在文件目录中直接删除control文件夹;同时在运行调试中移出control模块。如下图:【HarmonyOS Connect设备开发-个人】1.抛除束缚,自定义设备UI-开源基础软件社区
【HarmonyOS Connect设备开发-个人】1.抛除束缚,自定义设备UI-开源基础软件社区

1.3 Entry模块pages下新建jscontrol

为方便入门,使用低代码方式新建页面,后期转为hml文件。新建页面命名为jscontrol,控制ui以及数据处理均在这个页面完成,也就是说配网完成后跳转到该页面。具体操作如下:
【HarmonyOS Connect设备开发-个人】1.抛除束缚,自定义设备UI-开源基础软件社区【HarmonyOS Connect设备开发-个人】1.抛除束缚,自定义设备UI-开源基础软件社区
在pages目录下多了一个jscontrol页面,这是我们想要的。你会得到一个HelloWorld页面。摆脱了模板提供的容器限制,空白画布交给你,接下来可以随意展示才艺。

1.4 自定义风扇UI

低代码开发UI比较简单,针对本贴,我将在页面中放一台风扇、一行Smart Fan文本、一个开关。记得把ui改为列布局。操作如下:【HarmonyOS Connect设备开发-个人】1.抛除束缚,自定义设备UI-开源基础软件社区【HarmonyOS Connect设备开发-个人】1.抛除束缚,自定义设备UI-开源基础软件社区
这是最简洁的页面组成了,开关用于控制设备侧,这个下一期具体实现。为了编写更丰富的ui,你也可以转换为hml文件(不可逆操作)。操作如下:
【HarmonyOS Connect设备开发-个人】1.抛除束缚,自定义设备UI-开源基础软件社区
转换后,你将得到jscontrol页面对应的css、hml文件。记住红圈中绑定的函数,将用于发送消息控制风扇开关。
【HarmonyOS Connect设备开发-个人】1.抛除束缚,自定义设备UI-开源基础软件社区
这里发现一个bug,低代码开发ui,switch绑定change函数后,在js中并不会响应,转换为hml文件后,发现在change关键字前没给加@符号,这应该是ui编辑器的bug。

1.5 设jscontrol为跳转目标页面

回到netconfis.js 的goToControl()函数下将原来的ability代码注释或删除,新添加一个页面路由(需要在该js文件引入:import router from ‘@system.router’),操作如下:
【HarmonyOS Connect设备开发-个人】1.抛除束缚,自定义设备UI-开源基础软件社区
如此配网完成后将跳转到我们的jscontrol页面。

小结

这一节我们将模板复杂的control模块移除、新建的control ui,不会java也不必担心碰一碰的实现。
本贴适合我这类APP开发小白;另外风扇的ui可以做得丰富些,如添加slider组件可以实现风扇不同转速等。帖子为了突出核心,力求简洁。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-5-14 19:18:13修改
3
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐