微信小程序之生命周期的深度解析

傷城~ 2021-09-01 03:07 225阅读 0赞

# 效果图 #

![在这里插入图片描述][20200813192135676.gif_pic_center]

# 应用的生命周期 #

// app.js
    App({ 
      /** * 小程序首次被打开触发 */
      onLaunch: function () { 
       console.log('应用 - onLaunch，全局只触发一次')
      },
      
      /** * 小程序初始化完成 / 从后台进入前台触发 */
      onShow (options) { 
        console.log('应用 - onShow，监听小程序显示，小程序从后台进入前台显示也会触发')
      },
      
      /** * 小程序从前台进入后台触发 */
      onHide () { 
        console.log('应用 - onHide，小程序从前台进入后台触发此方法')
      },
      
      /** * 小程序全局对象 */
      globalData: { }
    })

# 页面的生命周期 #

//获取应用实例
    const app = getApp()
    
    Page({ 
      data: { },
      /** * 生命周期函数--监听页面加载 * tabBar页面只调用一次，其他子页面每次都会调用 */
      onLoad: function (options) { 
        console.log('页面 - onLoad，监听页面加载，tabBar页面只调用一次，其他子页面每次都会调用')
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
        console.log('页面 - onShow，监听页面显示')
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
        console.log('页面 - onReady，监听页面初次渲染完成')
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
        console.log('页面 - onHide，监听页面隐藏')
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
        console.log('页面 - onUnload，监听页面卸载')
      },
    
      /** * 页面下拉刷新时执行 * 需要在json文件里配置 "enablePullDownRefresh": true, */
      onPullDownRefresh: function () { 
        console.log('页面 - onPullDownRefresh，页面下拉刷新时执行')
      },
    
      /** * 页面上拉触底事件 */
      onReachBottom: function () { 
        console.log('页面 - onReachBottom，页面上拉触底')
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
        console.log('页面 - onShareAppMessage，分享当前页面')
        return { 
          title: '标题',
          path: '/pages/home/index',
          desc: '描述',
          imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597321894099&di=c8d50d29c860dafc1d509c4501d8fd29&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20181222%2F74ca6aae4b6547b280e0edc1ca6260d5.jpeg',
          success: function(res) { 
            console.log('转发成功')
          },
          fail: function (res) { 
            console.log('转发失败')
          }
        }
      },
    
      /** * 页面滚动时执行 */
      onPageScroll: function() { 
        console.log('页面 - onPageScroll，页面滚动了')
      },
    
      /** * 页面尺寸变化时执行 */
      onResize: function() { 
        console.log('页面 - onResize，页面尺寸变化了')
      },
    
     /** * 点击底部菜单 tabBar 时执行 */
      onTabItemTap(item) { 
        console.log('页面 - onTabItemTap，底部菜单tabBar 点击时执行')
        console.log('tabBar的索引：', item.index)
        console.log('tabBar的路径：',item.pagePath)
        console.log('tabBar的名称：',item.text)
      }
    })

# 自定义组件的生命周期 #

Component({ 
      properties:{ },
      data: { },
      observers: { },
      // 组件生命周期
      lifetimes: { 
       /** * 组件实例刚刚被创建时执行 */
        created: function() { 
          console.log('组件实例刚刚被创建时执行 - created')
        },
        /** * 组件实例进入页面节点树时执行 */
        attached: function() { 
          console.log('组件实例进入页面节点树时执行 - attached')
        },
        /** * 组件在视图层布局完成后执行 */
        ready: function() { 
          console.log('组件在视图层布局完成后执行 - ready')
        },
        /** * 在组件实例被从页面节点树移除时执行 */
        detached: function() { 
          console.log('组件实例被从页面节点树移除时执行 - detached')
        }
      },
      // 组件所在页面的生命周期
      pageLifetimes: { 
        /** * 组件所在页面被展示时执行 */
        show: function() { 
          console.log('组件所在页面的生命周期 - 页面被展示show')
        },
        /** * 组件所在页面被隐藏时执行 */
        hide: function() { 
          console.log('组件所在页面的生命周期 - 页面被隐藏hide')
        },
        /** * 组件所在页面尺寸变化时执行 */
        resize: function(size) { 
          console.log('组件所在页面的生命周期 - 页面尺寸变化resize')
        }
      },
      methods: { }
    })

[20200813192135676.gif_pic_center]: /images/20210813/6427bf65e2d74876b8df60dbd93488ad.png