一 前言
很多人問接入天氣預報接口如何實現，很多天氣接口沒有提供js示例。今天以阿里雲天氣為例，對接口進行解讀后，改裝到js中實現數據接入。先看一下效果：
點擊更新按鈕，天氣和圖片顯示到頁面，數據調用成功。
二 阿里雲天氣接口注冊與解讀
1 購買阿里雲天氣免費版,可以用淘寶帳號購買，1000次調用次數和未來3天數據查詢，對於測試完全可以滿足。
2 得到appkey
3 阿里雲api分析：
示例為根據id或地各查詢7天天氣。請求方式為GET,返回類型為json.身份認證為appcode.
請求參數均為可選。但是id和地名必選其一。
請求示例，語言為c,java,c#,php,python,objectc.沒有js示例。
返回請求成功后的json樹型數據。主要鍵為
showapi_res_body.now 今天
showapi_res_body.f1. 明天
showapi_res_body.f2. 后天
showapi_res_body.f3. 大后天
具體值取鍵即可。比如：
showapi_res_body.now.weather 今天天氣
showapi_res_body.f1.dat_weather 明天天天氣 （免費版只能查到后三天，f4,f5,f6數據不會返回，會提示鍵未定義。 ）
三 js方法改裝與接入。
1界面上放一個更新按鈕和圖片，分別自定義id(ajax方法中只能用js方法得到組件)
2 ajax提交，並顯示。
beforeSend在提交時重新定義head頭文，格式為
request.setRequestHeader("Authorization", "APPCODE " + "d22edbf4c7f2447f9598a7377b33b3f5");
注意appcode后有空格，不能去掉。此處參照java api修改而來。
3.ajax與wex5組件的通用性
寫到這里就會產生疑問，ajax的回調里能不能直接寫wex5組件方法呢？？
在界面上放一個lableoutput,在ajax的success回調里寫上wex5的方法。
測試成功！也就是說，ajax方法在頁面中是全局的，只是一種異步請求的js寫法，不是單純的js方法。
4 谷哥開發工具查看：
xhr請求信息查看
返回json查看
至此，js接入阿里天氣成功。
四 總結
1 解讀api,分析url，參數，頭部要求，返回類型，用ajax進行改裝拼接。
2 運用谷歌開發工具，測試網絡狀態與數據。
3 ajax屬於源生js寫法，回調中可以直接采用wex5的組件與方法。
相關視頻制作完成，上傳優酷。教學app制作中。我是邯鄲戲曲開發，tel：15175073123,qq:1017945251
掃描二維碼，看高清教學視頻。