下载了最新的DevEco Studio最新版本后，我发现new project的时候有个新的设备控制模板，正好对鸿蒙的碰一碰很是感兴趣，就试着体验一下，在此我把使用经验分享一下~java
新建模板
第一步， 新建工程的时候选择如下工程模板node
第二步，新建完工程以后，看到里面有个readme文档，看完下来大概意思就是按照模板的规则能够本身从新写一个json文件来生成本身的设备页面。json
第三步，由于目前手上尚未鸿蒙系统的手机，我就先用了 Tools->HVD Manager 里提供的模拟器功能先跑一下。数组
若是是第一次申请模拟器，须要登陆华为帐号而且填一个申请，不过流程很快的。网络
目前我看模拟器提供了很多设备类型：ide
下面是我用P40跑出来的效果，直接run entry就能看到在模拟器上的运行效果。布局
不得不说模拟器的功能很强大，不须要在本地安装镜像，直接就能跑起来，跟真机体验基本同样。ui
不过多是个人wifi网络不够好，用起来有点小卡，不过不影响运行效果。url
那若是想要修改为其余设备应该如何入手呢？spa
根据readme的说明， SampleDeviceDataHandler.java提供了示例代码，我就试了下把SampleDeviceDataHandler 的EXAMPLE_PRODUCT_ID改为豆浆机
而后我从新运行发现变成了豆浆机的效果：
代码解读
跟了下代码，发现这个主页面是js实现的，入口在entry/src/main/js/default/common/pages/index下
大体看了下index.hml的布局， 主要显示内容是下面这三块：
上面用到了鸿蒙js ui开发的自定义组件方法
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-js-custom-components-0000001050981389
control这个自定义组件在node_modules文件夹下， 我
而后在control.hml里面发现会根据变量controlData.lines数组里面的值来加载不一样的自定义组件
那每一个页面上面的元素又是在哪里声明呢？
根据readme文档, 台灯的页面是由entry/src/main/resources/rawfile/LAMP/LAMP.json提供的
原来是模板工程的代码里目前提供了一些控件，都在node_modules目录下， 按照readme里面的控件配置说明，能够经过json配置不一样的字段来实现不一样页面。
上面是部分样式， 因而我试着参考台灯还有豆浆机以及readme里的配置说明，试着本身建立一个新的设备配置页面。
自定义设备页面
下面来看看我改造的一个空调的效果
下面是我写的json配置文件：
在对应位置添加图片资源：
同时在SampleDeviceDataHandler.java中模拟了一个虚拟的空调设备数据：
附件为智能空调json配置文件仅供参考~
到此为止就可以实现自定义的设备控制页面了。
小结
基于IDE提供的设备控制模板，大概花了半天时间就可以自定义本身的设备控制页，使用起来仍是比较方便的。
目前模板里提供了十几种控件， 可以知足很多场景了， 若是想要实现其余样式就须要本身添加UI相关代码了。
据说5月份华为官方就会推出正式的碰一碰教程， 到时候我再试试用这个空调页面跟开发板进行联调~ 到时候再给各位分享开发经验
原文连接：https://developer.huawei.com/consumer/cn/forum/topic/0202551117157700300?fid=0101303901040230869
原做者：caihdl