一、使用高德天氣接口：
網(wǎng)址鏈接為：

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

（一）注冊并獲取Key
使用時候需要注冊獲取Key，因?yàn)槭前⒗锲煜鹿?#xff0c;可以使用支付寶掃碼注冊。注冊后在圖中所示的頁面中點(diǎn)擊 申請Key：

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

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

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

?

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

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

//index.js //獲取應(yīng)用實(shí)例 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);}})} })

上面代碼會在頁面加載好后向網(wǎng)絡(luò)請求數(shù)據(jù)，在console中可以看到返回的信息：

?

其中返回的數(shù)據(jù)在api介紹頁面中都有介紹，默認(rèn)返回的是實(shí)況天氣，也可以在請求中將extensions選項(xiàng)設(shè)置為all，就可以得到當(dāng)天以及以后三天的天氣信息，如圖：

?在項(xiàng)目里面使用具體如圖所示：??

?實(shí)現(xiàn)過程：

? ? ? ? ? 先獲取地理位置授權(quán)，根據(jù)當(dāng)前位置的城市編碼，獲取當(dāng)前城市的天氣

代碼如下：

<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空氣優(yōu)</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 // 獲取應(yīng)用實(shí)例 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({ //先查看授權(quán)情況success:function(res){// var statu = res.authSetting;if(res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true){wx.showModal({title: '請求授權(quán)當(dāng)前位置',content: '需要獲取您的地理位置，請確認(rèn)授權(quán)',success: function (res) {if (res.cancel) {wx.showToast({title: '拒絕授權(quán)',icon: 'none',duration: 1000})} else if (res.confirm) {wx.openSetting({success: function (dataAu) {if (dataAu.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授權(quán)成功',icon: 'success',duration: 1000})//再次授權(quán)，調(diào)用wx.getLocation的APIthat.getToLocation()} else {wx.showToast({title: '授權(quán)失敗',icon: 'none',duration: 1000})}}})}}})}else{that.getToLocation()}}})}else{ //有that.setData({city:wx.getStorageSync('city')})}},// 微信獲得經(jīng)緯度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))}})},// 獲取當(dāng)前地理位置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(){}, })

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

到此結(jié)束！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。