下载了最新的DevEco Studio最新版本后,我发现new project的时候有个新的设备控制模板,正好对鸿蒙的碰一碰非常感兴趣,就试着体验一下,在此我把使用经验分享一下~


新建模板

第一步, 新建工程的时候选择以下工程模板

e09f5a501e74da21e9a3eb8ddd468de3.png



第二步,新建完工程之后,看到里面有个readme文档,看完下来大概意思就是按照模板的规则可以自己重新写一个json文件来生成自己的设备页面。

9caa466719d41f594e250653b6912692.png



第三步,因为目前手上还没有鸿蒙系统的手机,我就先用了 Tools->HVD Manager 里提供的模拟器功能先跑一下。

如果是第一次申请模拟器,需要登录华为账号并且填一个申请,不过流程很快的。

目前我看模拟器提供了不少设备类型:

36f17a8de51841bf91026ac3a9961e5d.png


下面是我用P40跑出来的效果,直接run entry就能看到在模拟器上的运行效果。

49d1302294ea5066d70b108bbbc52423.png


不得不说模拟器的功能很强大,不需要在本地安装镜像,直接就能跑起来,跟真机体验基本一样。

不过可能是我的wifi网络不够好,用起来有点小卡,不过不影响运行效果。


那如果想要修改成其他设备应该如何入手呢?

根据readme的说明, SampleDeviceDataHandler.java提供了示例代码,我就试了下把SampleDeviceDataHandler 的EXAMPLE_PRODUCT_ID改成豆浆机

ea1856c3d930f463eb17fbd7d47421b3.png


然后我重新运行发现变成了豆浆机的效果:

848c13b0ec22efec387aa1bdfe276d54.png



代码解读

跟了下代码,发现这个主页面是js实现的,入口在entry/src/main/js/default/common/pages/index下

大致看了下index.hml的布局, 主要显示内容是下面这三块:

df024c09cbc538b5d01c091f5fe092d8.png



上面用到了鸿蒙js ui开发的自定义组件方法

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-js-custom-components-0000001050981389


control这个自定义组件在node_modules文件夹下, 我

6dc1b566bd4bbca32e281b40929a972f.png



然后在control.hml里面发现会根据变量controlData.lines数组里面的值来加载不同的自定义组件

f85400b26f5988df3cc6b66d7b29f7d9.png


那每个页面上面的元素又是在哪里声明呢?

根据readme文档,  台灯的页面是由entry/src/main/resources/rawfile/LAMP/LAMP.json提供的

26056996bc4d5817fcb2f30719144107.png


原来是模板工程的代码里目前提供了一些控件,都在node_modules目录下, 按照readme里面的控件配置说明,可以通过json配置不同的字段来实现不同页面。

0a0ca205307dadb87a940b9fd1aa71c2.png e614e3ee6271bd7cc757b92dd2718474.png


 15deb0a710bd0fd729b771b87942d918.png 7861db8c0024d10dda5beb0c77089343.png


上面是部分样式, 于是我试着参考台灯还有豆浆机以及readme里的配置说明,试着自己创建一个新的设备配置页面。


自定义设备页面


下面来看看我改造的一个空调的效果


3704703b87e8df0b6474f33517961a4f.gif



下面是我写的json配置文件:

25b5e951cdd15e910efb1ead822a994b.png


在对应位置添加图片资源:

3beed0dc7c37ae29f351d644f38a3a41.png


同时在SampleDeviceDataHandler.java中模拟了一个虚拟的空调设备数据:

11c15547db15aae001adf2f46b6a5d2f.png


附件为智能空调json配置文件仅供参考~


到此为止就能够实现自定义的设备控制页面了。



小结

基于IDE提供的设备控制模板,大概花了半天时间就能够自定义自己的设备控制页,使用起来还是比较方便的。

目前模板里提供了十几种控件, 能够满足不少场景了, 如果想要实现其他样式就需要自己添加UI相关代码了。

听说5月份华为官方就会推出正式的碰一碰教程, 到时候我再试试用这个空调页面跟开发板进行联调~  到时候再给各位分享开发经验


原文链接:https://developer.huawei.com/consumer/cn/forum/topic/0202551117157700300?fid=0101303901040230869

原作者:caihdl