慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第4章第二个页面新闻阅读页面-JS与小程序Page页面生命周期

JS与小程序Page页面生命周期

1.进入目录 pages/posts，修改文件 posts.wxml

<view>
  <swiper indicator-dots="true" autoplay="true" interval="5000">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>
  <view class="post-container">
    <view class="post-author-date">
      <image class="post-author" src="/images/avatar/1.png"></image>
      <text class="post-date">Sep 18 2016</text>
    </view>
    <text class="post-title">正是虾肥蟹壮时</text>
    <image class="post-image" src="/images/post/crab.png"></image>
    <text class="post-content">菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，</text>
    <view class="post-like">
      <image class="post-like-image" src="../../images/icon/chat.png"></image>
      <text class="post-like-font">96</text>
      <image class="post-like-image" src="../../images/icon/view.png"></image>
      <text class="post-like-font">112</text>
    </view>
  </view> 
   <view class="post-container">
    <view class="post-author-date">
      <image class="post-author" src="/images/avatar/2.png"></image>
      <text class="post-date">Sep 25 2016</text>
    </view>
    <text class="post-title">比利.林恩的中场故事</text>
    <image class="post-image" src="/images/post/bl.png"></image>
    <text class="post-content">一 “李安是一位绝不会重复自己的导演，本片将极富原创性李安众所瞩目的新片《比利林恩漫长的中场休息》，正式更名《半场无战事》。</text>
    <view class="post-like">
      <image class="post-like-image" src="../../images/icon/chat.png"></image>
      <text class="post-like-font">96</text>
      <image class="post-like-image" src="../../images/icon/view.png"></image>
      <text class="post-like-font">112</text>
    </view>
  </view> 
</view>

2.测试调试，实际情况数据会从数据库或者文件中读取

3.进入目录 pages/posts，查看文件 posts.js 的函数生命周期

// pages/posts/posts.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

4.进入目录 pages/posts，修改文件 posts.js，看5个生命周期函数的执行顺序

// pages/posts/posts.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onload");
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("onready");
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("onshow");
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("onhide");
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("onunload");
  },

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

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

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

  }
})

5.保存后，打开调试器，按编译查看调试器输出