校内实训第七天学习笔记

    

通过ip实现今天天气及未来七天天气的展示

接入腾讯位置

先通过设置ip实现api接入，修改函数得到当前定位的天气。

对页面总体布局进行设置，实现滑动显示七天天气。

.js

设置自动获取定位，显示本地地区  

  // wx获取位置接口

    wx.getLocation({

      success: function (res) {

        // 获取到经纬度

        console.log(res);



        // 逆地址解析

        qqmapsdk.reverseGeocoder({

          location: {

            latitude: res.latitude,

            longitude: res.longitude

          },

          success: function (res) {

            console.log(res.result.address_component.district.substr(0, 2));

            _this.weathertoday(res.result.address_component.district.substr(0, 2));

            _this.weatherweekday(res.result.address_component.district.substr(0, 2));

          }

        })

      }

    });

  },

设置接入今日天气和七天天气的函数

// 天气api实况天气

  weathertoday: function (city) {

    var _this = this;

    wx.request({

      url: 'https://www.tianqiapi.com/api/?version=v6',

      data: {

        'city': city

      },

      method: 'GET',

      header: {

        'content-type': 'application/x-www-form-urlencoded'

      },

      success: function (res) {

        console.log(res.data.date.substr(5, 5));

        _this.setData({

          weather: res.data,

          date: res.data.date.substr(5, 5),

          humidity: res.data.humidity.substr(0, 2)

        });

        console.log("今日天气 =>", _this.data.weather)

      }

    });

  },

  // 天气api实况天气

  weatherweekday: function (city) {

    var _this = this;

    wx.request({

      url: 'https://www.tianqiapi.com/api/?version=v1',

      data: {

        'city': city

      },

      method: 'GET',

      header: {

        'content-type': 'application/x-www-form-urlencoded'

      },

      success: function (res) {

        _this.setData({

          weatherweek: res.data

        });

        console.log("7日天气 =>", _this.data.weatherweek)

      }

    });

  }

对页面布局进行调整设置。

截图：