码迷,mamicode.com
首页 > 移动开发 > 详细

利用AppInventor读取天气预报接口(完整版)

时间:2016-04-26 21:37:50      阅读:1492      评论:0      收藏:0      [点我收藏+]

标签:

     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:测试

技术分享



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

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

技术分享


利用AppInventor读取天气预报接口(完整版)

标签:

原文地址:http://blog.csdn.net/linzi0/article/details/51233532

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!