20161011 天氣接口學(xué)習(xí)及作業(yè)總結(jié)
準(zhǔn)備工作
到 http://www.weatherdt.com/ 申請(qǐng)賬號(hào),并申請(qǐng) 免費(fèi)體驗(yàn)版(只包含 北上廣深四大站點(diǎn))
下載所有的文檔 以及圖標(biāo)包
作業(yè)
單頁(yè)多應(yīng)用完成一個(gè)天氣接口查詢
作業(yè)總結(jié)
此作業(yè)的前端樣式基本仿照了老師的布局
初始化城市數(shù)據(jù)
其實(shí)就只有北京、上海、廣州、深圳 四個(gè)城市(四條數(shù)據(jù)),查詢昌平會(huì)提示“未訂購(gòu)該站數(shù)據(jù)”
接口數(shù)據(jù)格式
{"forecast":{"24h":{"101010100":{"1001001":[{"006":"0","008":"0","007":"0","003":"17","004":"11","001":"07","005":"0","002":"07"},{"006":"0","008":"0","007":"0","003":"21","004":"12","001":"02","005":"0","002":"00"},{"006":"0","008":"0","007":"0","003":"21","004":"11","001":"00","005":"0","002":"00"}],"000":"201610150800"}}}}
| 接口內(nèi)容 | 說明 |
|---|---|
| forecast | 代表預(yù)報(bào),其實(shí)是由調(diào)用的接口的那個(gè)網(wǎng)址中規(guī)定的 |
| 24h | 代表 逐24小時(shí)預(yù)報(bào) |
| 101010100 | 城市編碼ID,可從其文檔中找到所有城市的ID表 |
| 1001001 | 數(shù)據(jù)類型編號(hào)代表預(yù)報(bào) |
| {"006":"0","008":"0",……} | 一天完整的天氣情況,根據(jù)天氣預(yù)報(bào)文檔中標(biāo)注的參數(shù)進(jìn)行解析 |
查詢核心功能
使用request模塊去獲得接口數(shù)據(jù):
request(weatherUrl, function (error, response, data) {
if (!error && response.statusCode == 200) {
var jsonResult = JSON.parse(data);
console.log(data);
var re = jsonResult['forecast']['24h'][areaID];
var content = re['1001001'];
if (content!=null && content.length == 3) {
var arr = [];
for (var i = 0; i < content.length; i++) {
//weatherDecode方法是將返回的數(shù)據(jù)進(jìn)行解析
arr.push(weatherDecode(content[i]));
}
res.json(['success', {'city': city, 'updateTime': re['000'], 'weather': arr}]);
} else {
res.json(['failed', {msg: '接口信息錯(cuò)誤'}]);
}
}
});
此處遇到一個(gè)坑,我將所有的編碼進(jìn)行解析(其中部分json的鍵解析為了中文),導(dǎo)致無法使用json的下標(biāo)(鍵)取值。
前端直接取值并解析即可
另外一個(gè)坑:天氣現(xiàn)象編碼表,網(wǎng)頁(yè)中的與文檔中的有出入。區(qū)別在于前十個(gè)數(shù)字,網(wǎng)頁(yè)中使用 0 1 2 3 這種類型表示,而文檔中使用 00 01 02 03 這種形式表示