小程序：天气

读书时，发现书上的和风天气接口有些过时了，

于是按着视频中周老师教的方法，修改了一些代码。

而且还要加一个函数，才可以获取到天气数据，之前书上说的地区名是拼音，但现在是数字，

最后想了想，又看了两遍视频，终于明白如何修改了。

并且还加了三天的实时天气信息，本来想加24小时的天气信息，但苦于有权限，无法增加。

代码中加粗文字就是修改和增加的

【index.js】

data: {

    region:['北京市','北京市','朝阳区'],

    locationid:'101010100',

    threeday:[],

    now:{

      temp:0,

      text:'未知',

      icon:'999',

      humidity:0,

      pressure:0,

      vis:0,

      windDir:0,

      windSpeed:0,

      windScale:0

    }

  },

  regionChange: function (e) {

    // console.log(e);

    this.setData({

      region:e.detail.value

    })

    this.getLocationid();

  },

  // 获取城市id

  getLocationid:function(){

    var that = this;

    wx.request({

      url: 'https://geoapi.qweather.com/v2/city/lookup',

      data:{

        location:that.data.region[2],

        adm1: that.data.region[1],

        key:'和风天气密钥'

      },

      success:function(res_id){

        // console.log(res_city.data.location[0].id);

        that.setData({

          locationid:res_id.data.location[0].id

        })

      }

    })

    this.getWeather();

    this.getthreeday();

  },

  // 获取天气数据

  getWeather: function () {

    var that = this;

    wx.request({

      url: 'https://devapi.qweather.com/v7/weather/now',

      data:{

        location:that.data.locationid,

        key:'和风天气密钥'

      },

      success:function(res){

        // console.log(res.data);

        that.setData({

          now:res.data.now

        })

      }

    })

  },

    // 获取3天天气

    getthreeday:function(){

      var that = this;

      wx.request({

        url: 'https://devapi.qweather.com/v7/weather/3d',

        data:{

          location:that.data.locationid,

          key:'和风天气密钥'

        },

        success:function(res){

          // console.log(res.data.daily)

          that.setData({

            threeday:res.data.daily

          })

        }

      })

 },

onLoad: function (options) { this.getLocationid() },

【index.xwml】

<div class="container">

  <!--地区-->

  <picker mode="region" bindchange="regionChange">

    <view>{{region}}</view>

  </picker>

  <!--天气信息-->

  <text>{{now.temp}}℃ {{now.text}}</text>

  <!--天气图标

  <image src="/images/weather_icon/{{now.icon}}.png" mode="widthFix"></image>-->

  <!--3日内信息-->

  <view class="detail detail2">

    <block class="detail_box" wx:for="{{threeday}}" wx:key="threeday_{{index}}">

      <view class="bar">

        <view class="box">{{item.fxDate}}</view>

        <view class="box"><image src="/images/weather_icon/{{item.iconDay}}.png" mode="widthFix"></image></view>

        <view class="box">{{item.tempMax}}</view>

        <view class="box">{{item.tempMin}}</view>

      </view>

    </block>

  </view>

  <!--天气信息-->

  <view class="detail">

    <view class="bar">

      <view class="box">温度</view>

      <view class="box">气压</view>

      <view class="box">能见度</view>

    </view>

    <view class="bar">

      <view class="box">{{now.humidity}} %</view>

      <view class="box">{{now.pressure}} hpa</view>

      <view class="box">{{now.vis}} km</view>

    </view>

    <view class="bar">

      <view class="box">风向</view>

      <view class="box">风速</view>

      <view class="box">风力</view>

    </view>

    <view class="bar">

      <view class="box">{{now.windDir}}</view>

      <view class="box">{{now.windSpeed}} km/h</view>

      <view class="box">{{now.windScale}} 级</view>

    </view>

  </view>

</div>

css基本没变化，省略了。