实训日志day 7

最新推荐文章于 2022-02-18 20:50:39 发布

咕咕噜噜噜

最新推荐文章于 2022-02-18 20:50:39 发布

阅读量327

点赞数

本文链接：https://blog.csdn.net/Yt_Yt_/article/details/93860276

版权

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

导入数据的主要代码：

index.wxml

 <!-- 7日天气 -->
<view class="weekday">7日天气</view>

<scroll-view class="scroll-view_H" scroll-x="true">
   <view class="scroll-view-item_H"  wx:for="{{weatherweek.data}}">
      <view>{{item.date}}</view>
   <view>{{item.tem2}}~{{item.tem1}}</view>
      <view class='wea'>{{item.wea}}<image class='wea_img' src='../../images/{{item.wea_img}}.png'></image></view>
      <view>{{item.win[0]}}{{item.win_speed}}</view> 
  </view>
</scroll-view>

  <!-- endWeather -->

  <!-- 描述 -->
<view class="detail">
  <view class="item">
    <text>温度(℃)</text>
    <text>{{weather.tem}}</text>
  </view>
  <view class="item">
      <text>湿度(%)</text>
    <text>{{humidity}}</text>
  </view> 
  <view class="item">
        <text>PM2.5</text>
    <text>{{weather.air_pm25}}</text>
  </view>
    <view class="item">
      <text>气压(hPa)</text>
      <text>{{weather.pressure}}</text>
    </view>   
  <view class="item">
    <text>风向</text>
    <text>{{weather.win}}</text>
  </view> 
  <view class="item">
   <text>风速</text>
    <text>{{weather.win_meter}}</text></view>  
      <view class="item">
      <text>风速等级</text>
    <text>{{weather.win_speed}}</text>
  </view>  

  <view class="item">
  <text>能见度</text>
    <text>{{weather.visibility}}</text>
  </view>  
</view>

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)
      }
    });
  }

})

部分效果图：