App Inventor 2 天气预报App开发 - 第三方API接入的通用方法(2)

本文来自AppInventor2中文网（www.fun123.cn）参考文档，调用第三方天气接口获取天气JSON数据，解析并展示在App上。

App效果图，展示未来7日的天气预报，包括日期、天气图示和温度：

App原理介绍

通过调用第三方天气api，填入必要的参数，通过Web客户端请求url。返回json格式的数据结果，使用AppInventor2解析json结果，显示到App上即可。

第三方天气API介绍

第三方天气的api平台特别多，这里仅以“和风天气”（dev.qweather.com）作为演示，其他平台的使用方法都是几乎一样的。

平台的注册及登录步骤请自行完成，登录后需要创建一个项目以获得API调用时必要的用户认证key。

创建一个项目

填写必要的参数

查看已创建的项目

这时，我们就能得到了用户认证key，后续步骤会用到这个关键的数据。

查看API文档，确定我们需要准备的数据

通过文档可知，我们需要在url中替换填入自己的key。

请求示例：北京7天预报

curl -L -X GET --compressed 'https://api.qweather.com/v7/weather/7d?location=101010100&key=YOUR_KEY'

第三方API的调用

使用”Web客户端“组件调用第三方API，代码如下：

JSON结果的解析

请求成功返回JSON示例

{"code": "200","updateTime": "2021-11-15T16:35+08:00","fxLink": "http://hfx.link/2ax1","daily": [{"fxDate": "2021-11-15","sunrise": "06:58","sunset": "16:59","moonrise": "15:16","moonset": "03:40","moonPhase": "盈凸月","moonPhaseIcon": "803","tempMax": "12","tempMin": "-1","iconDay": "101","textDay": "多云","iconNight": "150","textNight": "晴","wind360Day": "45","windDirDay": "东北风","windScaleDay": "1-2","windSpeedDay": "3","wind360Night": "0","windDirNight": "北风","windScaleNight": "1-2","windSpeedNight": "3","humidity": "65","precip": "0.0","pressure": "1020","vis": "25","cloud": "4","uvIndex": "3"},{"fxDate": "2021-11-16","sunrise": "07:00","sunset": "16:58","moonrise": "15:38","moonset": "04:40","moonPhase": "盈凸月","moonPhaseIcon": "803","tempMax": "13","tempMin": "0","iconDay": "100","textDay": "晴","iconNight": "101","textNight": "多云","wind360Day": "225","windDirDay": "西南风","windScaleDay": "1-2","windSpeedDay": "3","wind360Night": "225","windDirNight": "西南风","windScaleNight": "1-2","windSpeedNight": "3","humidity": "74","precip": "0.0","pressure": "1016","vis": "25","cloud": "1","uvIndex": "3"},{"fxDate": "2021-11-17","sunrise": "07:01","sunset": "16:57","moonrise": "16:01","moonset": "05:41","moonPhase": "盈凸月","moonPhaseIcon": "803","tempMax": "13","tempMin": "0","iconDay": "100","textDay": "晴","iconNight": "150","textNight": "晴","wind360Day": "225","windDirDay": "西南风","windScaleDay": "1-2","windSpeedDay": "3","wind360Night": "225","windDirNight": "西南风","windScaleNight": "1-2","windSpeedNight": "3","humidity": "56","precip": "0.0","pressure": "1009","vis": "25","cloud": "0","uvIndex": "3"}],"refer": {"sources": ["QWeather","NMC","ECMWF"],"license": ["QWeather Developers License"]}
}