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

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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

步骤如下： 1、html+css布局

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

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

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

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

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

7、获取空气质量

8、获取天气对应的图标

一、html+css布局

index.wxml：

<view class="weat">
  <view>
    <view class="location">
      <image src="../../images/index/location.png"></image>
      <view>{{weather.basic.location}}・{{district}}・{{street}}</view>
    </view>
    <view class="temp">{{weather.now.tmp}}℃
      <text>{{weather.now.cond_txt}}</text>
    </view>
    <view class="humid">
      <view class="label">{{weahterAir.air_now_city.aqi}}{{weahterAir.air_now_city.qlty}}</view>
      <view>{{weather.now.wind_dir}}{{weather.now.wind_sc}}级 湿度{{weather.now.hum}}% 气压{{weather.now.pres}}hPa</view>
    </view>
  </view>
  <view class="sun">
    <image src="{{weatherIconPic}}"></image>
  </view>
</view>

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;
}.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接口，将获取的经纬度解析成具体文字地址，如省 – 市 – 县/区 – 镇 – 街道等

其中接口拼接需要密钥，注册获取密钥第4点有介绍操作过程。 url：api.map.baidu.com/reverse_geo…

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”，链接：百度地图开放平台 | 百度地图API SDK | 地图开发

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

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

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

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

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

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

根据获取解析得到的地址，如：”重庆“ 获取天气接口信息，其中设计图获取天气信息中有 “空气质量” 参数，经过筛选只有 ”和风天气“ 里面有 “空气质量” 参数，因此，想要获取和风天气接口，需要注册得到接口密钥（KEY），访问地址：天气API – API | 和风天气开发平台

首先注册账号

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

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

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

参考文档：天气生活指数 – API | 和风天气开发平台

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：free-api.heweather.net/s6/air

参考文档：实时空气质量 – API | 和风天气开发平台

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]
        })
      }
    })
  }

八、获取天气对应的图标

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

图标下载地址：Redirecting…

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;
    }
  }

今天的文章微信（小程序），怎么制作一个能够获取 “ 空气质量、温度、湿度、气压、风向 ” 等的【天气模块】分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/16892.html