微信小程序开发 Day05

这次的微信小程序的总结是在隔了一天之后才发出来，因为原本用来练手的小程序写的太乱了只好重新再写一个出来。

任务：通过api接口设计一个天气预报页面

通过api接口设计一个天气预报页面

因为在此之前在实训中做过一个将“一言”的数据导入到微信小程序页面内的操作，所以并不是很难，主要是排版还有接口调用的for循环需要一点时间。下面顺便先将“一言”的实现情况放一下。

js源代码（有的原本自带的动作相应没有删掉，实际可以不用后半段部分源代码）：

Page({
  data: {
    hitokoto:" ",
    from:" ",
    windowWidth: '',
    windowHeight: '',
    fu: "",
    fu1:"",
    fu2:"",
  },
click:function(){
// 一言
var _this=this;
  wx.request({
    url: 'https://v1.hitokoto.cn/', 
    // 请求参数
    data: {
     c:"d"
    },
    header: {
      'content-type': 'application/json' 
    },
    success(res) {
      console.log(res.data)
      _this.setData({
        fu:"————",
        fu1:"『",
        fu2:"』",
        hitokoto:res.data.hitokoto,
        from:res.data.from,
      })
    }
  })
},
// 获取设备信息
  getInfo: function () {
  
  },

  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var _this = this;
    wx.getSystemInfo({
      success: function (res) {
        _this.setData({
          model: res.model,
          pixelRatio: res.pixelRatio,
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight,
          language: res.language,
          version: res.version,
          system: res.system,
          platform: res.platform
        })
      },
      fail: function (res) {
      },
      complete: function (res) {
      }
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxml源代码（其实就是一个简单的按钮）：

<view class='bj'>
<!-- 按钮 -->
<view><button bindtap='click' style="opacity:{{0.5}}" class='click'>点击一下</button></view>
<!-- 一言 -->
<view class='ban'><text>{{fu1}}{{hitokoto}}{{fu2}}\n{{fu}}{{from}}</text></view>
</view>

wxss源代码（也是因为背景basc64代码太长这里就直接省略掉先）：

.ban{
  height: 900rpx;
 display: flex;
justify-content: center;
align-items: center;
padding-left: 40rpx;
padding-right: 30rpx;
font-size: 50rpx;
font-weight: 600;
line-height: 100rpx;
color:white;
text-shadow:2px 2px 4px #8d8b8b;
}
.click{
  background-color:rgab(0,0,0,0.8);
  color:rgb(124, 124, 124);
  padding-left: 30rpx;
  padding-right: 30rps;
  border: none;
  border-radius:0%;
  font-weight: 600;
   flex-direction: row;
  align-items: center;
  justify-content: center;
}
.bj{
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-image: url("")
}

实现效果图：

下面就是天气预报界面的源代码：

js源代码：

Page({

  data: {
 weather:{},
 flag:false,
  todayIcon:'../../images/weather/qing.png'
  },
  onLoad: function (options) {
    // 天气请求
    var _this = this;
    wx.request({
      url: 'https://www.tianqiapi.com/api/',
      method:"get",
      dataType:"json",
      data: {
        version:'v1',
        city:'湛江'
      },
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        console.log(res.data);
        _this.setData({
          weather:res.data,
          flag:true,
          todayIcon: '../../images/weather/' + res.data.data[0].wea_img+'.png',
        })
      }
    })
  },


  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxml源代码：

<!-- 背景 -->
<view class='pock' style="opacity:{{0.7}}">
<!-- 正式天气 -->
<view class='first'>
<view><image src='{{todayIcon}}' class='yun'></image>
<text wx:if="{{flag}}" class='one'>{{weather.city}}</text>
</view>
<text wx:if="{{flag}}">{{weather.data[0].date}}</text>
</view>
<!-- 第一个框框 -->
<view class='beikuang' style="opacity:{{0.6}}">
<view class='twoface'>
<text>今天天气预报：{{weather.data[0].wea}}</text><text>空气质量：{{weather.data[0].air_level}}
</text>
</view>
</view>
<!-- 第二个框框 -->
<view class='beikuang' style="opacity:{{0.6}}">
<text wx:if="{{flag}}" class='clothes'>穿衣指数\n『{{weather.data[0].index[3].desc}}』</text>
</view>
<!-- 第三个框框 -->
<view class='beikuang' style="opacity:{{0.6}}">
<view>
<view wx:for="{{weather.data}}">
<view class='future'><view><text space='ensp'>{{item.day}}   {{item.wea}}</text></view><view>{{item.tem2}}</view></view>
</view>
</view>
</view>
</view>

wxss源代码：

.two{
    display: flex;
  justify-content: space-between;
}
.yun{
  padding-top: 20rpx;
 text-align: center;
 height: 150rpx;
 width: 190rpx;
}
.one{
  font-size: 100rpx;
}
.first{
  color: white;
  padding-right: 30rpx;
 display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-shadow:2px 2px 4px #696868;
  font-weight: 600;
}
.beikuang{
  background-color:black; 
  display: flex;
  color: white;
  flex-direction: column;
  box-sizing: border-box;
  background-size: 100%;
  padding: 30rpx;
  margin: 30rpx;
  border-radius: 5px;
  text-shadow:2px 2px 4px #696868;
  font-weight: 600;
}
.twoface{
  font-size: 35rpx;
  display: flex;
  justify-content: space-between;
  margin-left: 35rpx;
  margin-right: 35rpx;
}
.clothes{
 font-size: 35rpx;
}
.future{
  font-size: 30rpx;
  margin-left: 20rpx;
  margin-right: 40rpx;
  margin-top: 5rpx;
  margin-bottom: 10rpx;
  display: flex;
  justify-content: space-between;
}
.pock{
  width: 100vw;
  height: 100vh;
  background-size: 100vw;
  background-repeat: no-repeat;
  background-image: url("")
}

实现效果图：