1.抛除束縛，自定義裝置UI
(目錄)
本帖将實作配網完成後，跳轉到自定義的ui。
1.抛除束縛，自定義裝置UI
1.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可以麼？ 當然可以，往後看。
1.2 删除control 子產品
在工程目錄中選中control，右鍵解除安裝，然後記得在檔案目錄中直接删除control檔案夾；同時在運作調試中移出control子產品。如下圖：
1.3 Entry子產品pages下建立jscontrol
為友善入門，使用低代碼方式建立頁面，後期轉為hml檔案。建立頁面命名為jscontrol，控制ui以及資料處理均在這個頁面完成，也就是說配網完成後跳轉到該頁面。具體操作如下：
在pages目錄下多了一個jscontrol頁面，這是我們想要的。你會得到一個HelloWorld頁面。擺脫了模闆提供的容器限制，空白畫布交給你，接下來可以随意展示才藝。
1.4 自定義風扇UI
低代碼開發UI比較簡單，針對本貼，我将在頁面中放一台風扇、一行Smart Fan文本、一個開關。記得把ui改為列布局。操作如下：
這是最簡潔的頁面組成了，開關用于控制裝置側，這個下一期具體實作。為了編寫更豐富的ui，你也可以轉換為hml檔案（不可逆操作）。操作如下：
轉換後，你将得到jscontrol頁面對應的css、hml檔案。記住紅圈中綁定的函數，将用于發送消息控制風扇開關。
這裡發現一個bug，低代碼開發ui，switch綁定change函數後，在js中并不會響應，轉換為hml檔案後，發現在change關鍵字前沒給加@符号，這應該是ui編輯器的bug。
1.5 設jscontrol為跳轉目标頁面
回到netconfis.js 的goToControl()函數下将原來的ability代碼注釋或删除，新添加一個頁面路由（需要在該js檔案引入：import router from '@system.router'），操作如下：
如此配網完成後将跳轉到我們的jscontrol頁面。
小結
這一節我們将模闆複雜的control子產品移除、建立的control ui，不會java也不必擔心碰一碰的實作。
本貼适合我這類APP開發小白；另外風扇的ui可以做得豐富些，如添加slider元件可以實作風扇不同轉速等。文章為了突出核心，力求簡潔。