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

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微信小程序生命周期 应用生命周期 页面生命周期 组件生命周期_第1张图片
  • 注意点:

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

1.4.2 页面隐藏

  • 触发顺序:

    • 组件所在页面生命周期(pageLifetimes):hide
    • 隐藏页面的生命周期:onHide
    • 跳转页面的生命周期:onLoad -> onShow -> onReady
      微信小程序生命周期 应用生命周期 页面生命周期 组件生命周期_第2张图片
  • 注意点:

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

1.4.3 页面卸载

  • 触发顺序

    • 卸载页面的生命周期:onUnload
    • 组件的生命周期:detached
    • 加载页面的生命周期:onLoad -> onShow -> onReady
      微信小程序生命周期 应用生命周期 页面生命周期 组件生命周期_第3张图片
  • 注意点:

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

1.5 示例代码

1.5.1 目录树

微信小程序生命周期 应用生命周期 页面生命周期 组件生命周期_第4张图片

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

你可能感兴趣的:(微信小程序,微信小程序,小程序,面试,前端)