# AWTK 开源串口屏开发 - 天气预报
天气预报是一个很常用的功能，在很多设备上都有这个功能。实现天气预报的功能，不能说很难但是也绝不简单，首先需要从网上获取数据，再解析数据，最后更新到界面上。
在 AWTK 串口屏中，内置了 XML/JSON/INI 等各种数据文件的模型，并支持用 HTTP/HTTPS 从网络获取数据。所以实现天气预报非常简单，不用编写一行代码即可实现天气预报的功能。而且用同样的方式，也可以实现其它功能，比如：股票行情、新闻、公交查询、火车查询、航班查询、快递查询等等。
这里以 http://t.weather.sojson.com 提供的接口为例，来实现一个显示天气信息的应用程序。这个是免费的，无需注册的 API，当然也有些限制，在实际工作中，你可以换成自己的接口。
它返回的数据是 JSON 格式的，如下所示：
{"message": "success 感谢又拍云 (upyun.com) 提供 CDN 赞助","status": 200,"date": "20240101","time": "2024-01-01 08:13:13","cityInfo": {"city": "天津市","citykey": "101030100","parent": "天津","updateTime": "08:01"},"data": {"shidu": "86%","pm25": 57.0,"pm10": 93.0,"quality": "良","wendu": "-7","ganmao": "极少数敏感人群应减少户外活动","forecast": [
。],"yesterday": {"date": "31","high": "高温 1℃","low": "低温 -3℃","ymd": "2023-12-31","week": "星期日","sunrise": "07:30","sunset": "16:57","aqi": 35,"fx": "北风","fl": "2 级","type": "晴","notice": "愿你拥有比阳光明媚的心情"}}
}
AWTK 串口屏中的 json 模型，支持用下面的语法从网络获取数据，它会自动解析 JSON 数据，并生成一个模型，通过路径可以引用模型中的数据。
json(url=http://t.weather.sojson.com/api/weather/city/101030100)
网上有很多天气预报的接口，这里只是举个例子，如果你有自己的接口，可以用自己的接口。
1. 功能
不用编写代码，实现天气预报。
2. 创建项目
从模板创建项目，将 hmi/template_app 拷贝 hmi/weather 即可。
第一个项目最好不要放到其它目录，因为放到其它目录需要修改配置文件中的路径，等熟悉之后再考虑放到其它目录。路径中也不要中文和空格，避免不必要的麻烦。
3. 制作界面
用 AWStudio 打开上面 weather 目录下的 project.json 文件。里面有一个空的窗口，做出类似下面的界面。
4. 添加绑定规则
4.1 城市
| 绑定属性 | 绑定规则 | 说明 |
|---|---|---|
| v-data:value | {cityInfo.city} | 不同的 JSON API 需要使用不同的路径，请根据具体的 JSON 数据填写 |
4.2 温度
| 绑定属性 | 绑定规则 | 说明 |
|---|---|---|
| v-data:value | {data.wendu} | 不同的 JSON API 需要使用不同的路径，请根据具体的 JSON 数据填写 |
4.3 湿度
| 绑定属性 | 绑定规则 | 说明 |
|---|---|---|
| v-data:value | {data.shidu} | 不同的 JSON API 需要使用不同的路径，请根据具体的 JSON 数据填写 |
4.4 PM2.5
| 绑定属性 | 绑定规则 | 说明 |
|---|---|---|
| v-data:value | {data.pm25} | 不同的 JSON API 需要使用不同的路径，请根据具体的 JSON 数据填写 |
4.5 空气质量
| 绑定属性 | 绑定规则 | 说明 |
|---|---|---|
| v-data:value | {data.quality} | 不同的 JSON API 需要使用不同的路径，请根据具体的 JSON 数据填写 |
4.6 感冒指数
| 绑定属性 | 绑定规则 | 说明 |
|---|---|---|
| v-data:value | {data.ganmao} | 不同的 JSON API 需要使用不同的路径，请根据具体的 JSON 数据填写 |
4.7 刷新按钮
- 将 刷新 按钮的 点击 事件绑定到 reload 命令。添加自定义的属性 v-on:click，将值设置为 {reload}。
| 绑定属性 | 绑定规则 | 说明 |
|---|---|---|
| v-on:click | {reload} | reload 命令是内置的命令，用于重新加载持久化的配置，命令要用英文大括号括起来。 |
4.8 窗口模型
- 指定窗口的模型为 json, url 为 http://t.weather.sojson.com/api/weather/city/101030100
| 绑定属性 | 绑定规则 | 说明 |
|---|---|---|
| v-model | json(url=http://t.weather.sojson.com/api/weather/city/101030100) | 不同的 JSON API 需要使用不同的 URL，可以换成自己的 URL |
5. 初始化数据
无
6. 描述需要持久化的数据
无
7. 编译运行
运行 bin 目录下的 demo 程序：
点击 刷新 按钮，可以重新加载数据，但是通常界面没有变化，因为天气数据没有变化。
8. 注意
-
本项目并没有编写界面相关的代码，AWStudio 在 src/pages 目录下生成了一些代码框架，这些代码并没有用到，可以删除也可以不用管它，但是不能加入编译。
-
完整示例请参考：demo_weather
)
