校内实训第六天

js文件

Page({

 

  /**

   * 页面的初始数据

   */

  data: {

    msg: 'Home',

    id: 'txt',

    motto: 'Hello World',

    userInfo: {},

    index: 9,

    yiyan: {},

    weather: {},

    location:'',

    flag: false,

    hasUserInfo: false,

    imgUrls: [

      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',

      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',

      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'

    ],

    canIUse: wx.canIUse('button.open-type.getUserInfo'),

    obj: {

      name: "hp",

      index: "0",

      time: "18"

    },

 

  },

 

  finish:function(e){

    var _this=this;

    console.log(e.detail.value);

    _this.setData({

      location:e.detail.value

      });

    _this.getWeather(_this);

  },

  getWeather:function(_this){

    var _this = this;

    wx.request({

      url: 'https://www.tianqiapi.com/api/',

      method: 'get',

      dataType: 'json',

      data: {

        version: 'v1',

        city: _this.data.location,

      },

      header: {

        'content-type': 'application/json'  //默认值

      },

      success(res) {

        console.log(res.data)

        _this.setData({

          weather: res.data,

          flag: true,

        })

      }

    })

  },

 

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    var _this=this;

    this.getWeather(_this);

  },

 

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

 

  },

 

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

 

  },

 

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

   

 

  },

 

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

 

  },

 

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

 

  },

 

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

 

  },

 

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

 

  }

})

 

wxml文件

<view class='nav'>

  <image class='img' src='../../assets/icons/weather.png'></image>

  <input class='ipt' placeholder='请输入城市名，快速查询天气信息' value='' bindconfirm='finish'></input>

</view>

 

<view class='user'>

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

<open-data class='userNick' type="userNickName"></open-data>

</view>

 

<view class='map'>

   <view class='l-box'>

      <image class='img' src='../../assets/icons/acmap.png'></image>

      <text class='loc'>{{weather.city}}</text>

   </view>

   <view class='r-box'>

      <text>{{weather.update_time }}更新</text>

   </view>

</view>

 

<view class='info'>

   <view class='tem'>

   {{weather.data[0].tem}}

 

   </view>

   <text class='wea'>{{weather.data[0].wea}}</text>

   <text>空气质量：{{weather.data[0].air_level}}</text>

</view>

 

<view class='out'>

  <scroll-view scroll-x scroll-into-view='item1'>

    <view id='item1' class='item'>

      <view class='inner'>

     <text>{{weather.data[1].day}}</text>

      <text>{{weather.data[1].tem}}</text>

     

      </view>

    </view>

    <view id='item2' class='item'>

      <view class='inner'>

       <view class='inner'>

     <text>{{weather.data[2].day}}</text>

      <text>{{weather.data[2].tem}}</text>

     

      </view>

      </view>

    </view>

    <view class='item'>

      <view class='inner'>

       <view class='inner'>

     <text>{{weather.data[3].day}}</text>

      <text>{{weather.data[3].tem}}</text>

     

      </view>

      </view>

    </view>

    <view class='item'>

      <view class='inner'>

       <view class='inner'>

     <text>{{weather.data[4].day}}</text>

      <text>{{weather.data[4].tem}}</text>

     

      </view>

      </view>

    </view>

  </scroll-view>

</view>

 

wxss文件

page{

  height: 100%;

  background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2701243995,2560695110&fm=26&gp=0.jpg);

  background-size: 100% 100%;

}

.nav{

  display: flex;

  justify-content: center;

}

 

.nav>.ipt{

  width: 90%;

  border-bottom: 2rpx solid rgb(46, 46, 46);

  padding-left: 60rpx;

  align-items: center;

  box-sizing: border-box;

}

 

.nav>.pla{

  font-size: 26rpx;

}

 

.nav>.img{

  width: 40rpx;

  height: 40rpx;

  position: absolute;

  left: 45rpx;

}

/* end nav */

 

/* userinfo */

.user{

  margin: 20rpx 30rpx;

  display: flex;

  align-items: center;

}

.user>.userArea{

  width: 60rpx;

  height: 60rpx;

  border-radius: 50%;

  overflow: hidden;    /* 切掉图片超出的部分 */

  border:1rpx solid rgb(0, 0, 0);

}

.user>.userNick{

  font-size: 28rpx;

  color: rgb(0, 0, 0);

  margin-left: 20rpx;

  font-weight: bold;

}

/* end userinfo */

 

/* location */

.map{

  margin: 0 40rpx;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 1px solid rgb(0, 0, 0);

}

.map .img{

  width: 35rpx;

  height: 35rpx;

}

.map .loc{

  font-size: 54rpx;

  margin-left: 20rpx;

}

.map .l-box{

  display: flex;

  align-items: center;

 

}

.map .r-box{

  display: flex;

  align-items: center;

  color: rgb(0, 0, 0);

}

/* end location */

 

.info{

  height: 600rpx;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: center;

  border-bottom: 1px solid rgb(0, 0, 0);

}

.info .tem{

  height: 400rpx;

  line-height: 400rpx;

  font-size: 55px;

  top:-60px;

  color: rgb(0, 0, 0);

  position: relative;

}

.info .tem text{

  position: absolute;

  right: -65rpx;

  top: -30rpx;

  font-size: 20px;

}

 

.picture{

  height: 90rpx;

  width: 90rpx;

 

}

 

.scroll_v{

  display: flex;

  white-space: nowrap;

}

 

.out {

  /* background: #38B0de; */

  padding: 20px 10px;

  width: 100%;

  white-space: nowrap;

  box-sizing: border-box;

}

 

/*设置行内块*/

 

.out  .item {

  width: 100px;

  height: 80px;

  border: 1px solid #38B0de;

  /* background: white; */

  display: inline-block;

  margin-right: 10px;

}

 

.inner{

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

 

}