iOS学习笔记29—天气JSON接口

想写个天气的应用，在网上找了一圈都没找到有关 JSONP 的接口，只有中国天气网的 JSON 接口，这就简单，直接用 SAE 做代理，将数据处理为 JSONP 的形式返回就行了，顺便分析了中国天气网的省市区三级联动的数据，这样就直接可以做天气应用了。

说说我的接口的用法吧，直接 get 请求，地址为 "http://demo.alphatr.com/weather/info.php"，参数有三个 。

get 参数，获取操作

可以取值 "province"，"city"，"town"，"weather"，"weathern"；分别是获取省 (直辖市) 的列表，根据省 ID 获取市的列表，根据省市的 ID 获取区县列表，根据省市区 ID 获取天气预报，根据省市区 ID 获取实时天气。

citycode 参数

就是操作中需要的 ID，获取省列表就可以不需要了

callback 参数

就是 JSONP 的 callback 啦。

具体用法看看我的 Demo 吧，demo 地址：天气接口 JSONP 示例，

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

var baseUrl = "http://demo.alphatr.com/weather/info.php";   // 将获取的省市区列表 JSON 格式转换为 HTML 字符串 var appendData = function( data , el ) { var list = []; $.each(data, function( key, val ){ // console.log(key); list.push('+ key + '">' + val + ''); }) $(el).html(list.join('')); } /* 三级联动 */ // 获取省列表 $.getJSON( baseUrl + "?get=province&callback=?" , function (data) { appendData( data , "#province" ); var provCode = $("#province").val(); // 省 ID // 根据省 ID 获取市列表 $.getJSON( baseUrl + "?get=city&citycode=" + provCode + "&callback=?" , function (data) { appendData( data , "#city" ); var cityCode = $("#city").val(); // 市 ID // 获取区 列表 $.getJSON( baseUrl + "?get=town&citycode=" + provCode + cityCode + "&callback=?" , function (data) { appendData( data , "#town" ); }) }) })   /* 相应值的改变 */ $("#province").bind( "change" , function(){ var provCode = $("#province").val(); $.getJSON( baseUrl + "?get=city&citycode=" + provCode + "&callback=?" , function (data) { appendData( data , "#city" ); var cityCode = $("#city").val(); $.getJSON( baseUrl + "?get=town&citycode=" + provCode + cityCode + "&callback=?" , function (data) { appendData( data , "#town" ); }) }) })   $("#city").bind( "change" , function(){ var provCode = $("#province").val(); var cityCode = $("#city").val(); $.getJSON( baseUrl + "?get=town&citycode=" + provCode + cityCode + "&callback=?" , function (data) { appendData( data , "#town" ); }) })   // 响应获取按钮 $("#btn").bind( "click" , function() { var code = $("#province").val(); if( $("#city").val() == "00" ) { code += $("#town").val(); code += $("#city").val(); } else { code += $("#city").val(); code += $("#town").val(); } console.log(code); // 获取天气数据 $.getJSON( baseUrl + "?get=weather&citycode=" + code + "&callback=?" , function (data) { console.log(data); var info = []; $.each( data.weatherinfo , function( key , val ) { info.push(key + ":" + val ); }) console.log(info); $("pre").html( info.join(",\n")); }) })

需要注意的是在直辖市的获取中，每次市的返回值都是 00，而地区的 ID 不是直辖市+市+区，而是直辖市+区+00，例如上海崇明的 code 是 10102 11 00，而不是 10102 00 11。

完整的代码可以直接看 Demo 的源码，Demo just is demo，肯定功能不全，其他的比如根据 IP 判断地区然后显示，将选择后的地区代码存储进 cookie 中等等都是可以加的~

下面给出天气数据的解释

先是天气预报的数据

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

city:西安, // 地区名称 city_en:xian, // 英文 (汉语拼音) 名称 date_y:2012年8月30日,// 当前日期 date:, // 网上解释是阴历年 week:星期四, // 星期 fchh:18, // 更新点时间 (18点) cityid:101110101, // 地区 ID   // 六天的温度 temp1:21℃~28℃, // 在更新点之前是今日最高温到午夜的最低温，在更新点之后是今日午夜的最低温到明日的最高温 temp2:18℃~22℃, // 以此类推 temp3:17℃~26℃, temp4:16℃~28℃, temp5:16℃~29℃, temp6:17℃~30℃, // 华氏温度 tempF1:69.8℉~82.4℉, tempF2:64.4℉~71.6℉, tempF3:62.6℉~78.8℉, tempF4:60.8℉~82.4℉, tempF5:60.8℉~84.2℉, tempF6:62.6℉~86℉, // 天气描述，同样根据更新点确定 weather1 是今天还是明天的 weather1:阴转中雨, weather2:中雨转大雨, weather3:小到中雨转多云, weather4:多云转晴, weather5:晴, weather6:晴转多云, // 12 幅图片对应六天的天气，更新点前就是今日白天，今日夜间，明日白天，明日夜间，更新点之后就是今日夜间开始的 img1:2, //阴天 img2:8, // 中雨，和一图片对应天气的阴转中雨 img3:8, // 依次类推 img4:9, img5:21, img6:1, img7:1, img8:0, img9:0, // 晴 img10:99, // 第五天是晴，没有 "转" 了，所以这幅图片是无效占位，和前一幅显示相同 img11:0, img12:1, img_single:8, // 分别对应图片的描述 img_title1:阴, img_title2:中雨, img_title3:中雨, img_title4:大雨, img_title5:小到中雨, img_title6:多云, img_title7:多云, img_title8:晴, img_title9:晴, img_title10:晴, img_title11:晴, img_title12:多云, img_title_single:中雨, // 六天的风力和风向 wind1:西风小于3级转3-4级, wind2:西风3-4级, wind3:旋转风小于3级, wind4:旋转风小于3级, wind5:旋转风小于3级, wind6:旋转风小于3级, // 今明的风向 fx1:西风, fx2:西风, // 六天的风力(和风向分开了) fl1:小于3级转3-4级, fl2:3-4级, fl3:小于3级, fl4:小于3级, fl5:小于3级, fl6:小于3级, // 生活指数，也和更新点有关系 index:热, // 一天舒适度 index_d:天气较热，建议着短裙、短裤、短套装、T恤等夏季服装。年老体弱者宜着长袖衬衫和单裤。, // 一天舒适度的描述 index48:舒适, //两天的舒适度(48小时) index48_d:建议着薄型套装或牛仔衫裤等春秋过渡装。年老体弱者宜着套装、夹克衫等。, // 描述 index_uv:弱, // 一天的紫外线指数 index48_uv:最弱, // 两天紫外线指数 index_xc:不宜, // 洗车指数 index_tr:一般, // 旅游指数 index_co:较舒适, //舒适度指数 st1:24, // 这些不知道干啥的~ st2:20, st3:17, st4:14, st5:26, st6:15, index_cl:不宜, // 晨练指数 index_ls:不宜, // 晾晒指数 index_ag:极易发 // 息斯敏过敏气象指数(我也不知道干啥的~)

实时天气的数据

1 2 3 4 5 6 7 8

city:西安, // 地区名 cityid:101110101, // 地区 ID temp1:21℃, // 今天夜间温度 temp2:28℃, // 明天白天温度 weather:阴转中雨, // 天气描述 img1:n2.gif, // 今天夜间天气图片 n 表示 night img2:d8.gif, // 明天白天天气图片 d 表示 day ptime:18:00 // 更新时间

同样的，天气和更新点是由关系的，前半天天气就是今天白天和夜间，这个实时温度更新的比较频繁~

图片的接口

刚才上面对应有图片的 ID ，现在就说说 中国天气网 的图片吧，图片接口分为两类，一类是提供给外边插件的图片，有 70×65，50×46，20×20，21×15 四种尺寸，分别用前缀 a，b，c，d 表示，其中最小的 d 类型是有背景色的，例如 "http://m.weather.com.cn/img/d0.gif" 这个图片地址 表示 d 21×15 的尺寸，0 表示是晴天(由前面的代码得)；第二类的图片是他网站上面自己用的图片，有 28×20 一种尺寸，但分白天和晚上 d 表示白天(day)，n 表示夜晚(night)，然后后面接天气的 ID，例如 "http://www.weather.com.cn/m/i/weatherpic/29x20/d1.gif" 这个图片地址表示白天的晴天，另外的地址 "http://www.weather.com.cn/m2/i/icon_weather/29x20/d01.gif" 和前面的图片是一样的，只是地址中数字是两位的，不足前面补零。

最后给出天气网他们自己的三级联动 http://www.weather.com.cn/static/custom/search3.htm