現在的屏幕其實并不需要屏幕保護程序來“保護”，不過屏幕保護程序會衍生一些其它用途。比如，保護隱私、數據安全和顯示廣告等等。本文介紹一下在 AWTK 串口屏中，實現屏幕保護程序的方法。

現代屏幕其實并不需要屏幕保護，不過屏幕保護程序會衍生一些其它用途。比如：

保護隱私。長時間不操作，通過動畫或者其它方式隱藏屏幕內容。

數據安全。長時間不操作，需要輸入密碼才能恢復。

美觀/廣告。長時間不操作，顯示動畫或者播放視頻廣告。

本文介紹一下在 AWTK 串口屏中，是如何實現屏幕保護的。基本工作原理是這樣的：

長時間沒有用戶輸入事件，觸發屏幕保護事件。

在屏幕保護事件中，打開名為 screen_saver 的窗口。

screen_saver 窗口中，顯示屏保內容，如果收到輸入事件，關閉該窗口(或要求輸入密碼)。

1. 功能

在這里例子中，模型（也就是數據）里只有一個screen_saver_time變量：

screen_saver_time 是默認模型中一個內置屬性。

2. 創建項目

從模板創建項目，將 hmi/template_app 拷貝 hmi/screen_saver 即可。

第一個項目最好不要放到其它目錄，因為放到其它目錄需要修改配置文件中的路徑，等熟悉之后再考慮放到其它目錄。路徑中也不要中文和空格，避免不必要的麻煩。

3. 制作界面

3.1 主窗口

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

靜態文本

編輯器

做出類似下面的界面。

3.2 屏保窗口

在這個窗口中，我們通過一個定時器來改變窗口的背景顏色，創建一個空白窗口，將其改名為 screen_saver 即可。

4. 添加綁定規則

4.1 主窗口

將編輯器綁定到screen_saver_time變量。添加自定義的屬性v-data:value，將值設置為{screen_saver_time}。

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

4.2 屏保窗口

在啟動按鈕的點擊事件啟動定時器。

這里只是用了一個窗口內局部的變量“計數”，不需要指定模型，系統會自動創建一個 dummy 模型。

4. 初始化數據

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

{ "screen_saver_time": 180000}

注意：

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

重新打包資源才能生效。

5. 數據持久化

為了保存屏保時間，修改資源文件 design/default/data/settings.json, 將其內容改為：

{ "name":"hmi_screen_saver", "persistent" : { "screen_saver_time": true }}

6. 編譯運行

運行 bin 目錄下的 demo 程序，設置屏幕時間為一個較短的值，等待屏保啟動。

7. 注意

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