小程序专栏

小程序获取当地的天气

读心悦 · 10月14日 · 2020年 本文1231字 · 阅读4分钟20

使用天气的API:

https://www.tianqiapi.com

注册一个账号之后就有了自己的appid和appsecret

这个接口是根据IP地址来定位城市并获取相关的天气信息

获取自己的IP地址:

  getapi: function() {
    var _this = this;
    // 获取IP地址
    wx.request({
      url: 'https://tianqiapi.com/ip?version=v61&appid=自己的appid&appsecret=自己的appsecret',
      data: {},
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function(res) {
        // console.log(res);
        // 根据IP获取天气数据
        _this.weathertoday(res.data.ip);
      }
    });
  },

根据IP来获取城市的天气信息:

  weathertoday: function(ip) {
    var _this = this;
    wx.request({
      url: 'https://www.tianqiapi.com/api?version=v61&appid=自己的appid&appsecret=自己的appsecret',
      data: {
        'ip': ip
      },
      method: 'GET',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function(res) {
        console.log(res)
        _this.setData({
          weather: res.data
        });
        if (res.data.wea_img === "yin") {
          _this.setData({
            weatherIcon: "../../img/yin.png"
          })
        }
        if (res.data.wea_img === "qing") {
          _this.setData({
            weatherIcon: "../../img/qing.png"
          })
        }
        if (res.data.wea_img === "lei") {
          _this.setData({
            weatherIcon: "../../img/leiyu.png"
          })
        }
        if (res.data.wea_img === "xue") {
          _this.setData({
            weatherIcon: "../../img/xue.png"
          })
        }
        if (res.data.wea_img === "yu") {
          _this.setData({
            weatherIcon: "../../img/yu.png"
          })
        }
        if (res.data.wea_img === "wu") {
          _this.setData({
            weatherIcon: "../../img/wu.png"
          })
        }
      }
    });
  },

在onload里面调用this.getapi(),然后在页面渲染相关数据即可!

0 条回应

×