【微信小程序】生命周期函数

详细请走官网

1.简单说明

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 页面创建时执行
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
	// 页面首次渲染完毕时执行
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 页面首次渲染完毕时执行
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
	// 页面从前台变为后台时执行
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
	// 页面销毁时执行
  },

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

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
	// 页面被用户分享时执行
  }

onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }

2.测试

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

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

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

进入页面顺序
加载–显示–渲染

页面分享顺序
分享–隐藏–显示

3.Component 构造器

Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。

此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。

代码示例：

Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

这种创建方式非常类似于 自定义组件 ，可以像自定义组件一样使用 behaviors 等高级特性。

具体细节请阅读 官网 Component 构造器 章节。