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

1.生命周期

1.1 应用生命周期

• onLaunch() 监听小程序初始化 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
• onShow() 监听小程序显示 当小程序启动，或从后台进入前台显示，会触发 onShow
• onHide() 监听小程序隐藏 当小程序从前台进入后台，会触发 onHide
• onError() 错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上 错误信息

1.2 页面生命周期

• onLoad 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中 的参数
• onShow() 页面显示/切入前台时触发
• onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层 进行交互
• onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
• onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时

1.3 组件生命周期

1.3.1 组件生命周期函数

• created() 在组件实例刚刚被创建时执行

  • 组件实例刚被创建好的时候，created 生命周期函数会被触发
  • 此时还不能调用 setData
  • 通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

• attached()在组件实例进入页面节点树时执行

  • 在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发
  • 此时， this.data 已被初始化完毕
  • 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）

• ready() 组件在视图层布局完成后执行

• moved() 在组件实例被移动到节点树另一个位置时执行

• detached() 在组件实例被从页面节点树移除时执行

  • 在组件离开页面节点树后， detached 生命周期函数会被触发
  • 退出一个页面（页面卸载）时，会触发页面内每个自定义组件的 detached 生命周期函数
  • 此时适合做一些清理性质的工作

• error() 每当组件方法抛出错误时执行

• 建议定义在lifetimes节点下

    lifetimes: {
      attached: function() {
        // 在组件实例进入页面节点树时执行
      },
      detached: function() {
        // 在组件实例被从页面节点树移除时执行
      }
    }
  

1.3.2 组件所在页面生命周期

• show() 组件所在的页面被展示时执行
• hide() 组件所在的页面被隐藏时执行
• resize() 组件所在的页面尺寸变化时执行
• 定义在pageLifetimes节点下

1.4 执行顺序

1.4.1 加载(以应用加载为例)

• 触发顺序

  • 应用的生命周期：onLaunch
  • 应用的生命周期：onShow
  • 组件的生命周期：created
  • 组件的生命周期：attached
  • 页面的生命周期：onLoad
  • 组件所在页面生命周期(pageLifetimes)：show
  • 页面的生命周期：onShow
  • 组件的生命周期：ready
  • 页面的生命周期：onReady

• 注意点：

  • 页面的 onReady 在 onShow后边执行
  • 组件和页面的生命周期是：组件先 created、attached，而后页面再 onLoad，随后组件所在页面生命周期 show，而后页面 onShow，然后组件 ready，页面 onReady

1.4.2 页面隐藏

• 触发顺序：

  • 组件所在页面生命周期(pageLifetimes)：hide
  • 隐藏页面的生命周期：onHide
  • 跳转页面的生命周期：onLoad -> onShow -> onReady
    

• 注意点：

  • 组件所在页面隐藏时，该组件并不会 detached，仅触发组件所在页面生命周期(pageLifetimes)的 hide

1.4.3 页面卸载

• 触发顺序

  • 卸载页面的生命周期：onUnload
  • 组件的生命周期：detached
  • 加载页面的生命周期：onLoad -> onShow -> onReady
    

• 注意点：

  • 页面先卸载，组件再 detached
  • 页面卸载的时候，并不会触发 onHide

1.5 示例代码

1.5.1 目录树

1.5.2 app.json

pages 节点替换成如下代码

  "pages": [
    "pages/page1/page1",
    "pages/page2/page2",
    "pages/page3/page3"
  ]

1.5.3 page1页面

• wxml

  
  <view class="container" bindtap="clickPage">
    <view data-index="1" style="margin-top: 20rpx;">页面1 页面初始化view>
    <view data-index="2" style="margin-top: 20rpx;">页面2 验证页面1隐藏view>
    <view data-index="3" style="margin-top: 20rpx;">页面3 验证页面1销毁view>
  
    <view style="width: 300rpx; height: 300rpx; background-color: red; color: #fff;margin-top: 20rpx;">我是页面1view>
  
    <pageChild>pageChild>
  view>
  

• js

  Page({
    onLoad() {
      console.log('page1 -----> onLoad')
    },
    onShow() {
      console.log('page1 -----> onShow')
    },
    onReady() {
      console.log('page1 -----> onReady')
    },
    onHide() {
      console.log('page1 -----> onHide')
    },
    onUnload() {
      console.log('page1 -----> onUnload')
    },
  
    clickPage(e) {
      const {index} = e.target.dataset
      // index 为字符型
      if(index === '2') {
        wx.navigateTo({
          url: '/pages/page2/page2',
        })
      } else {
        wx.redirectTo({
          url: '/pages/page3/page3',
        })
      }
    } 
  })
  

• json

  {
    "usingComponents": {
      "pageChild": "/components/pageChild/pageChild"
    }
  }
  

1.5.4 page2页面

• wxml

  <view class="container" bindtap="clickPage">
    <view style="width: 300rpx; height: 300rpx; background-color: red; color: #fff;margin-top: 20rpx;">我是页面2view>
  view>
  

• js

  Page({
    data: {
      motto: 'Hello World'
    },
    onLoad() {
      console.log('page2 -----> onLoad')
    },
    onShow() {
      console.log('page2 -----> onShow')
    },
    onReady() {
      console.log('page2 -----> onReady')
    },
    onHide() {
      console.log('page2 -----> onHide')
    },
    onUnload() {
      console.log('page2 -----> onUnload')
    }
  })
  

• page3页面同该页面一样，仅改变标识 2 替换为 3

1.5.5 pageChild组件

• wxml

  <view>
    <view style="width: 300rpx; height: 300rpx; background-color: red; color: #fff;margin-top: 20rpx;">我是自定义组件view>
  view>
  

• js

  Component({
    lifetimes: {
      created () {
        console.log('component -----> created')
      },
      attached () {
        console.log('component -----> attached')
      },
      ready () {
        console.log('component -----> ready')
      },
      moved () {
        console.log('component -----> attached')
      },
      detached () {
        console.log('component -----> detached')
      },
      error () {
        console.log('component -----> detached')
      }
    },
  
    pageLifetimes: {
      show () {
        console.log('component -----> pageLife -----> show')
      },
      hide () {
        console.log('component -----> pageLife -----> hide')
      },
      resize () {
        console.log('component -----> pageLife -----> resize')
      }
    }
  })