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

最新推荐文章于 2024-03-11 04:00:00 发布

楼兮诺

最新推荐文章于 2024-03-11 04:00:00 发布

阅读量434

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序面试前端

本文链接：https://blog.csdn.net/louxinuo/article/details/125895684

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

<!--index.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;">我是页面1</view>

  <pageChild></pageChild>
</view>

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;">我是页面2</view>
</view>

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>

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