🎀 文章作者：二土电子
🐸 期待大家一起学习交流！

---

一、实现效果

本人的需求比较简单，只是一个页面用来显示两个人所在地的实时天气信息，主要信息包括所在省份、所在地区、天气、实时气温、风向、风力、空气湿度和发布时间，可以根据实时天气信息显示相应天气图标，下面是实现效果

二、天气查询API

本人使用的是高德的天气查询API，相关文档可点击链接查看。高德的天气查询API是一个简单的HTTP接口，可以根据用户输入的城市编码获取相应地区的天气情况，但是使用前需要申请自己的key，具体申请方法可以点击这篇大佬的文章查看微信小程序开发——调用免费天气api接口（高德、天气API）

使用高德天气查询API是免费的，而且可查询次数非常多，完全足够普通的个人开发者使用。

三、微信小程序设计思路

1、页面跳转

看过之前文章的应该清除，本人的小程序是分三个部分，最中间是首页，也就是公共部分，查询天气是常用的功能，因此直接放在了公共部分的页面，点击天气图标可以进入上面的天气显示页面，公共页面如下图

点击图中的天气图标即可，音乐是另外一个功能，但是由于时间有限，本文只介绍天气查询功能的实现，音乐功能后续会另外介绍，此外还有已经基本实现的记事本功能，期待的小伙伴们可以关注一下专栏呀，希望大家互相学习，共同进步。

2、获取天气信息

跳转到天气页面后需要获取天气信息，根据高德的开发指南，需要知道两个人所在地区的城市编码，城市编码可以根据高德开发指南里的城市编码表确定。此外，根据开发指南，不仅可以获取实况天气，还可以获取预报天气，也就是未来几天的天气，本人尝试过，获取预报天气时只有白天天气、夜间天气、白天温度、夜间温度、白天风力、风向和夜间风力、风向这些信息，没有发布时间、实时气温、空气湿度这些信息。

3、信息显示

正如最开始的效果图，本人的需求只是显示两个人的实时天气，所以在信息显示方面设计的较为简单，为了不那么单一，特地加上了两个头像，大家也可以根据自己的想法进行渲染修饰。

天气图标的话是利用wx:if函数判别当前天气情况然后显示的，实现方法较为粗暴，如果大佬有更好的方法可以评论区交流呀。

四、程序实现

1、页面跳转功能

页面跳转功能实现较为简单，只是插入了一张图片，给图片加入了点击触发的跳转函数，当然还有其他方法，这里就暂时不做介绍了，后续记事本的文章会介绍另一种方法。

主页.wxml代码如下

<!-- 天气 -->
 <view class="app">
 <image src="../../image/weather_cover/weather.png" bindtap="weather" style="width: 133rpx; height: 129rpx; display: inline-block; box-sizing: border-box; position: relative; left: -60rpx; top: -300rpx"></image>
 <text style="position: relative; left: -155rpx; top: -260rpx">天气</text>
 </view>

咳咳，本人由于能力有限，在调整图标位置和大小时使用了微信开发工具的可视化开发功能，所以导致整体代码有些长，希望大家多多指教，虽然后来发现可以通过在.wxss文件增加对应的样式可以达到这种调整大小的效果，但是在尝试的过程中发现对于位置的调节并没有达到预期效果，需要继续学习。

页面跳转.wxss文件代码如下

.app{
  width: auto;
  height: auto;
}

页面跳转.ts文件代码如下

weather:function(){
    wx.navigateTo({url:'/pages/weather/weather'})
  },

2、获取天气信息

获取天气信息需要上面申请的key和所在地的城市编码，还是按照惯例，先上程序

2.1、变量声明

data: {
    lin_weather_inform:{},
  },

声明一个变量用来存储查询到的天气信息。

2.2、获取所在地区天气信息

onLoad:function(){
    var that = this;
    // 获取小林所在地区温度
    wx.request({
      url: 'https://restapi.amap.com/v3/weather/weatherInfo',
      data:{
        'key': '自己申请的key',   //改为自己申请的Key
        'city': '210911',
      },
      success:function(res){
        that.setData({
          lin_weather_inform: res.data,
        })
      }
    })
  }

在对应位置填入自己申请的key和城市编码即可，url的网址可以直接用同一个。

3、天气信息显示

这里先解释一下，本人为了实现天气图标显示并且能够根据实况天气显示对应图标，加入了一个判断过程，所以显得程序非常繁杂，如果大佬有好的方法还请评论区指教呀。

天气显示代码如下

<!-- 小林天气 -->
<view class="lin_weather">
  <image src="../../image/weather_cover/lin.png" style="width: 232rpx; height: 227rpx; display: inline-block; box-sizing: border-box; position: absolute; left: 473rpx; top: 30rpx"></image>
  <view class="info" style="position: absolute; left: 55rpx; top: 120rpx"> 所在省份：{
    
    {
    
    lin_weather_inform.lives[0].province}}</view>
  <view class="info" style="position: absolute; left: 55rpx; top: 190rpx"> 城市：{
    
    {
    
    lin_weather_inform.lives[0].city}}</view>
  <view class="info" style="position: absolute; left: 55rpx; top: 250rpx">天气：{
    
    {
    
    lin_weather_inform.lives[0].weather}}</view>
  <!-- 天气图标判断显示 -->
  <image class="weather_icon" wx:if="{
    
    {lin_weather_inform.lives[0].weather == ('晴')}}" src="../../image/weather_cover/fine.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <image class="weather_icon" wx:if="{
    
    {lin_weather_inform.lives[0].weather == ('阴')}}" src="../../image/weather_cover/cloudy_yin.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <image class="weather_icon" wx:if="{
    
    {lin_weather_inform.lives[0].weather == ('多云')}}" src="../../image/weather_cover/cloudy.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <image class="weather_icon" wx:if="{
    
    {lin_weather_inform.lives[0].weather == ('雨') || lin_weather_inform.lives[0].weather == ('阵雨') || lin_weather_inform.lives[0].weather == ('小雨') || lin_weather_inform.lives[0].weather == ('中雨') || lin_weather_inform.lives[0].weather == ('大雨') || lin_weather_inform.lives[0].weather == ('暴雨')}}" src="../../image/weather_cover/rain.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <image class="weather_icon" wx:if="{
    
    {lin_weather_inform.lives[0].weather == ('雷阵雨') || lin_weather_inform.lives[0].weather == ('雷阵雨并伴有冰雹')}}" src="../../image/weather_cover/thunderstorm.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <image class="weather_icon" wx:if="{
    
    {lin_weather_inform.lives[0].weather == ('雪') || lin_weather_inform.lives[0].weather == ('阵雪') || lin_weather_inform.lives[0].weather == ('小雪') || lin_weather_inform.lives[0].weather == ('中雪') || lin_weather_inform.lives[0].weather == ('大雪') || lin_weather_inform.lives[0].weather == ('暴雪')}}" src="../../image/weather_cover/snow.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <image class="weather_icon" wx:if="{
    
    {lin_weather_inform.lives[0].weather == ('雾')}}" src="../../image/weather_cover/fog.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <view class="info" style="position: absolute; left: 55rpx; top: 310rpx"> 实时气温：{
    
    {
    
    lin_weather_inform.lives[0].temperature}}℃</view>
  <view class="info" style="position: absolute; left: 55rpx; top: 370rpx"> 风向：{
    
    {
    
    lin_weather_inform.lives[0].winddirection}}</view>
  <view class="info" style="position: absolute; left: 55rpx; top: 430rpx"> 风力：{
    
    {
    
    lin_weather_inform.lives[0].windpower}}</view>
  <view class="info" style="position: absolute; left: 55rpx; top: 490rpx"> 空气湿度：{
    
    {
    
    lin_weather_inform.lives[0].humidity}}%</view>
  <view class="info" style="position: absolute; left: 55rpx; top: 550rpx"> 发布时间：{
    
    {
    
    lin_weather_inform.lives[0].reporttime}}</view>
</view>

五、总结

1、遇到的问题

在利用上述方法实现天气查询时需要在微信小程序开发工具中不校验合法域名这一项勾选，否则会报错，这么设置的话虽然可以正常调试，但是对于需要发布的微信小程序会导致无法发布，要根本解决这个问题需要我们将网址添加到request的合法域名中。

2、后续优化方向

后续可以添加一个按钮，用来查询未来天气，点击可以看到未来几天的天气情况。

3、获取未来天气的方法

首先看一下高德官方文档的介绍

由此可以看出，只需要在wx.request中将气象类型修改成all即可，具体程序如下

wx.request({
      url: 'https://restapi.amap.com/v3/weather/weatherInfo',
      data:{
        'key': '自己的key',   //改为自己申请的Key
        'city': '210911',
        'extensions': 'all',
      },
      success:function(res){
        that.setData({
          lin_weather_inform: res.data,
        })
      }
    })