微信小程序生命周期

最新推荐文章于 2024-07-12 08:45:58 发布

LIONKINGGO

最新推荐文章于 2024-07-12 08:45:58 发布

阅读量1.8k

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/LIONKINGGO/article/details/128114711

版权

微信小程序生命周期包含了三个部分：

应用级别的生命周期（整个App的生命周期）
页面级别的生命周期（单个页面(page)的生命周期）
组件基本的生命周期（组件(component)的生命周期）

一、应用生命周期（App）

1.执行顺序：

onLoad --> onShow --> onHide--> onError

2.源码实例：

App({
  onLaunch (options) {
    //小程序初始化完成时触发，全局只触发一次
    //云开发的初始化 方便其他页面直接调用云开发的SDK
    //发送请求获取用户的个人信息 方便其他页面使用
    //获取本地存储数据 方便其他页面使用
  },
  onShow (options) {
    //小程序启动或切前台显示时触发。
    //重新启动定时器 继续定时执行功能
    //重新触发异步 获取新的数据
    //重新启动播放器等
  },
  onHide () {
    //小程序从前台进入后台时触发(如 切换到其他的App)。
    //当暂停定时器
    //暂停视频音频的播放
  },
  onError (msg) {
    console.log(msg)
    //小程序发生脚本错误或 API 调用报错时触发。
    //收集错误信息 发送到后台 进行错误日志的记录
    //弹出窗口提示用户
  },
  onPageNotFound(res) {
    wx.redirectTo({  url: 'pages/...' }) 
    //如果是 tabbar 页面，请使用 wx.switchTab
    //小程序要打开的页面不存在时触发。
    //监听报错，弹出窗口提示用户
    //监听报错，重新跳转页面
  }
  onUnhandledRejection(){
    //小程序有未处理的 Promise 拒绝时触发。
    //用在统一捕获处理 可以在该生命周期中处理错误情况 ，一般是由于异步代码出错导致的
  },
  onThemeChange(){
    //系统切换主题时触发。
    //让小程序可以跟着主题的切换 也改变小程序的UI风格，使之体验更好！
  },
  globalData: 'I am global data'
})

二、页面生命周期（page）

1.执行顺序：

onLoad --> onShow --> onReady --> onHide

        当首次加载A页面，A触发的生命周期为：onLoad --> onShow --> onReady；
        从A页面切换到B页面时，A页面触发onHide,B页面触发的生命周期顺序与上面一致；
        当B页面返回到A页面时，触发onUnload,当不清缓存，再次进入A页面时,只触发onShow。

2.源码实例：

Page({
  
  data: {
    //页面的初始数据
  },
  
  onLoad(options) {
    //生命周期函数--监听页面加载
    //页面加载时执行，只执行一次
  },
  
  onReady() {
    //生命周期函数--监听页面初次渲染完成
    //页面初次渲染时执行，只执行一次
  },
  
  onShow() {
    //生命周期函数--监听页面显示
    //页面展示时执行，执行多次
  },
  
  onHide() {
    //生命周期函数--监听页面隐藏
    //页面从前台进入后台时执行
  },

  onUnload() {
    //生命周期函数--监听页面卸载
    //页面卸载时执行
  },
)}

三、组件生命周期（component）

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      //在组件完全初始化完毕、进入页面节点树后被触发,此时，this.data 已被初始化为组件的当前值。
      //这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },

  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },

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

  created: function() {
    // 组件实例刚刚被创建好时触发,此时，组件数据this.data就是在Component构造器中定义的数据 data。此时还不能调用setData。通常情况下，这个生命周期只应该用于给组件this添加一些自定义属性字段。
  },

  ready: function() {
    //在组件在视图层布局完成后执行
  },

  moved: function() {
    //在组件实例被移动到节点树另一个位置时执行
  },

  error: function() {
    //每当组件方法抛出错误时执行
  },
  
})

参考：微信小程序生命周期 - 猫老板的豆 - 博客园

参考：App(Object object) | 微信开放文档

参考：生命周期 | 微信开放文档

参考：组件生命周期 | 微信开放文档