下載了最新的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月份華為官方就會推出正式的碰一碰教程，到時候我再試試用這個空調頁面跟開發板進行聯調~ 到時候再給各位分享開發經驗