一、使用高德天氣接口：
網址鏈接為：

https://lbs.amap.com/api/webservice/guide/api/weatherinfo

（一）注冊并獲取Key
使用時候需要注冊獲取Key，因為是阿里旗下公司，可以使用支付寶掃碼注冊。注冊后在圖中所示的頁面中點擊 申請Key：

在打開的頁面中點擊右上角的“創建新應用”，填寫應用名稱和類型，我這里隨便把應用名稱定為Weather，創建好之后點擊“添加”

可以給Key添加名字，服務平臺注意要選擇 Web服務，這個選項才能使用天氣查詢API（這里不需要再點擊它了）

提交之后就可以找到申請的Key了，這時候就可以去使用API了。

?

（二）調用API接口
頁面中介紹了接口地址和請求方式，以及請求參數，應該比較好理解。
注意，使用微信開發者工具進行開發時，需要將網址添加到request的合法域名中，如果只是調試而不發布，可以在開發者工具本地設置中勾選不校驗合法域名、web-view（業務域名）、TLS版本以及HTTPS證書，不過這樣的設置是沒法發布的，最后發布還是需要將網址添加到request的合法域名中。
根據請求參數，我們需要添加Key和city城市編碼，我們可以先測試下：

新建項目后，在index.js（或者新建一個頁面）中加入以下代碼：

//index.js //獲取應用實例 const app = getApp()Page({data: {},onLoad:function(){var self = this;wx.request({url: 'https://restapi.amap.com/v3/weather/weatherInfo',data:{'key': '***************************',//填入自己申請到的Key'city': '120102',},header:{'content-type': 'application/json'},success:function(res){console.log(res.data);}})} })

上面代碼會在頁面加載好后向網絡請求數據，在console中可以看到返回的信息：

?

其中返回的數據在api介紹頁面中都有介紹，默認返回的是實況天氣，也可以在請求中將extensions選項設置為all，就可以得到當天以及以后三天的天氣信息，如圖：

?在項目里面使用具體如圖所示：??

?實現過程：

? ? ? ? ? 先獲取地理位置授權，根據當前位置的城市編碼，獲取當前城市的天氣

代碼如下：

<view class="head"><view class="dw" ><!-- <image src="../../images/map.png" class="icon-map"></image> --><text>{{city}}</text><image src="../../images/indexdown.png" class="icon-arrow"></image></view><view class="weather"><image src="../../images/weather1.png" wx:if="{{weather=='晴'}}"></image><image src="../../images/weather2.png" wx:if="{{weather=='陰'}}"></image><image src="../../images/weather3.png" wx:if="{{weather=='雨'}}"></image><text>{{temperature}}°C空氣優</text></view><view class="search" bindtap="search"><input type="text" placeholder="搜索你所需的商品" value="" /><image src="../../images/search.png" class="icon-search"></image></view></view>

?

/* 頂部 */.head{display: flex;align-items: center;/* justify-content: space-between; */margin: 30rpx 30rpx 0;}.head .dw{max-width: 133rpx;font-size: 26rpx;height: 68rpx;line-height: 68rpx;}.head .icon-map{width: 29rpx;height: 39rpx;vertical-align: middle;margin-right: 10rpx;}.head .icon-arrow{width: 14rpx;height: 8rpx;margin-left: 10rpx;vertical-align: middle;}.head .icon-search{position: absolute;left: 35rpx;top: 24rpx;width: 24rpx;height: 24rpx;}.head .weather{display: flex;align-items: center;font-size: 24rpx;color: #999999;margin: 0 15rpx;}.head .weather image{width: 28rpx;height: 28rpx;margin-right: 8rpx;}.head .search{position: relative;margin-left: auto;}.head .search input{width: 360rpx;height: 68rpx;line-height: 68rpx;background: #F5F5F5;border-radius: 50rpx;font-size: 24rpx;color: #999;padding-left: 69rpx;box-sizing: border-box;} // index.js // 獲取應用實例 const app = getApp() var QQMapWX = require('../../utils/qqmap.js'); var qqmapsdk; Page({data: {city:'',adcode:'',weather:'',temperature:''},onLoad() {if(wx.getStorageSync('adcode')){this.setData({adcode: wx.getStorageSync('adcode')})this.getWeather();},getWeather() {var that = this;wx.request({url: 'https://restapi.amap.com/v3/weather/weatherInfo',data:{'key': '***************************',//填入自己申請到的Key'city': that.data.adcode,},header:{'content-type': 'application/json'},success:function(res){that.setData({weather: res.data.lives[0].weather,temperature: res.data.lives[0].temperature})console.log(res.data);}})},onHide: function(){},onShow(){this.getWeizhi(); },//獲取定位getWeizhi() {var that = this;qqmapsdk = new QQMapWX({key: '************************'});if(!wx.getStorageSync('city')){ //判斷緩存里面有沒有城市，沒有wx.getSetting({ //先查看授權情況success:function(res){// var statu = res.authSetting;if(res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true){wx.showModal({title: '請求授權當前位置',content: '需要獲取您的地理位置，請確認授權',success: function (res) {if (res.cancel) {wx.showToast({title: '拒絕授權',icon: 'none',duration: 1000})} else if (res.confirm) {wx.openSetting({success: function (dataAu) {if (dataAu.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授權成功',icon: 'success',duration: 1000})//再次授權，調用wx.getLocation的APIthat.getToLocation()} else {wx.showToast({title: '授權失敗',icon: 'none',duration: 1000})}}})}}})}else{that.getToLocation()}}})}else{ //有that.setData({city:wx.getStorageSync('city')})}},// 微信獲得經緯度getToLocation: function () {let _this = this;wx.getLocation({type: 'wgs84',success: function (res) {console.log(JSON.stringify(res))var latitude = res.latitudevar longitude = res.longitudevar speed = res.speedvar accuracy = res.accuracy;// _this.setData({// latitude: res.latitude,// longitude: res.longitude// })_this.getLocal(latitude, longitude)},fail: function (res) {console.log('fail' + JSON.stringify(res))}})},// 獲取當前地理位置getLocal: function (latitude, longitude) {let vm = this;qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function (res) {console.log(res.result);let city = res.result.ad_info.city;let adcode = res.result.ad_info.adcode;console.log(adcode)wx.setStorageSync('city', res.result.ad_info.city);wx.setStorageSync('adcode', res.result.ad_info.adcode);vm.setData({city: city,adcode: adcode})vm.getWeather()},fail: function (res) {console.log(res);},complete: function (res) {// console.log(res);}});},search() {wx.navigateTo({url: '/pages/search/search',})},onReady(){}, })

本文部分引用了無負今日的文章，感謝你的文章。

到此結束！

總結

以上是生活随笔為你收集整理的小程序--------调用高德地图天气api获取天气的全部內容，希望文章能夠幫你解決所遇到的問題。

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