一 前言

很多人問接入天氣預報接口如何實現，很多天氣接口沒有提供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

掃描二維碼，看高清教學視頻。

總結

以上是生活随笔為你收集整理的wex5教程 js接入阿里天气api接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。