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

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')}}
  })
  

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！