微信小程序开发 Day07

今天的实训主要就是将昨天课堂没有完成的编写都实现一遍

任务：完善天气页面

完善天气页面

js源代码：

//index.js
//获取应用实例
const app = getApp()
// 引入sdk核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;

Page({
  data: {
    weather:{},//实况天气
    weatherweek: [],//七日天气
    value:null,
    date:'',
    humidity:""
  },
  onLoad: function () {
    var _this = this;
    //实例话api核心类
    qqmapsdk = new QQMapWX({
      key: 'CGGBZ-KGUKS-SQFOI-6IT7J-ZB6WT-XUFLT'
    });
    // 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));
          }
        })
      }
    });
  },
  finish:function(e){
    var _this = this;
    // console.log(e.detail.value);
    if (e.detail.value.length != 0){
      _this.weathertoday(e.detail.value);
      _this.weatherweekday(e.detail.value);
      // 清空输入框的值
      _this.setData({
        value:''
      })
    }
  },
  // 天气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)
      }
    });
  }
})

wxml源代码：

<!-- nav -->
<view class='nav'>
  <image class='img' src='../../assets/icons/icon.png'></image>
  <input class='ipt' placeholder-class='pla' placeholder='请输入城市名，快速查询天气信息' bindconfirm="finish" value='{{value}}'></input>
</view>
<!-- ENDnav -->

<!-- user -->
<view class='user'>

  <view class='userAvatar'>
    <open-data type="userAvatarUrl"></open-data>
  </view>

  <open-data class="userNick" type="userNickName"></open-data>
</view>
<!-- END user -->

<!-- location -->
<view class='map'>

  <view class='l-box'>
    <image class="img" src='../../assets/icons/location.png'></image>
    <text class='loc'>{{weather.city}}</text>
  </view>
 
    <text class='r-box'>{{date}} {{weather.update_time}} 更新</text>
  
</view>
<!-- END location -->

<!-- weather -->
<view class='info'>
  <view class='tem'>
    {{weather.tem}} <text>℃</text>
  </view>
  <text class='wea'>{{weather.wea}}</text>
  <text class='air_level'>空气质量:{{weather.air_level}}</text>
</view>
<!-- END weather -->

<!-- 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='../../weaicon/{{item.wea_img}}.png'></image></view>
      <view>{{item.win[0]}}{{item.win_speed}}</view> 
  </view>
</scroll-view>

<!-- 描述 -->
<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>

wxss源代码：

/**index.wxss**/
page{
  height: 100%;
  /* background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561348370456&di=940bb674dcde1e5b24f8d372ac970f15&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F30%2F20160730120344_2rFBH.jpeg) no-repeat 0 0; */
  background-size: 100% 100%;
}
.nav{
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.nav>.ipt{
  width: 90%;
  border-bottom: 2rpx solid #ddd;
  padding-left: 60rpx;
  box-sizing: border-box;
}
.pla{
  font-size: 26rpx;
}
.nav>.img{
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 45rpx;
  top: 5rpx;
}
/* END nav */

/* userinfo */
.user{
  margin: 20rpx 34rpx 0rpx;
  display: flex;
  align-items: center;
}
.user>.userAvatar{
  width: 55rpx;
  height: 55rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 1rpx solid #ddd;
}
.user>.userNick{
  font-size: 28rpx;
  color: #888;
  margin-left: 20rpx;
  /* font-weight: bold; */
}
/* END userinfo */


/* location */
.map{
  margin: 0 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between
}
.map .l-box{
  display: flex;
  align-items: center;
}
.map .img{
  width: 35rpx;
  height: 35rpx;
}
.map .loc{
  font-size: 54rpx;
  margin-left: 15rpx;
  color: #777;
}
.map .r-box{
  font-size: 26rpx;
  color: #999;
}
/* END location */

/* weather */
.info{
  height: 600rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.info .tem{
  height: 400rpx;
  line-height: 400rpx;
  font-size: 120rpx;
  color: #777;
  position: relative;
}
.info .tem text{
  position:absolute;
  right:-30rpx;
  top:-15rpx;
  font-size:30rpx;
}
.info .wea{
  color: #666;
}
.info .air_level{
  margin: 10rpx;
  font-size: 30rpx;
  color: #777;
}
/* END weather */


/* weekday */
.weekday{
  color: #999;
  text-align: center;
  font-size: 28rpx;
  margin: 20rpx 0;
  padding-bottom: 10rpx;
  border-bottom: 1rpx 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;
}
.wea_img{
  margin: 5rpx 0rpx 5rpx 8rpx;
  width: 24rpx;
  height: 24rpx;
}

/* detail */
.detail{
  margin: 30rpx 0;
  display: flex;
  flex-wrap: wrap;
  border-left:1rpx solid #ddd;
  border-top:1rpx solid #ddd;
  box-sizing: border-box;
}
.detail>.item{
  padding: 10rpx 0;
  height: 100rpx;
  flex-basis: 25%;
  font-size: 26rpx;
  border-right: 1rpx solid #ddd;
  border-bottom: 1rpx solid #ddd;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}