微信小程序生命周期笔记

正在努力的团子
306 阅读4分钟

个人学习记录笔记，如有错误感谢指出

微信小程序生命周期

微信小程序的生命周期分为三个层级：应用生命周期、页面生命周期和组件生命周期。

1. 应用生命周期 (App)

应用生命周期在 app.js 中定义，控制整个小程序的生命周期。

App({
  // 小程序初始化完成时触发，全局只触发一次
  onLaunch(options) {
    // options 包含场景值、启动参数等
  },
  
  // 小程序启动或从后台进入前台显示时触发
  onShow(options) {
    // 可在此处获取场景值，判断小程序进入场景
  },
  
  // 小程序从前台进入后台时触发
  onHide() {
    // 可做一些数据保存、清理工作
  },
  
  // 小程序发生脚本错误或 API 调用报错时触发
  onError(error) {
    // 可在此处统一处理错误
  },
  
  // 小程序要打开的页面不存在时触发
  onPageNotFound(res) {
    // 可在此处做统一的页面不存在处理
  },
  
  // 小程序运行脚本出现未处理的 Promise 拒绝时触发
  onUnhandledRejection(res) {
    // 处理未捕获的 Promise 异常
  },
  
  // 系统主题变化时触发
  onThemeChange(res) {
    // 响应系统主题变化
  }
})

2. 页面生命周期 (Page)

页面生命周期在每个页面的 JS 文件中定义，控制单个页面的生命周期。

Page({
  // 页面加载时触发，一个页面只会调用一次
  onLoad(options) {
    // options 为页面跳转所带来的参数
  },
  
  // 页面显示/切入前台时触发
  onShow() {
    // 页面显示时可执行的操作
  },
  
  // 页面初次渲染完成时触发，一个页面只会调用一次
  onReady() {
    // 可在此处获取并设置页面元素
  },
  
  // 页面隐藏/切入后台时触发
  onHide() {
    // 页面隐藏时可执行的操作
  },
  
  // 页面卸载时触发
  onUnload() {
    // 页面销毁时执行的清理操作
  },
  
  // 下拉刷新时触发
  onPullDownRefresh() {
    // 需要在页面配置中开启 enablePullDownRefresh
  },
  
  // 上拉触底时触发
  onReachBottom() {
    // 可用于加载更多数据
  },
  
  // 用户点击右上角分享时触发
  onShareAppMessage(res) {
    // 定义分享内容
    return {
      title: '分享标题',
      path: '/pages/index/index'
    }
  },
  
  // 页面滚动时触发
  onPageScroll(res) {
    // res.scrollTop 为页面在垂直方向已滚动的距离
  },
  
  // 页面尺寸变化时触发
  onResize(res) {
    // 响应页面尺寸变化
  },
  
  // 当前是 tab 页时，点击 tab 时触发
  onTabItemTap(item) {
    // item 包含 index、pagePath、text 属性
  }
})

3. 组件生命周期 (Component)

组件生命周期在自定义组件的 JS 文件中通过 lifetimes 定义。

Component({
  lifetimes: {
    // 组件实例刚创建时触发
    created() {
      // 此时不能调用 setData
    },
    
    // 组件实例进入页面节点树时触发
    attached() {
      // 此时可以调用 setData
    },
    
    // 组件在视图层布局完成后触发
    ready() {
      // 可获取组件尺寸等信息
    },
    
    // 组件实例被移动到节点树另一个位置时触发
    moved() {
      // 组件位置变化
    },
    
    // 组件实例被从页面节点树移除时触发
    detached() {
      // 组件销毁时的清理工作
    },
    
    // 组件实例销毁前触发
    error(error) {
      // 组件错误处理
    }
  },
  
  // 组件所在页面的生命周期函数
  pageLifetimes: {
    // 组件所在页面显示时触发
    show() {
      // 页面显示时组件可执行的操作
    },
    
    // 组件所在页面隐藏时触发
    hide() {
      // 页面隐藏时组件可执行的操作
    },
    
    // 组件所在页面尺寸变化时触发
    resize(size) {
      // 响应页面尺寸变化
    }
  }
})

4. 生命周期执行顺序

小程序启动流程

  1. App.onLaunch
  2. App.onShow
  3. 页面 Page.onLoad
  4. 页面 Page.onShow
  5. 页面 Page.onReady

小程序切后台流程

  1. 页面 Page.onHide
  2. App.onHide

小程序切前台流程

  1. App.onShow
  2. 页面 Page.onShow

页面跳转流程

  1. 当前页面 Page.onHide
  2. 新页面 Page.onLoad
  3. 新页面 Page.onShow
  4. 新页面 Page.onReady

页面返回流程

  1. 当前页面 Page.onUnload
  2. 返回页面 Page.onShow

组件创建流程

  1. Component.created
  2. Component.attached
  3. Component.ready

5. 注意事项

  1. 数据初始化：

    • 应用级数据在 App.onLaunch 中初始化
    • 页面数据在 Page.onLoad 中初始化
    • 组件数据在 Component.attached 中初始化

  2. 网络请求：

    • 页面的主要数据请求应在 Page.onLoad 中进行
    • 需要每次页面显示都刷新的数据可在 Page.onShow 中请求

  3. 资源释放：

    • 页面资源释放应在 Page.onUnload 中进行
    • 组件资源释放应在 Component.detached 中进行

  4. 性能优化：

    • 避免在 App.onLaunch 中进行耗时操作
    • 合理使用 Page.onReady 进行视图相关操作

  5. 页面栈限制：

    • 微信小程序页面栈最多10层，超过会导致无法正常跳转
avatar
文章
阅读
粉丝