AWTK 開源串口屏開發(fā)(14) - 界面重用

AWTK串口屏支持同一個(gè)界面綁定不同的數(shù)據(jù)，本文以家居控制為例，介紹一下界面重用的方法。在家居控制應(yīng)用中，我們演示了空調(diào)和咖啡機(jī)界面?，F(xiàn)在我們來想一想，如果有多個(gè)空調(diào)怎么辦呢？當(dāng)然最直觀的方法，就是把界面再拷貝一份。但是如果界面有多份，維護(hù)是一件麻煩的事情。今天我來介紹一下界面重用的問題。

1. 功能

用同一個(gè)空調(diào)界面實(shí)現(xiàn)兩臺(tái)空調(diào)的設(shè)置。

有兩臺(tái)空調(diào)

• 客廳空調(diào)

• 臥室空調(diào)

2. 創(chuàng)建項(xiàng)目

從模板創(chuàng)建項(xiàng)目，將 hmi/template_app 拷貝 hmi/ui_reuse 即可。

第一個(gè)項(xiàng)目最好不要放到其它目錄，因?yàn)榉诺狡渌夸浶枰薷呐渲梦募械穆窂剑仁煜ぶ笤倏紤]放到其它目錄。路徑中也不要中文和空格，避免不必要的麻煩。

3. 制作界面

界面重用 demo_home2 的界面，這里不再細(xì)說。

4. 添加綁定規(guī)則

4.1 空調(diào)界面

空調(diào)界面除了空調(diào)_位置之外，其它的變量都是一樣的，所以我們只需要添加空調(diào)_位置的綁定規(guī)則即可。

4.2 主窗口

4.2.1 客廳空調(diào)

和之前的不同的是，我們加了參數(shù)prefix=living_room，表示獲取 living_room 下面的數(shù)據(jù)。

4.2.2 臥室空調(diào)

和之前的不同的是，我們加了參數(shù)prefix=bed_room，表示獲取 living_room 下面的數(shù)據(jù)。

5. 初始化數(shù)據(jù)

修改資源文件 design/default/data/default_model.json, 將其內(nèi)容改為：

{ "coffee": { "咖啡_開關(guān)": false, "咖啡_類型": 1, //類型 (0: 卡布奇諾；1: 拿鐵；2: 美式；3: 意式） "咖啡_溫度": 60, //溫度（0-100） "咖啡_口味": 1, //口味 (0: 濃郁；1: 絲滑；2: 清淡；3: 平衡；4: 溫和） "咖啡_熱奶": 1, //熱奶 (0: 少量；1: 較少；2: 較多；3: 大量） "咖啡_奶泡": 1, //奶泡 (0: 少量；1: 較少；2: 較多；3: 大量） "咖啡_水量": 150, //水量 (50-350ml) "咖啡_剩余時(shí)間": 200, //單位秒，格式化為 分鐘：秒 "咖啡_開始制作": false }, "bed_room":{ "空調(diào)_開關(guān)": false, "空調(diào)_位置":"臥室", "空調(diào)_模式": 3, //空調(diào)模式 (0: 制冷；1: 制熱；2: 送風(fēng)；3: 除濕；4: 自動(dòng) "空調(diào)_風(fēng)速": 3, //空調(diào)風(fēng)速 (0: 自動(dòng)；1: 低速；2: 中速；3: 高速） "空調(diào)_垂直風(fēng)向": 1, //垂直風(fēng)向 (0: 自動(dòng)；1：上；2：中；3：下） "空調(diào)_水平風(fēng)向": 1, //水平風(fēng)向 (0: 自動(dòng)；1：左；2：中；3：右） "空調(diào)_溫度": 25, //溫度（0-40） }, "living_room":{ "空調(diào)_開關(guān)": false, "空調(diào)_位置":"客廳", "空調(diào)_模式": 3, //空調(diào)模式 (0: 制冷；1: 制熱；2: 送風(fēng)；3: 除濕；4: 自動(dòng) "空調(diào)_風(fēng)速": 3, //空調(diào)風(fēng)速 (0: 自動(dòng)；1: 低速；2: 中速；3: 高速） "空調(diào)_垂直風(fēng)向": 1, //垂直風(fēng)向 (0: 自動(dòng)；1：上；2：中；3：下） "空調(diào)_水平風(fēng)向": 1, //水平風(fēng)向 (0: 自動(dòng)；1：左；2：中；3：右） "空調(diào)_溫度": 25, //溫度（0-40） }}

之前我們介紹的數(shù)據(jù)只有一級(jí)，現(xiàn)在我們的數(shù)據(jù)有兩級(jí)，所以我們需要加上 prefix 參數(shù)，來訪問 prefix 參數(shù)下的數(shù)據(jù)。

注意：

如果文件內(nèi)容有中文（非 ASCII 字符），一定要保存為 UTF-8 格式。

重新打包資源才能生效。

6. 數(shù)據(jù)持久化

無

7. 編譯運(yùn)行

8. 注意

本項(xiàng)目并沒有編寫界面相關(guān)的代碼，AWStudio 在 src/pages 目錄下生成了一些代碼框架，這些代碼并沒有用到，可以刪除也可以不用管它，但是不能加入編譯。

• 完整示例請(qǐng)參考：demo_home2。