微信小程序，怎么制作一个能够获取空气质量、温度、湿度、气压、风向等的天气模块

首先，制作天气模块，需要准备的资料可不少，开始进入正题吧！

步骤如下：

1、html+css布局

2、用微信小程序获取你当前所在的经纬度

3、根据地图API接口，将获取的经纬度解析成具体文字地址，如 省 &＃8211; 市 &＃8211; 县/区 &＃8211; 镇 &＃8211; 街道等

4、经过筛选，此处选择 “百度地图”，注册账号，创建API接口链接

5、获取和风天气接口密钥

6、获取常规天气信息(温度，图标，风向，湿度，气压)

7、获取空气质量

8、获取天气对应的图标

一、html+css布局

index.wxml：





{
{weather.basic.location}}・{
{district}}・{
{street}}

{
{weather.now.tmp}}℃
{
{weather.now.cond_txt}}


{
{weahterAir.air_now_city.aqi}}{
{weahterAir.air_now_city.qlty}}
{
{weather.now.wind_dir}}{
{weather.now.wind_sc}}级 湿度{
{weather.now.hum}}% 气压{
{weather.now.pres}}hPa







index.wxss：

.weat {
height: 240rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px 3px 4px rgba(99, 99, 99, 0.23);
border-radius: 8px;
background: #fff;
}
.location {
color: #acacac;
font-size: 24rpx;
display: flex;
align-items: center;
margin: 22rpx 0;
}
.location image {
width: 21rpx;
height: 24rpx;
margin-left: 30rpx;
margin-right: 10rpx;
}
.temp {
margin-left: 30rpx;
color: #333;
font: 64rpx "微软雅黑";
}
.temp text {
font-size: 30rpx;
}
.humid {
display: flex;
font-size: 26rpx;
font-weight: 300;
color: #acacac;
margin: 22rpx 0;
margin-left: 30rpx;
width: 100%;
}
.label {
padding: 0 9rpx;
height: 30rpx;
font-size: 22rpx;
font-weight: 300;
color: #6abf47;
border: 1px solid #6abf47;
border-radius: 6rpx;
text-align: center;
margin-right: 12rpx;
}
.sun image {
width: 128rpx;
height: 128rpx;
margin-right: 31rpx;
}

二、用微信小程序获取你当前所在的经纬度

index.js：

// 获取当前经纬度
getGPS: function(e) {
const that = this
wx.getLocation({
type: 'wgs84',
success: (res) => {
var latitude = res.latitude // 纬度
var lOngitude= res.longitude // 经度
var speed = res.speed
var accuracy = res.accuracy
}
})
}

三、根据地图API接口，将获取的经纬度解析成具体文字地址，如 省 &＃8211; 市 &＃8211; 县/区 &＃8211; 镇 &＃8211; 街道等

其中接口拼接需要密钥，注册获取密钥第4点有介绍操作过程。

url：https://api.map.baidu.com/reverse_geocoding/v3/

Page({
data:{
city: '', // 省
district: '', // 市区
street: '' // 街道
},
onLoad: function(e) {
this.getCity();
this.getGPS();
},
// 获取当前经纬度
getGPS: function(e) {
......
success: (res) => {
var latitude = res.latitude
var lOngitude= res.longitude
// 将得到经纬度赋值给百度地图函数
that.getCity(latitude, longitude)
}
......
}
//获取城市信息——百度地图，将获取到的经纬度解析成详细的地区名
getCity: function(lat, long) {
// 初始化刷新
wx.showLoading({
title: '加载中...',
icon: 'loading',
duration: 10000
});
var that = this
var url = "https://api.map.baidu.com/reverse_geocoding/v3/";
var latitude = lat; // 纬度
var lOngitude= long; // 经度
var params = {
ak: "", // 百度地图密钥
output: "json",
location: latitude + "," + longitude
}
wx.request({
url: url,
data: params,
success: function(res) {
// 获取到地址数据结束刷新
wx.hideLoading();
// 获取地址
var city = res.data.result.addressComponent.city; // 省
var district = res.data.result.addressComponent.district; // 市区
var street = res.data.result.addressComponent.street; // 街道
that.setData({
city: city,
district: district,
street: street,
})
}
})
},
})

四、注册账号，创建API接口链接

经过筛选此处选择 “百度地图API”，链接：https://lbsyun.baidu.com/

点击开发文档 -> 微信小程序 Javascript API -> 天气查询模块 -> 账号和密钥

点击右上角“API控制台”，注册成为百度地图开发者。根据提示填写正确的邮箱及手机号完成开发者注册流程。

点击 应用管理 -> 我的应用 -> 创建应用

名称随便命一个；类型选择 维系小程序； APP ID 填写 微信公众平台注册的账号APPID，注：必须是小程序开发者

 此时就能获取到百度API的 AK（密钥）了 ，再将相关的字符组成URL接口链接

五、获取和风天气接口密钥

     根据获取解析得到的地址，如：”重庆“ 获取天气接口信息，其中设计图获取天气信息中有 “空气质量” 参数，经过筛选只有 ”和风天气“ 里面有 &＃8220;空气质量&＃8221; 参数，因此，想要获取和风天气接口，需要注册得到接口 密钥（KEY），访问地址：https://dev.qweather.com/docs/api/weather/

首先注册账号

 控制台 -> 应用管理 -> 创建应用 -> 选择免费开发板

 这样就能得到密钥（KEY）啦~

六、获取常规天气信息(温度，图标，风向，湿度，气压)

url：https://free-api.heweather.net/s6/weather

参考文档：https://dev.qweather.com/docs/api/indices/

data:{
weather: '' //天气信息
},
//获取城市信息——百度地图
getCity: function() {
......
wx.request({
......
success: function(res) {
var city = res.data.result.addressComponent.city;
......
var descCity = city.substring(0, city.length - 1);
that.getWeahter(descCity); // 将得到的 地名"重庆"，赋值给天气函数
}
})
},
//获取常规天气信息(温度，图标，风向，湿度，气压)——和风天气
getWeahter: function(city) {
var that = this
var url = "https://free-api.heweather.net/s6/weather"
var params = {
location: city,
key: "" // 和风天气密钥
}
wx.request({
url: url,
data: params,
success: function(res) {
that.setData({
weather: res.data.HeWeather6[0]
})
}
})
}

七、获取空气质量

 url：https://free-api.heweather.net/s6/air

参考文档：https://dev.qweather.com/docs/api/air/air-now/

data:{
weahterAir: '' // 空气质量
},
//获取常规天气信息
getWeahter: function(city) {
......
success: function(res) {
......
that.getWeahterAir(city); // 将获取的地区名 "重庆" 赋值给空气质量函数
}
})
}
//获取空气质量——和风天气
getWeahterAir: function(city) {
var that = this
var url = "https://free-api.heweather.net/s6/air"
var params = {
location: city,
key: "" // 和风天气密钥
}
wx.request({
url: url,
data: params,
success: function(res) {
that.setData({
weahterAir: res.data.HeWeather6[0]
})
}
})
}

八、获取天气对应的图标

图标需要先将图标下载下来，然后拼接成对应的字符串，得到对应的图标切换

图标下载地址：https://dev.qweather.com/docs/start/icons/

git clone https://github.com/qwd/WeatherIcon.git

data:{
weather: '', // 天气信息
weatherIconPic: '' //天气图标
},
//获取常规天气信息
getWeahter: function(city) {
......
wx.request({
......
success: function(res) {
var weatherIcOnId= "../../images/index/airIcon/" + res.data.HeWeather6[0].now.cond_code + ".png";
that.setData({
weather: res.data.HeWeather6[0],
//天气图标
weatherIconPic: weatherIconId
})
}
})
},
//获取天气对应图标
getWeahterIcon(weather) {
switch (weather) {
case "weatherIconText":
return weatherIconId;
}
}

    希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~