一、实现效果1.

首次打开显示默认城市-广州（可自定义）的天气点击获取当前位置（首次打开），跳出弹框请求授权非首次打开（已授权）则直接显示本地的天气信息，并将当前位置存入本地缓存，下次打开小程序直接显示本地的天气信息

二、实现思路调用百度开放平台接口获取天气数据调用百度开放平台的逆地址解析接口获取当前位置调用当前的位置信息获取本地的天气信息将获取的当前位置数据存入设备中（本地缓存），下次打开小程序直接显示当前位置的天气信息三、页面布局2.

头部（top）城市天气搜索框和获取当前位置的组件中部（body）天气的显示底部（bottom）未来天气的显示

四、实施步骤3.

完整代码在文章后面提供

1.调用百度开放平台天气API4.

需要先去百度开放平台申请密钥ak //百度ak申请方法：点击此处跳转查看

2.获取天气信息并进行赋值3.请求位置授权4.位置接口的初始化工作5.

小程序的内置接口只能获取到经纬度信息，无法直接获取位置信息，需要通过调用百度地图提供的接口解析成位置信息

首先将js模块放入utils文件夹中（两个文件在文章开头有提供）或点击链接跳转下载 js模块包下载然后在index.js中引入js模块在onload()函数中新建百度地图对象5.调用百度地图位置服务接口将经纬度逆地址解析为位置信息6.

getLocation函数需要在app.json中声明permission字段

7.

最后我们就能获取到位置信息了，将获取的位置再调用天气函数即可

6.数据的本地缓存8.

存数据取数据(在onload函数中进行判断，若本地存在缓存的数据则直接进行赋值，显示当前位置的天气信息，若本地没有缓存的数据则显示默认城市广州的天气信息）

五、实现代码9.

index.js

//定义城市、天气、温度、风级、图片,日期参数vardefaultcity,getTodayweather,gettip,getweather1,getweather2,getweather3varlocalCityvarbmaprequire('../../utils/bmap-wx.min.js');//引入js模块varBMap//定义百度位置服务参数//调用百度天气接口获取天气数据//百度ak申请地址：http://lbsyun.baidu.com/apiconsole/keyvarak''//在此处填写申请到的akPage({data:{},onLoad:function(e){//将本地缓存中名为localCity的值取出来，赋值给localCitylocalCitywx.getStorageSync('localCity')if(localCity){defaultcitylocalCitythis.weather()}else{defaultcity'广州'//默认城市名称this.weather()}BMapnewbmap.BMapWX({//新建百度地图对象ak:ak});},//动态获取input输入值城市名称bindKeyInput:function(e){defaultcitye.detail.value},//搜索城市search:function(e){this.weather()},weather:function(){wx.showLoading({title:'加载中',})wx.request({url:'https://api.map.baidu.com/telematics/v3/weather?outputjsonak'+ak+'location'+defaultcity,success:res{console.log(res.data)if(!res.data.results){wx.showToast({title:'输入无法确定的地理位置信息或发生未知错误',icon:"none",duration:2500})console.log('获取天气接口失败')return}//获取当前天气getTodayweatherres.data.results[0].weather_data[0]gettipres.data.results[0].index[0].des//未来三日天气getweather1res.data.results[0].weather_data[1]getweather2res.data.results[0].weather_data[2]getweather3res.data.results[0].weather_data[3]this.setData({city:defaultcity,today:getTodayweather,tip:gettip,tomorrow1:getweather1,tomorrow2:getweather2,tomorrow3:getweather3,})wx.hideLoading()}})},//获取当前位置getMyLocation:function(){this.getUserLocation();},//请求位置授权getUserLocation:function(){letthatthis;wx.getSetting({success:(res){console.log(JSON.stringify(res))//res.authSetting['scope.userLocation']undefined表示初始化进入该页面//res.authSetting['scope.userLocation']false表示非初始化进入该页面,且未授权//res.authSetting['scope.userLocation']true表示地理位置授权if(res.authSetting['scope.userLocation']!undefinedres.authSetting['scope.userLocation']!true){wx.showModal({title:'请求授权当前位置',content:'需要获取您的地理位置，请确认授权',success:function(res){if(res.cancel){wx.showToast({title:'拒绝授权',icon:'none',duration:1000})}elseif(res.confirm){wx.openSetting({success:function(dataAu){if(dataAu.authSetting["scope.userLocation"]true){wx.showToast({title:'授权成功',icon:'success',duration:1000})//再次授权，调用wx.getLocation的APIthat.getLocation();}else{wx.showToast({title:'授权失败',icon:'none',duration:1000})}}})}}})}elseif(res.authSetting['scope.userLocation']undefined){//调用wx.getLocation的APIthat.getLocation();}else{//res.authSetting['scope.userLocation']true//调用wx.getLocation的APIthat.getLocation();}}})},//百度地图逆地址解析服务getLocation:function(){varthatthisBMap.regeocoding({success(res){//varlocationres.originalData.result.addressComponent.city//获取市varlocationres.originalData.result.addressComponent.district//获取区defaultcitylocation//将获取的位置更换默认城市的值wx.setStorage({//将获取的数据进行缓存，命名为localCity，值为location的值key:'localCity',data:location,})console.log("当前地理位置信息",defaultcity)that.weather();//调用天气函数},fail(res){console.log("调用位置信息失败",res)}});},})10.

index.wxml

viewclass"page"!--top部分--viewclass"top"viewclass"nav"inputplaceholder"输入城市名进行搜索"bindinput"bindKeyInput"bindconfirm"search"confirm-type"search"/inputviewclass"icon"icontype"search"size"25"bindtap"search"//view/viewviewbindtap"getMyLocation"获取当前位置{{locationCity}}/view/view!--body部分--viewclass"body"viewclass"city"text{{city}}/text/viewviewclass"today"text{{today.date}}/text/viewviewimagesrc"{{today.dayPictureUrl}}"mode"aspectFit"style"width:200rpx;height:200rpx;margin-top:20rpx;"//viewviewclass"body-bottom"viewclass"weather"text{{today.weather}}/text/viewviewclass"body-bottom-right"viewclass"temp"text{{today.temperature}}/text/viewviewclass"wind"text{{today.wind}}/text/view/view/view/view!--bottom部分--viewclass"bottom"viewtextTip:/textviewclass"tip"{{tip}}!--(抱歉，Tip接口数据丢失。接口修复将尽快更新哈)--/view/viewviewtext未来三日天气/textviewclass"future"viewclass"future-weather-items"view{{tomorrow1.date}}/viewviewclass"future-pic"imagesrc"{{tomorrow1.dayPictureUrl}}"mode"aspectFit"/imagesrc"{{tomorrow1.nightPictureUrl}}"mode"aspectFit"//viewview{{tomorrow1.weather}}/viewview{{tomorrow1.temperature}}/view/viewviewclass"future-weather-items"view{{tomorrow2.date}}/viewviewclass"future-pic"imagesrc"{{tomorrow2.dayPictureUrl}}"mode"aspectFit"/imagesrc"{{tomorrow2.nightPictureUrl}}"mode"aspectFit"//viewview{{tomorrow2.weather}}/viewview{{tomorrow2.temperature}}/view/viewviewclass"future-weather-items"view{{tomorrow3.date}}/viewviewclass"future-pic"imagesrc"{{tomorrow3.dayPictureUrl}}"mode"aspectFit"/imagesrc"{{tomorrow3.nightPictureUrl}}"mode"aspectFit"//viewview{{tomorrow3.weather}}/viewview{{tomorrow3.temperature}}/view/view/view/viewviewclass"notes"数据来源：百度地图开放平台/view/view!--页面最底部标示--/view11.

index.wxss

page{background:-webkit-linear-gradient(bottom,lightblue,rgb(3,171,238),lightblue);color:#fff;}.page{margin:25rpx25rpx025rpx;}/*top容器布局*/.top{display:flex;flex-direction:column;height:15vh;}.nav{display:flex;flex-direction:row;padding:20rpx;background-color:#efefef;position:relative;margin-bottom:20rpx;border-radius:10rpx;}.input{width:80%;font-size:32rpx;}.icon{width:10%;position:absolute;right:0;bottom:5rpx;}/*body容器布局*/.body{height:50vh;text-align:center;display:flex;flex-direction:column;justify-content:space-evenly;}.body-bottom{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;}.body-bottom-right{display:flex;flex-direction:column;}.city{font-size:80rpx;}.today{margin-top:25rpx;font-size:34rpx;}.weather{font-size:38rpx;}.wind{font-size:40rpx;margin-top:10rpx;}.temp{font-size:40rpx;font-weight:bold;font-family:Arial,Helvetica,sans-serif;}input{color:#333;}/*bottom容器布局*/.bottom{margin-top:25rpx;display:flex;flex-direction:column;justify-content:space-around;height:35vh;}.tip{font-size:28rpx;text-indent:50rpx;padding-bottom:40rpx;border-bottom:1rpxsolid#eee;}.future{display:flex;flex-direction:row;}.future-weather-items{width:30%;background-color:rgba(129,129,129,0.103);margin:15rpx;text-align:center;font-size:28rpx;}.future-pic{display:flex;flex-direction:row;justify-content:space-around;}.future-picimage{width:65rpx;height:65rpx;border-radius:5%;}.notes{text-align:right;font-size:18rpx;font-style:italic;}12.

app.json

{"pages":["pages/index/index","pages/logs/logs"],"permission":{"scope.userLocation":{"desc":"你的位置信息将用于小程序天气接口的效果展示"}},"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"},"style":"v2","sitemapLocation":"sitemap.json"}