【微信小程序】生命週期函數

詳細請走官網

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 構造器 章節。