微信小程序生命周期详解

qq_37884031

1100人浏览 · 2025-07-16 10:46:42

qq_37884031 · 2025-07-16 10:46:42 发布

一、小程序生命周期概述

微信小程序的生命周期是指小程序从启动到销毁的整个过程，包含了多个关键节点和回调函数。理解小程序的完整生命周期对于开发高质量的小程序应用至关重要，它帮助开发者掌握资源分配、数据初始化和清理的时机。

小程序生命周期主要分为三个层次：

应用生命周期 - 整个小程序的生命周期
页面生命周期 - 单个页面的生命周期
组件生命周期 - 自定义组件的生命周期

二、应用生命周期

应用生命周期指的是整个小程序的存活周期，从启动到销毁的全过程。开发者可以在app.js中通过App()函数注册小程序，并定义以下生命周期回调函数：

主要回调函数

onLaunch(options)
- 小程序初始化时触发，全局只触发一次
- 参数options包含小程序启动时的场景值、路径等
onShow(options)
- 小程序启动或从后台进入前台时触发
- 参数options与onLaunch相同，包含场景值等信息
onHide()
- 小程序从前台进入后台时触发
- 适合在此保存应用状态
onError(error)
- 小程序发生脚本错误或API调用失败时触发
- 参数error包含错误信息
onPageNotFound(options)
- 要打开的页面不存在时触发
- 可以进行页面重定向处理

代码示例

// app.js
App({
  onLaunch(options) {
    console.log('小程序初始化', options);
    // 可以在这里进行登录验证、获取系统信息等操作
  },
  onShow(options) {
    console.log('小程序显示', options.scene);
  },
  onHide() {
    console.log('小程序隐藏');
  },
  onError(err) {
    console.error('小程序错误:', err);
  },
  globalData: {
    userInfo: null
  }
});

三、页面生命周期

页面生命周期是指小程序中单个页面的存活周期，每个页面都有自己的生命周期。开发者可以在页面的.js文件中通过Page()函数注册页面，并定义以下生命周期回调函数：

主要回调函数

onLoad(options)
- 页面加载时触发，一个页面只会调用一次
- 参数options包含打开当前页面路径中的参数
onShow()
- 页面显示/切入前台时触发
onReady()
- 页面初次渲染完成时触发，一个页面只会调用一次
- 表示页面已准备妥当，可以和视图层进行交互
onHide()
- 页面隐藏/切入后台时触发
onUnload()
- 页面卸载时触发，如页面被重定向或navigateBack到其他页面
onPullDownRefresh()
- 用户下拉刷新时触发
- 需要先在页面配置中开启enablePullDownRefresh
onReachBottom()
- 用户上拉触底时触发
onShareAppMessage(options)
- 用户点击右上角分享时触发
- 需要return一个对象，自定义分享内容

代码示例

// pages/index/index.js
Page({
  data: {
    title: '首页'
  },
  onLoad(options) {
    console.log('页面加载', options);
    // 可以在这里根据options参数初始化页面数据
  },
  onShow() {
    console.log('页面显示');
  },
  onReady() {
    console.log('页面初次渲染完成');
  },
  onHide() {
    console.log('页面隐藏');
  },
  onUnload() {
    console.log('页面卸载');
  },
  onPullDownRefresh() {
    console.log('下拉刷新');
    // 处理刷新逻辑
    wx.stopPullDownRefresh();
  },
  onReachBottom() {
    console.log('触底加载');
    // 加载更多数据
  },
  onShareAppMessage() {
    return {
      title: '分享标题',
      path: '/pages/index/index'
    }
  }
});

四、组件生命周期

自定义组件也有自己的生命周期，从创建到销毁的整个过程。开发者可以在Component构造器中定义这些生命周期函数。

主要生命周期函数

created()
- 组件实例刚刚被创建时执行
- 此时还不能调用setData
attached()
- 组件实例进入页面节点树时执行
- 此时可以调用setData初始化数据
ready()
- 组件在视图层布局完成后执行
- 类似于页面的onReady
moved()
- 组件实例被移动到节点树另一个位置时执行
detached()
- 组件实例从页面节点树移除时执行
- 适合清理工作
error(err)
- 组件方法抛出错误时执行

新增的生命周期函数（基础库2.2.3起）

show()
- 组件所在的页面被展示时执行
hide()
- 组件所在的页面被隐藏时执行
resize(size)
- 组件所在的页面尺寸变化时执行

代码示例

// components/my-component/my-component.js
Component({
  lifetimes: {
    created() {
      console.log('组件实例被创建');
    },
    attached() {
      console.log('组件进入页面节点树');
      this.setData({ message: 'Hello' });
    },
    ready() {
      console.log('组件视图层布局完成');
    },
    detached() {
      console.log('组件从页面节点树移除');
    }
  },
  // 旧式定义方式（兼容）
  attached() {
    console.log('旧式attached');
  },
  // 页面生命周期
  pageLifetimes: {
    show() {
      console.log('页面展示');
    },
    hide() {
      console.log('页面隐藏');
    },
    resize(size) {
      console.log('页面尺寸变化', size);
    }
  }
});