微信小程序之天气查询

本次小项目参考了B站的视频，链接为https://www.bilibili.com/video/BV1i4411c7dU?p=12

但由于这个视频是去年录制的，所以今年使用的时候，发现有一些地方与视频不一致，主要有两点：

• API访问查询方式不一致：视频中只需提供地址即可获得天气数据，而现在需要提供城市的Location ID才能访问，而Location ID需要另一个API访问，总共有两个；
• 天气ID不一致：API访问之后得到的天气ID有变化，因此如果直接用链接提供的天气图标会出现错误，需要重新下载天气图标。

下面分步介绍：

1、API访问查询

API访问查询的代码在weather.js文件中，需要对其修改。

我使用两个function，分别为getRegion: function ()和getWeater: function ()。首先需要获取城市的Location ID，再获取城市的天气数据，主要代码如下（key需要自己从和风天气官网获得）：

getRegion: function () {
    var that = this; //this不可以直接在wxAPI函数内部使用
    wx.request({
      url: 'https://geoapi.heweather.net/v2/city/lookup?',
      data: {
        location: that.data.region[1],
        key: '...............'
      },
      success: function (res) {
        console.log(res.data)
        that.setData({ addrid: res.data.location[0].id })
      }
  })
  },

  getWeater: function () {
    var that = this; //this不可以直接在wxAPI函数内部使用 
    wx.request({
      url: 'https://devapi.heweather.net/v7/weather/now?',
      data: 
        location: that.data.addrid,
        key: '............'
      },
      success: function (res) {
        //console.log(res.data)
        that.setData({ now: res.data.now})
      }
    })
  },

这样就可以得到天气数据了。

2、天气ID不一致

这个解决办法比较简单，重新去官网下载最新的天气图标，总共有三种展示形式

在此放上链接https://github.com/heweather/WeatherIcon

这样就可以实现天气的查询显示了。本人制作的效果如下：

最后欢迎大家点击我的小程序，不止有天气查询哦~