实训日志day 7

第七天的目标是导入天气数据

导入数据的主要代码：

index.wxml

 
7日天气


   
      {{item.date}}
   {{item.tem2}}~{{item.tem1}}
      {{item.wea}}
      {{item.win[0]}}{{item.win_speed}} 
  


  

  

  
    温度(℃)
    {{weather.tem}}
  
  
      湿度(%)
    {{humidity}}
   
  
        PM2.5
    {{weather.air_pm25}}
  
    
      气压(hPa)
      {{weather.pressure}}
       
  
    风向
    {{weather.win}}
   
  
   风速
    {{weather.win_meter}}  
      
      风速等级
    {{weather.win_speed}}
    

  
  能见度
    {{weather.visibility}}
    

index.wxss 

/* weekday */
.weekday{
  color: white;
  text-align: center;
  font-size: 34rpx;
  margin: 15rpx 0;
  padding-bottom: 15rpx;
  border-bottom: 2rpx solid #ddd;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item_H{

  width: 23%;
  display: inline-block;
  margin: 0 10rpx;
}
.scroll-view-item_H>view{
  text-align: center;
  font-size: 22rpx;
  margin-bottom: 10rpx;
}
.wea{
  display: flex;
  align-items: center;
  justify-content: center;
}

index.js 

 // 天气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)
      }
    });
  }

})

部分效果图：