一、使用高德天气接口:
网址链接为:
/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: '/v3/weather/weatherInfo',data:{'key': '***************************',//填入自己申请到的Key'city': '12',},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: '/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获取天气》对你有帮助,请点赞、收藏,并留下你的观点哦!