HarmonyOS Connect設備開發--拋除束縛，自定義設備UI
本帖將實現配網完成后，跳轉到自定義的ui。
一、拋除束縛，自定義設備UI
1、 了解OneHop template
第一天使用OneHop模板新建的工程中，可以看到在netconfig頁面配網完成后會攜帶session_id、product_id、product_name跳轉到control模塊，如下圖所示：
control模塊主要做兩件事：
- ①定義控制ui。
- ②處理設備消息。
ui是基于現有控件、彈窗等設計的，而非JS原始的元素;在ailife-view目錄下提供了dialog、control容器，開發者需要在src-main-rawfile目錄下進行聲明使用，如下圖：
├─control
│ └─ailife-view //該目錄無需修改
│ ├─control //控件容器
│ │ ├─display //信息展示類控件
│ │ ├─enum //枚舉類控件
│ │ ├─increasedecrease //加減器控件
│ │ ├─item //顯示子元素
│ │ ├─multifunction //多功能控件
│ │ ├─progress //進度條控件
│ │ └─reversal //開關類控件
│ ├─customdisplay //自定義展示區
│ ├─dialog //彈窗容器
│ │ ├─dialogbox
│ │ ├─enumlist //枚舉彈窗
│ │ ├─info //信息顯示彈窗
│ │ ├─picker //選擇器彈窗
│ │ └─radiolist //單選彈窗
│ ├─observed
│ └─utils
└─src
└─main
├─java //該目錄下內容可見下方類定義
├─js
│ └─default
│ ├─common //該目錄下為本地資源文件，主要都是用于顯示的圖標資源
│ │ └─FAN
│ │ ic_on.png
│ │ ic_off.png
│ │
│ └─pages
│ └─index
│ index.js //起始js
└─resources
└─rawfile
├─FAN
FAN_en.json //本地英文模板配置文件
FAN_zh.json //本地中文模板配置文件
這樣不太靈活，如果我們想使用類web范式自定義UI可以么? 當然可以，往后看。
2、 刪除control 模塊
在工程目錄中選中control，右鍵卸載，然后記得在文件目錄中直接刪除control文件夾;同時在運行調試中移出control模塊。如下圖：
3、Entry模塊pages下新建jscontrol
為方便入門，使用低代碼方式新建頁面，后期轉為hml文件。新建頁面命名為jscontrol，控制ui以及數據處理均在這個頁面完成，也就是說配網完成后跳轉到該頁面。具體操作如下：
在pages目錄下多了一個jscontrol頁面，這是我們想要的。你會得到一個HelloWorld頁面。擺脫了模板提供的容器限制，空白畫布交給你，接下來可以隨意展示才藝。
4、自定義風扇UI
低代碼開發UI比較簡單，針對本貼，我將在頁面中放一臺風扇、一行Smart Fan文本、一個開關。記得把ui改為列布局。操作如下：
這是最簡潔的頁面組成了，開關用于控制設備側，這個下一期具體實現。為了編寫更豐富的ui，你也可以轉換為hml文件(不可逆操作)。操作如下：
轉換后，你將得到jscontrol頁面對應的css、hml文件。記住紅圈中綁定的函數，將用于發送消息控制風扇開關。
這里發現一個bug，低代碼開發ui，switch綁定change函數后，在js中并不會響應，轉換為hml文件后，發現在change關鍵字前沒給加@符號，這應該是ui編輯器的bug。
5、設jscontrol為跳轉目標頁面
回到netconfis.js 的goToControl()函數下將原來的ability代碼注釋或刪除，新添加一個頁面路由(需要在該js文件引入：import router from ‘@system.router’)，操作如下：
如此配網完成后將跳轉到我們的jscontrol頁面。
小結
這一節我們將模板復雜的control模塊移除、新建的control ui，不會java也不必擔心碰一碰的實現。
本貼適合我這類APP開發小白;另外風扇的ui可以做得豐富些，如添加slider組件可以實現風扇不同轉速等。帖子為了突出核心，力求簡潔。
