微信小程序組件、頁面、整改小程序的生命週期

整個小程序的生命週期:

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

單個頁面的生命週期:

Page({
	  data: {
	    text: "This is page data."
	  },
	  onLoad: function(options) {
	    // 頁面創建時執行
	  },
	  onShow: function() {
	    // 頁面出現在前臺時執行
	  },
	  onReady: function() {
	    // 頁面首次渲染完畢時執行
	  },
	  onHide: function() {
	    // 頁面從前臺變爲後臺時執行
	  },
	  onUnload: function() {
	    // 頁面銷燬時執行
	  },
	  onPullDownRefresh: function() {
	    // 觸發下拉刷新時執行
	  },
	  onReachBottom: function() {
	    // 頁面觸底時執行
	  },
	  onShareAppMessage: function () {
	    // 頁面被用戶分享時執行
	  },
	  onPageScroll: function() {
	    // 頁面滾動時執行
	  },
	  onResize: function() {
	    // 頁面尺寸變化時執行
	  },
  })

組件的生命週期:

Component({
  /**
   * 對外屬性寫在這兒
   */
  properties: {
 
  },
 
  /**
   * 組件私有變量寫在這兒
   */
  data: {
 
  },
 
  /**
   * 組件所有方法寫在這兒
   */
  methods: {
 
  },
 
  /*組件生命週期*/ 
  lifetimes: {
    created() {
      console.log("組件實例剛剛被創建時執行")
    },
    attached() { 
      console.log("組件實例進入頁面節點樹時執行")
    },
    ready() {
      console.log("組件在視圖層佈局完成後執行")
    },
    moved() {
      console.log("組件實例被移動到節點樹另一個位置時執行")
    },
    detached() {
      console.log(在組件實例被從頁面節點樹移除時執行")
    },
    error() {
      console.log("每當組件方法拋出錯誤時執行")
    },
    
    /*組件所在頁面的生命週期 */
    pageLifetimes: {
      show: function () {
        // 頁面被展示
      },
      hide: function () {
        // 頁面被隱藏
      },
      resize: function (size) {
        // 頁面尺寸變化
      }
    }
   
  }

若是做過Android開發的,可以把組件理解爲片段(Fragment),很有相似之處。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章