AWTK 开源串口屏开发(14) - 界面重用

在家居控制应用中，我们演示了空调和咖啡机界面。现在我们来想一想，如果有多个空调怎么办呢？当然最直观的方法，就是把界面再拷贝一份。但是如果界面有多份，维护是一件麻烦的事情。今天我来介绍一下界面重用的问题。

1. 功能

用同一个空调界面实现两台空调的设置。

• 有两台空调

• 客厅空调

• 卧室空调

2. 创建项目

从模板创建项目，将 hmi/template_app 拷贝 hmi/ui_reuse 即可。

第一个项目最好不要放到其它目录，因为放到其它目录需要修改配置文件中的路径，等熟悉之后再考虑放到其它目录。路径中也不要中文和空格，避免不必要的麻烦。

3. 制作界面

界面重用 demo_home2 的界面，这里不再细说。

4. 添加绑定规则

4.1 空调界面

空调界面除了 空调_位置 之外，其它的变量都是一样的，所以我们只需要添加 空调_位置 的绑定规则即可。

绑定属性	绑定规则	说明
v-data:value	{空调_位置}	无

4.2 主窗口

4.2.1 客厅空调

绑定属性	绑定规则	说明
v-on:click	{navigate, Args=air_win?prefix=living_room}	变量要用英文大括号括起来。

和之前的不同的是，我们加了参数 prefix=living_room，表示获取 living_room 下面的数据。

4.2.2 卧室空调

绑定属性	绑定规则	说明
v-on:click	{navigate, Args=air_win?prefix=bed_room}	变量要用英文大括号括起来。

和之前的不同的是，我们加了参数 prefix=bed_room，表示获取 bed_room 下面的数据。

4. 初始化数据

修改资源文件 design/default/data/default_model.json, 将其内容改为：

{
  "coffee": {
    "咖啡_开关": 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)
    "咖啡_剩余时间": 200, //单位秒，格式化为 分钟：秒
    "咖啡_开始制作": false
  },  
  "bed_room":{
    "空调_开关": false,
    "空调_位置":"卧室",
    "空调_模式": 3, //空调模式 (0: 制冷；1: 制热；2: 送风；3: 除湿；4: 自动
    "空调_风速": 3, //空调风速 (0: 自动；1: 低速；2: 中速；3: 高速）
    "空调_垂直风向": 1, //垂直风向 (0: 自动；1：上；2：中；3：下）
    "空调_水平风向": 1, //水平风向 (0: 自动；1：左；2：中；3：右）
    "空调_温度": 25, //温度（0-40）
  },  
  "living_room":{
    "空调_开关": false,
    "空调_位置":"客厅",
    "空调_模式": 3, //空调模式 (0: 制冷；1: 制热；2: 送风；3: 除湿；4: 自动
    "空调_风速": 3, //空调风速 (0: 自动；1: 低速；2: 中速；3: 高速）
    "空调_垂直风向": 1, //垂直风向 (0: 自动；1：上；2：中；3：下）
    "空调_水平风向": 1, //水平风向 (0: 自动；1：左；2：中；3：右）
    "空调_温度": 25, //温度（0-40）
  }
}

之前我们介绍的数据只有一级，现在我们的数据有两级，所以我们需要加上 prefix 参数，来访问 prefix 参数下的数据。

注意：

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

• 重新打包资源才能生效。

5. 数据持久化

无

6. 编译运行

7. 注意

• 本项目并没有编写界面相关的代码，AWStudio 在 src/pages 目录下生成了一些代码框架，这些代码并没有用到，可以删除也可以不用管它，但是不能加入编译。

• 完整示例请参考：demo_home2