技術(shù)分享 | AWTK 開源串口屏開發(fā)(6) - 定時(shí)器的用法

定時(shí)器是個(gè)常用的功能，AWTK 串口屏提供了豐富的定時(shí)器函數(shù)，用于定時(shí)器的啟動(dòng)、停止、暫停、恢復(fù)、修改和重置等功能，本文以計(jì)時(shí)器的例子來介紹定時(shí)器的基本用法。

定時(shí)器也是一個(gè)常用的功能，在 AWTK 串口屏中，可以給每個(gè)控件（包括窗口）創(chuàng)建一個(gè)定時(shí)器，定時(shí)器到點(diǎn)后觸發(fā) v-on:timer 事件。在 AWTK 串口屏中，提供了 6 個(gè)定時(shí)器相關(guān)函數(shù)：

start_timer?啟動(dòng)定時(shí)器。stop_timer?停止定時(shí)器。suspend_timer?暫停定時(shí)器。resume_timer?恢復(fù)暫停的定時(shí)器。reset_timer?重置定時(shí)器。modify_timer?修改定時(shí)器的時(shí)間。

這些函數(shù)第一個(gè)參數(shù)為控件的名字，如果不指定，則默認(rèn)為當(dāng)前控件。

1. 功能

本文以計(jì)時(shí)器的例子來介紹定時(shí)器的使用方法。在這里例子中，模型（也就是數(shù)據(jù)）里只有一個(gè)計(jì)時(shí)變量：

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

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

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

3. 制作界面

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

靜態(tài)文本

4 個(gè)按鈕

做出類似下面的界面。

定時(shí)器設(shè)置在靜態(tài)文本上，所以必須給它取一個(gè)在當(dāng)前窗口內(nèi)唯一的名稱，這里就叫 “tick”。

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

將?靜態(tài)文本?綁定到?計(jì)時(shí)?變量。添加自定義的屬性?v-data:value，將值設(shè)置為?{計(jì)時(shí)}。

在?啟動(dòng)?按鈕的?點(diǎn)擊?事件啟動(dòng)定時(shí)器。

在?暫停?按鈕的?點(diǎn)擊?事件暫停定時(shí)器。

在?恢復(fù)?按鈕的?點(diǎn)擊?事件恢復(fù)定時(shí)器。

在?停止?按鈕的?點(diǎn)擊?事件停止定時(shí)器。

同樣指定窗口的模型為 default。

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

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

{ ?"計(jì)時(shí)":0}

注意：如果文件內(nèi)容有中文（非 ASCII 字符），一定要保存為 UTF-8 格式。重新打包資源才能生效。

6. 編譯運(yùn)行

運(yùn)行 bin 目錄下的 demo 程序，啟動(dòng)定時(shí)器后，計(jì)時(shí)自動(dòng)增加。

7. 注意

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