利用AppInventor读取天气预报接口（完整版）

     Step1：界面设计

      如图所示，界面中有三个水平布局，第一个水平布局的city为文本输入框，提示信息为：请输入城市的拼音（之所以提示输入拼音，是百度接口规定的要求），query和clear都是按钮；第二个布局中有两个标签，headinfo用来显示提示信息，info用来显示返回的基本信息；第三个布局中同样也包含了两个标签，headweather用来显示提示信息，weather用来显示天气预报信息。非可视组件添加一个web客户端，用来访问天气预报API接口。

Step2：逻辑设计

1、初始化全局变量

globalList用来存放从接口返回的JSON数据，newList用来存放处理过后的数据    

2、定义解析JSON数据的Procedure（将多级列表扁平化为二级列表）

    3、设置Web组件的请求头和访问网址

4、处理网页返回的数据

     infoLlist和weatherList都为局部变量，分别用来存取城市信息数据和天气预报数据，globalList用来存放客户端返回的JSON数据，接下来调用解析JSON数据的过程，将globalList作为参数传过去。调用完这个过程，扁平化的二级列表已经存至newList这个变量中，因此，我们可以很容易地通过关键字“basic”在newList中查找城市信息，通过关键字“now”查找实时天气信息。

    最后在infoList和weatherList中通过相应的关键字取出城市名称，国家名称以及天气情况。（由于天气预报数据较复杂，没有全部读完，云朵们可以根据实际情况来选择自己需要的信息将其显示出来）

5、 设置“清空”按钮代码

    当点击按钮“清空”，则把当前列表和显示信息清空，目的是为了避免上一次访问数据的滞留对本次访问造成影响。

Step3:测试

云端微课不做网络的搬运工

坚持分享实用信息资讯和原创信息技术教程