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

浅浅的花香味﹌ 2021-10-29 07:36 484阅读 0赞

## 1. 生命周期 App（全局） ##

位置：项目根目录app.js文件

App({
      onLaunch (options) {
        // 
        console.log('小程序初始化')
    
      },
      onShow(options) {
        console.log('监听小程序启动或切前台')
      },
      onHide() {
        console.log('监听小程序切后台')
      },
    
      onError(msg) {
        console.log('错误监听函数')
      },
      onPageNotFound(res) {
        console.log('小程序要打开的页面不存在时触发');
        wx.redirectTo({ // 重定向
          url: 'pages/...'
        }) // 如果是 tabbar 页面，请使用 wx.switchTab
      }
      
    })

## 2. 页面生命周期 ##

// pages/a.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
      },
     /*页面生命周期*/
     onReady: function () {
        console.log('监听页面初次渲染完成')
    
      },
      onShow: function () {
        console.log('监听页面显示')
      },
      onHide: function () {
        console.log('监听页面隐藏')
    
      },
      onUnload: function () {
        console.log('监听页面卸载')
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

## 3. 组件生命周期 ##

// pages/myComponent.js
    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 () {
            // 页面被展示
            console.log("页面被展示")
          },
          hide: function () {
            // 页面被隐藏
            console.log("页面被隐藏")
          },
          resize: function (size) {
            // 页面尺寸变化
            console.log("页面尺寸变化")
          }
        }
       
      }
     
    })

转载于:https://www.cnblogs.com/dobeco/p/11296609.html