标签：鸿蒙 自定义 模拟器 json readme IDE 模板 页面

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

新建模板

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

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

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

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

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

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

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

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

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

根据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

标签：鸿蒙,自定义,模拟器,json,readme,IDE,模板,页面
来源： https://blog.51cto.com/u_14772288/2746737

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。