最近在搞微信小程序，突然想来搞一个天气API，来获取实时的天气。话不多说，直接开搞。。

1. 选择一个天气API

百度上随便一搜，都是天气API，但是我感觉用起来都太烦了，
无论是注册，还是说要付费，还有各种广告。很讨厌。我一个都没有选

所以我决定偷一个天气API。

2. 偷一个天气API ！？

这波我看中了腾讯天气 ， 简约大方，重要的是好看

但是有一点就是，他并没有直接给我们开放一个API，所以这里我们使用 F12进行抓包，（为啥我不使用Fiddler抓包，可能是因为我比较菜吧）

1. 没有异步请求！？

f12打开查看，点到XHR筛选异步的AJAX请求，但是发现无论怎么刷新都没有。

2. 从全部请求中排查异步包
   
   在所有的请求包中，我发现，发送的是回调的异步请求，这才导致了在XHR中找不到。

3. 获取请求地址，删掉回调参数，用postman发请求来进一步筛选我们要的信息

进一步发现，这个api需要一些参数，来源，天气状态，省份和城市，如果我要获取动态的获取天气的话，省份和城市是肯定不能写死的。

进一步查看请求包发现了一个这样的请求
可以通过ip地址来获取天气

3. 渲染到微信小程序中

现在获取了两个api，
一个是通过发送http请求的ip地址来获取省份城市
https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5
还有一个是通过省份城市来获取天气
https://wis.qq.com/weather/common?source=pc&weather_type=observe%7Cforecast_24h&province=省份&city=你的城市

这里我对两个api进行了一些处理，因为我不需要那么多的信息。

  //通过当前的ip地址获取城市，来自腾讯的api
  getCity(){
    var that = this
    let url = 'https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5'
    wx.request({
      method:'get',
      url: url,  
      success(res){
        if(res.statusCode===200){
          let adinfo = res.data.result.ad_info
          console.log(adinfo.province);
          that.setData({
            city:adinfo.city,
            province: adinfo.province,
          })
        }
      }
    })
  }

  //获取天气的API
  getWether(){
    let that = this
    let url = `https://wis.qq.com/weather/common?source=pc&weather_type=observe%7Cforecast_24h&province=${that.data.province}&city=${that.data.city}`
    wx.request({
      url: url,
      method:'GET',
      success(res){
        let todayWether = res.data.data.forecast_24h[1]
        console.log(todayWether);
        if(res.statusCode===200){
            that.setData({
              weather:`${todayWether.min_degree}~${todayWether.max_degree}°  ${todayWether.day_weather} ${todayWether.day_wind_direction}${todayWether.day_wind_direction_code}级`
            })
        }
      }
    })
  }

4. 还有一个问题！？

因为腾讯的这个api是需要通过省份和城市来获取天气的，
所以说，需要先执行获取省份和城市的方法！

所以我这里使用了setTime()这个方法

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getCity()
    //获取天气的时候慢200ms
    setTimeout(()=>{
      this.getWether()
    },500)
  },

5. 渲染到页面上

这个就比较简单了，

<view class="wether">
      <text>{{today}}</text><text>{{city}} {{weather}}</text>
</view>