微信小程序生命周期

一、应用生命周期

    是指小程序从打开到关闭的全局生命周期，通过app.js 中的会调函数触发

onLaunch：小程序初始化完成时触发，全局只触发一次。
onShow：小程序启动或从后台切到前台时触发。
onHide：小程序从前台切到后台时触发。
onError：小程序发生脚本错误或 API 调用失败时触发。
onPageNotFound：小程序要打开的页面不存在时触
二、页面生命周期（Page 级）
指单个页面从加载到卸载的生命周期，通过页面 js 文件中的回调函数触发。

onLoad：页面加载时触发，接收页面参数（query），只触发一次。
onShow：页面显示 / 切入前台时触发，可多次触发。
onReady：页面初次渲染完成时触发，只触发一次，此时可操作页面 DOM。
onHide：页面隐藏 / 切入后台时触发（如跳转到其他页面）。
onUnload：页面卸载时触发（如关闭当前页面返回上一页）
三、关键执行顺序
小程序启动：App.onLaunch → App.onShow → 首页 onLoad → 首页 onShow → 首页 onReady。
页面跳转：当前页 onHide → 新页面 onLoad → 新页面 onShow → 新页面 onReady。
页面返回：当前页 onUnload → 上一页 onShow。
小程序退后台：页面 onHide → App.onHide。
小程序回前台：App.onShow → 页面 onShow
​​​​​​​以下是微信小程序生命周期回调函数的用法示例，包含代码片段和典型场景说明，帮助你理解实际开发中的应用

一、应用生命周期（app.js）
应用级生命周期贯穿小程序从启动到关闭的全过程，全局仅一个实例。

// app.js
App({
  // 1. 小程序初始化完成（全局只触发1次）
  onLaunch(options) {
    console.log('小程序初始化完成', options);
    // 场景：初始化全局数据、获取用户信息、启动日志上报
    this.globalData = {
      userInfo: null,
      systemInfo: wx.getSystemInfoSync() // 获取设备信息
    };
  },

  // 2. 小程序启动/从后台切到前台（可多次触发）
  onShow(options) {
    console.log('小程序进入前台', options.scene); // options.scene可判断启动场景（如扫码进入、群分享进入等）
    // 场景：刷新全局状态（如重新获取token）、暂停的音乐/视频继续播放
    if (this.globalData.tokenExpired) {
      this.refreshToken(); // 重新获取登录凭证
    }
  },

  // 3. 小程序从前台切到后台（可多次触发）
  onHide() {
    console.log('小程序进入后台');
    // 场景：保存当前状态（如游戏进度）、暂停音乐/视频播放
    this.globalData.lastActiveTime = Date.now(); // 记录后台时间
  },

  // 4. 发生错误时触发
  onError(error) {
    console.error('小程序出错', error);
    // 场景：错误日志上报、提示用户"系统出错，请重试"
    wx.reportAnalytics('app_error', { error: error.message });
  },

  // 5. 页面不存在时触发
  onPageNotFound(res) {
    console.log('页面不存在', res);
    // 场景：跳转到首页或错误页
    wx.redirectTo({ url: '/pages/index/index' });
  },

  // 自定义方法（供页面调用）
  refreshToken() {
    // 调用登录接口逻辑...
  },

  globalData: {} // 全局数据
});
二、页面生命周期（页面 .js 文件，以 pages/index/index.js 为例）
	页面级生命周期针对单个页面，每个页面独立触发。
	

```js
// pages/index/index.js
Page({
  data: {
    list: [], // 页面数据
    timer: null // 定时器示例
  },

  // 1. 页面加载（只触发1次，接收页面参数）
  onLoad(options) {
    console.log('页面加载，参数：', options); // 如从其他页面跳转带来的id=123
    // 场景：初始化页面数据、调用接口获取内容
    const { id } = options;
    this.fetchData(id); // 根据参数请求数据
  },

  // 2. 页面显示（切入前台时触发，可多次触发）
  onShow() {
    console.log('页面显示');
    // 场景：刷新页面数据（如从详情页返回列表页时刷新）、启动定时器
    this.setData({
      timer: setInterval(() => {
        console.log('页面活跃中...');
      }, 1000)
    });
  },

  // 3. 页面初次渲染完成（只触发1次，可操作DOM）
  onReady() {
    console.log('页面渲染完成');
    // 场景：获取页面元素尺寸、初始化Canvas/地图等组件
    const query = wx.createSelectorQuery();
    query.select('#list').boundingClientRect(rect => {
      console.log('列表高度：', rect.height);
    }).exec();
  },

  // 4. 页面隐藏（如跳转到其他页面时触发）
  onHide() {
    console.log('页面隐藏');
    // 场景：清除定时器、暂停动画
    clearInterval(this.data.timer);
  },

  // 5. 页面卸载（如关闭页面返回上一页时触发）
  onUnload() {
    console.log('页面卸载');
    // 场景：取消接口请求、释放全局事件监听
    if (this.requestTask) {
      this.requestTask.abort(); // 取消未完成的请求
    }
  },

  // 自定义方法：请求数据
  fetchData(id) {
    this.requestTask = wx.request({
      url: `https://api.example.com/list?id=${id}`,
      success: res => {
        this.setData({ list: res.data });
      }
    });
  }
});

三、常见场景生命周期触发流程示例
首次打开小程序App.onLaunch → App.onShow → 首页 onLoad → 首页 onShow → 首页 onReady
从首页跳转到详情页（wx.navigateTo）首页 onHide → 详情页 onLoad → 详情页 onShow → 详情页 onReady
从详情页返回首页（wx.navigateBack）详情页 onUnload → 首页 onShow
小程序切到后台（按手机 Home 键）当前页面 onHide → App.onHide
小程序切回前台App.onShow → 当前页面 onShow