下載了最新的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