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:测试
云端微课不做网络的搬运工
坚持分享实用信息资讯和原创信息技术教程