小程序的全局生命周期和页面级生命周期

在微信小程序开发中，生命周期函数是开发者必须掌握的重要概念。小程序有全局生命周期和页面级生命周期两个层级。掌握这些生命周期函数的执行顺序和作用，可以帮助开发者更好地管理小程序的运行状态和页面的交互逻辑。

1. 全局生命周期

全局生命周期函数定义在小程序的 app.js 文件中，主要用于控制小程序的全局行为，比如启动、切前后台等。

1.1 全局生命周期函数

以下是全局生命周期函数的列表及其作用：

onLaunch：小程序初始化时触发，仅触发一次。
onShow：小程序启动，或从后台进入前台时触发。
onHide：小程序从前台进入后台时触发。
onError：小程序运行发生错误时触发。
onPageNotFound：页面不存在时触发。

代码示例：

// app.js
App({
  // 小程序初始化
  onLaunch(options) {
    console.log('小程序初始化');
    console.log('启动参数:', options);
  },
  
  // 小程序显示
  onShow(options) {
    console.log('小程序进入前台');
    console.log('启动参数:', options);
  },

  // 小程序隐藏
  onHide() {
    console.log('小程序进入后台');
  },

  // 小程序错误
  onError(msg) {
    console.error('小程序错误:', msg);
  },

  // 页面不存在
  onPageNotFound(res) {
    console.error('页面不存在:', res.path);
    wx.redirectTo({
      url: '/pages/index/index' // 跳转到首页
    });
  }
});

详细解释：

onLaunch 适合初始化操作，例如获取用户信息、配置全局变量。
onShow 可用于记录用户行为或启动埋点统计。
onHide 可用来保存数据或清理无用的资源。
onError 是捕获全局异常的关键，可以记录错误日志。
onPageNotFound 是 404 错误处理的入口，用于引导用户。

2. 页面级生命周期

页面级生命周期函数定义在每个页面的 page.js 文件中，用于控制页面的状态变化。每个页面都有独立的生命周期，与全局生命周期互不干扰。

2.1 页面级生命周期函数

以下是页面级生命周期函数的列表及其作用：

onLoad：页面加载时触发，接收页面参数。
onShow：页面显示时触发。
onReady：页面初次渲染完成时触发。
onHide：页面隐藏时触发。
onUnload：页面卸载时触发。

2.2 页面级事件处理

onPullDownRefresh：处理下拉刷新事件。
onReachBottom：处理页面滚动到底部事件。
onShareAppMessage：处理页面分享事件。

代码示例：

// pages/index/index.js
Page({
  // 页面加载时触发
  onLoad(options) {
    console.log('页面加载:', options);
    this.setData({ pageParam: options.id || '默认值' });
  },

  // 页面显示时触发
  onShow() {
    console.log('页面显示');
  },

  // 页面渲染完成时触发
  onReady() {
    console.log('页面渲染完成');
  },

  // 页面隐藏时触发
  onHide() {
    console.log('页面隐藏');
  },

  // 页面卸载时触发
  onUnload() {
    console.log('页面卸载');
  },

  // 下拉刷新事件
  onPullDownRefresh() {
    console.log('用户下拉刷新');
    setTimeout(() => {
      wx.stopPullDownRefresh(); // 停止下拉刷新
    }, 1000);
  },

  // 页面滚动到底部事件
  onReachBottom() {
    console.log('页面滚动到底部');
  },

  // 页面分享事件
  onShareAppMessage() {
    return {
      title: '小程序示例',
      path: '/pages/index/index'
    };
  }
});

详细解释：