小程序-天气预报,在现实生活中是非常常用的,我们平时都可以通过自己的手机上面或网上进行查看天气等等;
鉴于有些小伙伴对云开发不熟悉,学习请移步到我的另外一篇文章 天气预报之和风天气-简易版,这个demo可以应用到自己的小程序模块上。
前期准备
- 申请自己的微信小程序,云开发环境也弄一下(用来模拟后端增删查改数据);
- 气象数据:看完了百度天气,数据太少了;最后使用的是和风天气。鉴于和风天气的文档更新了,更新一个新的案例。 需自行注册账号,获取自己的 key(重要的事情说3遍,key , key , key ,自行去申请,谢谢~);
-
版本对比:具体使用自行查阅文档哈…
- 小程序合法域名配置:(必需)
https://devapi.qweather.com
https://geoapi.qweather.com
天气来源
我用的是开发版(项目用到接口有:实况天气,7天预报,24小时内的预报,生活指数lifestyle,城市搜索find,热门城市top等等)。
授权-位置:
具体看一下微信小程序文档
数据存储:
具体看一下云开发文档
页面截图
部分代码展示
//授权用户位置-先判断
autoUserLocation() {
let that = this;
wx.getSetting({
success(res) {
if (!res.authSetting['scope.userLocation']) {
console.log('位置未授权')
wx.setStorageSync('isLocation', false);
wx.authorize({
scope: 'scope.userLocation',
success(res) {
that.getWxLocation();
},
fail(res) {
console.log('~~取消位置授权~~')
wx.setStorageSync('myLocation', '');
wx.setStorageSync('isLocation', false);
wx.showModal({
title: '定位失败',
content: '请允许”使用我的地理位置“后,再查看定位城市信息,默认为您展示广州的天气信息。',
showCancel: false,
confirmText: '好的',
success(res) {
if (res.confirm) {
if (that.isCancleCallback) {
that.isCancleCallback(true);
}
}
}
})
}
})
} else {
console.log('位置已授权')
that.getWxLocation();
}
}
})
},
//获取今日天气
getWeather(location) {
var params = {};
params.location = location;
params.key = globalData.key;
util.showLoading('加载中...')
util.requestAjax.get('https://devapi.qweather.com/v7/weather/now', params)
.then((res) => {
if (res.data.code != 200) {
return
}
const now = res.data.now;
this.setData({
weatherInfo: now,
weekday: util.formatWeek(now.obsTime)
})
util.hideLoading();
wx.stopPullDownRefresh();
}).catch((err) => {})
this.getHour(params);
this.getSeven(params);
this.getLifeStyle(params);
this.dayNight();
},
//获取我的地址
getMyCityWeater() {
let that = this;
util.showLoading('加载中...');
db.collection('cityWeather').where({
_openid: that.data.openid
}).get({
async success(res) {
var result = res.data;
if (result.length <= 0) {
util.hideLoading();
return
}
var myCityList = result[0].cityList;
await myCityList.forEach(async (item) => {
let val = await that.getWeather(item.location);
item.temp = val.temp;
item.time = util.formatHourMinute(val.obsTime);
item.isTouchMove = false;
that.setData({
myCityList: myCityList,
loading: false
})
})
util.hideLoading();
wx.stopPullDownRefresh();
},
fail(err) {
console.log(err)
}
})
},
这里的app.js…
云数据库:
云存储-图片文件夹地址如下图:
小程序二维码
- 如上配置不懂的可留言或私信哦,谢谢~
- 仅供学习参考,不作商业用途~
源码会持续更新到公众号,需要可以关注一下哦…
简易版:天气预报之和风天气案例-简易版
想学习vue可移步到:vue相关的技术
想学习小程序可移步到:小程序相关的技术