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('<option value="' + key + '">' + val + '</option>');
})
$(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