本文以一個(gè)簡(jiǎn)單的溫度設(shè)置程序?yàn)槔?，介紹 AWTK 串口屏的開(kāi)發(fā)流程和 MVVM 數(shù)據(jù)綁定的基本方法。

功能

這個(gè)例子很簡(jiǎn)單，制作一個(gè)調(diào)節(jié)溫度的界面。在這里例子中，模型（也就是數(shù)據(jù)）里只有一個(gè)溫度變量：

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

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

第一個(gè)項(xiàng)目最好不要放到其它目錄，因?yàn)榉诺狡渌夸浶枰薷呐渲梦募械穆窂?，等熟悉之后再考慮放到其它目錄。路徑中也不要中文和空格，避免不必要的麻煩。

制作界面

用 AWStudio 打開(kāi)上面 hello_world 目錄下的 project.json 文件。里面有一個(gè)空的窗口，在上面加入下面的控件：

• 靜態(tài)文本
• 環(huán)形進(jìn)度條
• 滑動(dòng)條

并調(diào)節(jié)位置和大 小，做出類似下面的界面。

添加綁定規(guī)則

1. 將環(huán)形進(jìn)度條綁定到溫度變量。添加自定義的屬性v-data:value，將值設(shè)置為{溫度}，如下圖所示：

v-data:value 表示控件的值，后面會(huì)經(jīng)常用到，建議記住它。

2. 將滑動(dòng)條綁定到溫度變量。添加自定義的屬性v-data:value，將值設(shè)置為{溫度}，如下圖所示：

3. 指定窗口的模型為 default。如下圖所示：

嚴(yán)格的意義上說(shuō)，綁定規(guī)則也是一種代碼，不過(guò)相比于 C 語(yǔ)言，它有下面的優(yōu)勢(shì)：

無(wú)需編譯，直接運(yùn)行

簡(jiǎn)單，通常只有一行。

易懂，聲明式的語(yǔ)法。

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

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

{ "溫度":25}

注意：

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

重新打包資源才能生效。

編譯運(yùn)行

運(yùn)行 bin 目錄下的 demo 程序，拖動(dòng)滑動(dòng)條上的滑塊，滑動(dòng)條的數(shù)據(jù)也會(huì)跟隨改變。

使用 MCU 模擬器與之進(jìn)行交互

運(yùn)行 mcu/simulator 目錄下的 mcu_sim 程序，連接到 Localhost:2233。

拖動(dòng)滑動(dòng)條上的滑塊，會(huì)看到模擬器上收到了對(duì)應(yīng)的事件；

在模擬器中設(shè)置變量溫度的數(shù)據(jù)，HMI 端的界面也會(huì)自動(dòng)更新。

注意

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