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