??想了解更多關(guān)于開源的內(nèi)容，請訪問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

本帖將實現(xiàn)配網(wǎng)完成后，跳轉(zhuǎn)到自定義的ui。

一、拋除束縛，自定義設(shè)備UI

1、 了解OneHop template

第一天使用OneHop模板新建的工程中，可以看到在netconfig頁面配網(wǎng)完成后會攜帶session_id、product_id、product_name跳轉(zhuǎn)到control模塊，如下圖所示：

control模塊主要做兩件事：

• ①定義控制ui。
• ②處理設(shè)備消息。

ui是基于現(xiàn)有控件、彈窗等設(shè)計的，而非JS原始的元素;在ailife-view目錄下提供了dialog、control容器，開發(fā)者需要在src-main-rawfile目錄下進(jìn)行聲明使用，如下圖：

├─control
│  └─ailife-view //該目錄無需修改
│      ├─control //控件容器
│      │  ├─display //信息展示類控件
│      │  ├─enum //枚舉類控件
│      │  ├─increasedecrease //加減器控件
│      │  ├─item //顯示子元素
│      │  ├─multifunction //多功能控件
│      │  ├─progress //進(jìn)度條控件
│      │  └─reversal //開關(guān)類控件
│      ├─customdisplay //自定義展示區(qū)
│      ├─dialog //彈窗容器
│      │  ├─dialogbox
│      │  ├─enumlist //枚舉彈窗
│      │  ├─info //信息顯示彈窗
│      │  ├─picker //選擇器彈窗
│      │  └─radiolist //單選彈窗
│      ├─observed
│      └─utils
└─src
    └─main
        ├─java //該目錄下內(nèi)容可見下方類定義
        ├─js
        │  └─default
        │      ├─common //該目錄下為本地資源文件，主要都是用于顯示的圖標(biāo)資源
        │      │  └─FAN
        │      │          ic_on.png
        │      │          ic_off.png
        │      │          ...
        │      └─pages
        │          └─index
        │                  index.js //起始js
        └─resources
            └─rawfile
                ├─FAN
                        FAN_en.json //本地英文模板配置文件
                        FAN_zh.json //本地中文模板配置文件

這樣不太靈活，如果我們想使用類web范式自定義UI可以么? 當(dāng)然可以，往后看。

2、 刪除control 模塊

在工程目錄中選中control，右鍵卸載，然后記得在文件目錄中直接刪除control文件夾;同時在運行調(diào)試中移出control模塊。如下圖：

3、Entry模塊pages下新建jscontrol

為方便入門，使用低代碼方式新建頁面，后期轉(zhuǎn)為hml文件。新建頁面命名為jscontrol，控制ui以及數(shù)據(jù)處理均在這個頁面完成，也就是說配網(wǎng)完成后跳轉(zhuǎn)到該頁面。具體操作如下：

在pages目錄下多了一個jscontrol頁面，這是我們想要的。你會得到一個HelloWorld頁面。擺脫了模板提供的容器限制，空白畫布交給你，接下來可以隨意展示才藝。

4、自定義風(fēng)扇UI

低代碼開發(fā)UI比較簡單，針對本貼，我將在頁面中放一臺風(fēng)扇、一行Smart Fan文本、一個開關(guān)。記得把ui改為列布局。操作如下：

這是最簡潔的頁面組成了，開關(guān)用于控制設(shè)備側(cè)，這個下一期具體實現(xiàn)。為了編寫更豐富的ui，你也可以轉(zhuǎn)換為hml文件(不可逆操作)。操作如下：

轉(zhuǎn)換后，你將得到j(luò)scontrol頁面對應(yīng)的css、hml文件。記住紅圈中綁定的函數(shù)，將用于發(fā)送消息控制風(fēng)扇開關(guān)。

這里發(fā)現(xiàn)一個bug，低代碼開發(fā)ui，switch綁定change函數(shù)后，在js中并不會響應(yīng)，轉(zhuǎn)換為hml文件后，發(fā)現(xiàn)在change關(guān)鍵字前沒給加@符號，這應(yīng)該是ui編輯器的bug。

5、設(shè)jscontrol為跳轉(zhuǎn)目標(biāo)頁面

回到netconfis.js 的goToControl()函數(shù)下將原來的ability代碼注釋或刪除，新添加一個頁面路由(需要在該js文件引入：import router from ‘@system.router’)，操作如下：

如此配網(wǎng)完成后將跳轉(zhuǎn)到我們的jscontrol頁面。

小結(jié)

這一節(jié)我們將模板復(fù)雜的control模塊移除、新建的control ui，不會java也不必?fù)?dān)心碰一碰的實現(xiàn)。

本貼適合我這類APP開發(fā)小白;另外風(fēng)扇的ui可以做得豐富些，如添加slider組件可以實現(xiàn)風(fēng)扇不同轉(zhuǎn)速等。帖子為了突出核心，力求簡潔。

??想了解更多關(guān)于開源的內(nèi)容，請訪問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??。