欢迎光临
我们一直在努力

微信小程序-小程序天气页面对接和风天气API实例 教程笔记

截图预览

一、前言展示

最近开发小程序发现需要植入一个天气系统,在网上找了好久实例,发现很多都是不太好看的,或者发不出来的也用不了,最后我只能自己动手写出来的一个页面,现在分享出来给大家,希望能给到你们帮助!

 二、前期准备

  • 自己申请微信小程序
  • 需要的接口:
    天气接口:和风天气API接口
    位置信息:腾讯地图接口
    注意:接口需要大家自行去申请,不懂百度都有,这里我就不细说了!
  • 小程序配置合法域名
    https://apis.map.qq.com
    https://devapi.qweather.com

 三、部分代码展示

引入腾讯地图js文件

var QQMapWX = require('../../utils/qqmap/qqmap-wx-jssdk.js');

js页面初始数据

data:{
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
showday: [],
}

 

获取位置授权信息

/* 获取用户位置授权信息 */
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.handleLoacation();
},
fail(res) {
console.log('~~取消位置授权~~')
wx.setStorageSync('isLocation', false);
wx.showModal({
title: '定位失败',
content: '请允许“使用我的地理位置”后,再查看定位城市信息,否则无法获取到你的当前位置!',
success(res) {
if (res.cancel) {
that.setData({
OpenWeather: false,
showerror: "block"
})
wx.showToast({
title: '您已拒绝授权',
icon: 'error',
duration: 2000
})
} else if (res.confirm) {
wx.openSetting({
success: dataAu => {
if (dataAu.authSetting['scope.userLocation'] === true) {
that.setData({
OpenWeather: true
})
wx.showToast({
title: '授权成功',
icon: 'success',
duration: 2000
})
that.handleLoacation();
} else {
that.setData({
OpenWeather: false,
showerror: "block"
})
wx.showToast({
title: '授权失败',
icon: 'error',
duration: 2000
})
}
}
})
}
}
})
}
})
} else {
that.setData({
OpenWeather: true
})
console.log('位置已授权')
that.handleLoacation();
}
}
})
},

 

获取当前经纬度

// 获取当前位置经纬度
handleLoacation() {
let that = this;
wx.getLocation({
type: 'gcj02',
success(res) {
that.setData({
latitude: res.latitude,
longitude: res.longitude,
}),
that.getRealTimeWeahter(res.latitude, res.longitude);
that.getWeahterIndices(res.latitude, res.longitude);
that.getWeahterPrediction(res.latitude, res.longitude);
},
fail: err => {
wx.showModal({
title: '获取地理位置失败',
content: '请在系统设置中打开定位服务,重新进入小程序!'
})
}
})
},

 

获取实时天气

//实时天气
getRealTimeWeahter: function (latitude, longitude) {
var that = this
var url = "https://devapi.qweather.com/v7/weather/now"
var params = {
location: longitude + "," + latitude,
key: "和风天气接口KEY",
}
wx.request({
url: url,
data: params,
success(res) {
var str = res.data.now.obsTime;
var s = str.indexOf('T');
var i = str.substring(s + 1);
var y = i.indexOf('+');
var date = str.substring(0, s);
var time = i.substring(0, y);
that.setData({
now: res.data.now,
obsTime: date + ' ' + time,
})
app.globalData.isNow = res.data.now;
console.log(that.data.now)
},
fail(res) { },
complete(res) { },
})
},

获取未来天气

//未来天气预报
getWeahterPrediction: function (latitude, longitude) {
var that = this
var url = "https://devapi.qweather.com/v7/weather/3d"
var params = {
location: longitude + "," + latitude,
key: "和风天气接口KEY",
}
wx.request({
url: url,
data: params,
success(res) {
console.log(res)
let dailyData = res.data.daily
that.setData({
WeahterPredictionList: dailyData
})
dailyData.forEach(function (item, index) {
var date = new Date();
var currect = "WeahterPredictionList[" + index + "].isOpen"
var showday = "WeahterPredictionList[" + index + "].week"
if (index == "0") {
that.setData({
[showday]: "今天"
})
} else {
that.setData({
[showday]: that.data.weekday[(date.getDay() + index) % 7]
})
}
that.setData({
[currect]: false
})
console.log(item, index)
})
},
fail(res) { },
complete(res) { },
})
},
fail(res) { console.log("判断接口出错,未知问题:" + res) },
});
},

 

 四、结束语

今日教程到此结束了,以上配置均为默认,不明白可以留言或者私信询问我

教程与源码也会持续更新到公众号与小程序
欢迎关注我们的小程序:梦小慀

欢迎关注我们的公众号:梦咖哔哔

赞(2)
未经允许不得转载:梦小慀资源网 » 微信小程序-小程序天气页面对接和风天气API实例
分享到: 更多 (0)

评论 5

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    不错,必须顶一下!

    自媒体运营1年前 (2021-12-07)回复
  2. #2

    前段页面的代码没有哎

    博文9个月前 (05-12)回复
    • 抱歉前端代码暂时不对外开放

      梦小慀9个月前 (05-16)回复
  3. #3

    yyds

    李李李李李李李3个月前 (10-27)回复