api接口用的和風(fēng)天氣
代碼如下
//?pages/weather/weather.js
Page({
??/**
???*?頁面的初始數(shù)據(jù)
???*/
??data:?{
????apiKey:?"1f5e75b8a3f0472aaf2f618268b30b4e",
????City:?'',
????Country:'',
????locationid:"",
????latlongFlag:?false
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面加載
???*/
??onLoad(options)?{?
????this.checkAuth()
??},
??checkAuth(){
????//?將當(dāng)前頁面的?this?賦值給?vm,?以區(qū)別于下面回調(diào)函數(shù)中的?this?
????const?that?=?this
????wx.getSetting({
??????success(res)?{
????????console.log(res)
????????//?1.?scope.userLocation?為真，?代表用戶已經(jīng)授權(quán)
????????//第一次判斷的時(shí)候scope.userLocation為undefined,需要運(yùn)行一次wx.getLocation才可以設(shè)置位置允許
????????if?((typeof?(res.authSetting['scope.userLocation'])?==?"undefined")?||
??????????(res.authSetting['scope.userLocation']))?{
??????????wx.getLocation({
????????????type:?'wgs84',
????????????success(res){
??????????????that.setData({
????????????????latitude:?res.latitude,
????????????????longitude:res.longitude,
????????????????latlongFlag:?true
??????????????})
??????????????console.log(res)
??????????????console.log(that.data.longitude,that.data.latitude)
??????????????that.getCityByLoaction()
????????????}
??????????})
????????}else?{
??????????//?2.?用戶未授權(quán)的情況下，?打開授權(quán)界面，?引導(dǎo)用戶授權(quán).
??????????that.requireLocation()
????????}
??????}
????})
??},
??requireLocation(){
????const?that?=?this
????wx.showModal({
??????title:?'提示',
??????content:?'需要獲取您的位置信息，請前往設(shè)置界面開啟位置權(quán)限。',
??????success:?function?(res)?{
????????if?(res.confirm)?{
??????????//?用戶點(diǎn)擊確定按鈕，打開設(shè)置界面
??????????wx.openSetting({
????????????success:?(settingRes)?=>?{
??????????????console.log("settingRes",settingRes)
??????????????if?(settingRes.authSetting['scope.userLocation'])?{
????????????????//?用戶已經(jīng)同意授權(quán)
????????????????wx.showToast({
??????????????????title:?'授權(quán)成功',
??????????????????icon:?'success',
??????????????????duration:?2000
????????????????});
????????????????that.checkAuth()
??????????????}?else?{
????????????????//?用戶依然拒絕授權(quán)
????????????????wx.showToast({
??????????????????title:?'授權(quán)失敗',
??????????????????icon:?'none',
??????????????????duration:?2000
????????????????});
??????????????}
????????????}
??????????});
????????}?else?if?(res.cancel)?{
??????????//?用戶點(diǎn)擊取消按鈕
??????????wx.showToast({
????????????title:?'您取消了授權(quán)',
????????????icon:?'none',
????????????duration:?2000
??????????});
????????}
??????}
????});
??},
??queryWeather(){
????this.weather_now()
??},
?//通過經(jīng)緯度獲取城市的id
??getCityByLoaction()?{
??????var?that?=?this
??????wx.request({
????????url:?'https://geoapi.qweather.com/v2/city/lookup?',?
????????method:?'GET',
????????data:?{
??????????key:?this.data.apiKey,
??????????location:?that.data.longitude.toString()?+?','?+?that.data.latitude.toString()
????????},
????????success:?(res)?=>?{
??????????if(res.data.code?===?"200"){
????????????this.setData({
??????????????locationid:?res.data.location[0].id,
??????????????City:res.data.location[0].name,
??????????????Country:res.data.location[0].country
????????????})
????????????//?Fetch?weather?information?using?locationid
????????????this.getWeatherInfo(this.data.locationid);
??????????}else{
????????????console.log("fail?to?input?city")
??????????}
????????},
??????})
??},
??//通過輸入城市名獲取城市的id
??weather_now(){
????wx.request({
??????url:?'https://geoapi.qweather.com/v2/city/lookup?',?
??????method:?'GET',
??????data:?{
????????key:?this.data.apiKey,
????????location:?this.data.city
??????},
??????success:?(res)?=>?{
????????if(res.data.code?===?"200"){
??????????this.setData({
????????????locationid:?res.data.location[0].id,
????????????City:res.data.location[0].name,
????????????Country:res.data.location[0].country
??????????})
??????????//?Fetch?weather?information?using?locationid
??????????this.getWeatherInfo(this.data.locationid);
????????}else{
??????????console.log("fail?to?input?city")
????????}
??????},
????});
??},
??formatTime(date)?{
????const?year?=?date.getFullYear()
????const?month?=?date.getMonth()?+?1
????const?day?=?date.getDate()
????const?hour?=?date.getHours()
????const?minute?=?date.getMinutes()
????const?second?=?date.getSeconds()
????const?weekArray?=?["周日",?"周一",?"周二",?"周三",?"周四",?"周五",?"周六"]
????const?isToday?=?date.setHours(0,?0,?0,?0)?==?new?Date().setHours(0,?0,?0,?0)
????return?{
????????hourly:?[hour,?minute].map(this.formatNumber).join(":"),
????????daily:?[month,?day].map(this.formatNumber).join("-"),
????????dailyToString:?isToday???"今天"?:?weekArray[date.getDay()]
????}
??},
??formatNumber(n)?{
????n?=?n.toString()
????return?n[1]???n?:?'0'?+?n
??},
??//?根據(jù)空氣質(zhì)量值返回對應(yīng)的顏色類
??getAqiCategory(value)?{
????//?根據(jù)實(shí)際情況定義不同的空氣質(zhì)量范圍
????if?(value?<=?50)?{
??????return?'good';
????}?else?if?(value?<=?100)?{
??????return?'moderate';
????}?else?if?(value?<=?150)?{
??????return?'unhealthy';
????}?else?{
??????return?'severe';
????}
??},
????//?獲取天氣信息的方法
????getWeatherInfo(locationid)?{
??????const?that?=?this
??????wx.request({
????????url:?`https://devapi.qweather.com/v7/weather/now?location=${locationid}&key=${that.data.apiKey}`,
????????method:?'GET',
????????success:?(res)?=>?{
??????????if(res.data.code?===?"200"){
????????????that.setData({
??????????????now:?res.data.now
????????????})
??????????}
??????????//?Handle?the?weather?information?response
??????????console.log('Weather?Now:',?res.data);
????????},
????????fail:?(error)?=>?{
??????????//?Handle?the?request?failure
??????????console.error('Failed?to?fetch?weather?information:',?error);
????????}
??????});
??????wx.request({
????????url:?`https://devapi.qweather.com/v7/weather/24h?location=${locationid}&key=${that.data.apiKey}`,
????????method:?'GET',
????????success:?(res)?=>?{
??????????if(res.data.code?===?"200"){
????????????res.data.hourly.forEach(function(item){
????????????????item.time?=?that.formatTime(new?Date(item.fxTime)).hourly
????????????})
????????????that.setData({
??????????????hourly:?res.data.hourly
????????????})
??????????}
??????????//?Handle?the?weather?information?response
??????????console.log('Weather?24?hour:',?res.data);
????????},
????????fail:?(error)?=>?{
??????????//?Handle?the?request?failure
??????????console.error('Failed?to?fetch?weather?information:',?error);
????????}
??????});
??????wx.request({
????????url:?`https://devapi.qweather.com/v7/weather/7d?location=${locationid}&key=${that.data.apiKey}`,
????????method:?'GET',
????????success:?(res)?=>?{
??????????if(res.data.code?===?"200"){
????????????that.setData({
??????????????daily:?res.data.daily
????????????})
??????????}
??????????//?Handle?the?weather?information?response
??????????console.log('Weather?7d:',?res.data);
????????},
????????fail:?(error)?=>?{
??????????//?Handle?the?request?failure
??????????console.error('Failed?to?fetch?weather?information:',?error);
????????}
??????});
??????wx.request({
????????url:?`https://devapi.qweather.com/airquality/v1/now/${locationid}?key=${that.data.apiKey}`,
????????method:?'GET',
????????success:?(res)?=>?{
??????????console.log('Aqi?Information:',?res.data);
??????????if(res.data.code?===?"200"){
????????????that.setData({
??????????????aqiAvailable:true,
??????????????aqi:?res.data.aqi[0],
??????????????aqicolor?:?this.getAqiCategory(res.data.aqi[0].value)
????????????})
??????????}else{
????????????that.setData({
??????????????aqiAvailable:false
????????????})
??????????}
????????},
????????fail:?(error)?=>?{
??????????//?Handle?the?request?failure
??????????console.error('Failed?to?fetch?aqi?information:',?error);
????????}
??????});
????},
??//獲取輸入框的值
??getInutValue(e)?{
????console.log(e);
????this.setData({
??????city:?e.detail.value??//獲取頁面input輸入框輸入的值，并傳給city
????})
????console.log(this.data.city);
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
???*/
??onReady()?{
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面顯示
???*/
??onShow()?{
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面隱藏
???*/
??onHide()?{
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面卸載
???*/
??onUnload()?{
??},
??/**
???*?頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
???*/
??onPullDownRefresh()?{
??},
??/**
???*?頁面上拉觸底事件的處理函數(shù)
???*/
??onReachBottom()?{
??},
??/**
???*?用戶點(diǎn)擊右上角分享
???*/
??onShareAppMessage()?{
??}
??文章來源：http://www.zghlxwxcb.cn/news/detail-825373.html
})文章來源地址http://www.zghlxwxcb.cn/news/detail-825373.html
到了這里，關(guān)于微信小程序天氣預(yù)報(bào)實(shí)戰(zhàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
