微信小程序组件、页面、整改小程序的生命周期

整个小程序的生命周期:

// 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),很有相似之处。

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