AWTK 开源串口屏开发(11) - 天气预报

AWTK 串口屏内置了 XML/JSON/INI 等各种数据文件的模型，并支持用 HTTP/HTTPS 从网络获取数据。不用编写一行代码，即可实现天气预报、股票行情、航班查询和快递查询等功能。天气预报是一个很常用的功能，在很多设备上都有这个功能。实现天气预报的功能，不能说很难但是也绝不简单，首先需要从网上获取数据，再解析数据，最后更新到界面上。

在 AWTK 串口屏中，内置了 XML/JSON/INI 等各种数据文件的模型，并支持用 HTTP/HTTPS 从网络获取数据。所以实现天气预报非常简单，不用编写一行代码即可实现天气预报的功能。而且用同样的方式，也可以实现其它功能，比如：股票行情、新闻、公交查询、火车查询、航班查询、快递查询等等。

实现一个显示天气信息的应用程序。这个是免费的，无需注册的 API，当然也有些限制，在实际工作中，你可以换成自己的接口。

它返回的数据是 JSON 格式的，如下所示：

{ "message": "success 感谢又拍云 (upyun.com) 提供 CDN 赞助", "status": 200, "date": "20240101", "time": "2024-01-01 0813", "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 城市

4.2 温度

4.3湿度

4.4PM2.5

4.5空气质量

4.6感冒指数

4.7 刷新按钮

• 将刷新按钮的点击事件绑定到 reload 命令。添加自定义的属性 v-on:click，将值设置为{reload}。

4.8 窗口模型

指定窗口的模型为 json, url 为：

• http://t.weather.sojson.com/api/weather/city/101030100

5. 初始化数据

无

6. 描述需要持久化的数据

无

7. 编译运行

运行 bin 目录下的 demo 程序：

点击刷新按钮，可以重新加载数据，但是通常界面没有变化，因为天气数据没有变化。

8. 注意

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