【小程序】详细比较微信小程序的 onLoad 和 onShow

在微信小程序中，onLoad 和 onShow 都是页面生命周期函数，但它们的触发时机和用途有明显的区别。理解这两者的区别对于编写高效、逻辑清晰的小程序至关重要。

`onLoad`

触发时机：

页面加载时触发，只执行一次。 当页面被创建并首次渲染时调用。
它接收页面跳转带来的参数（通过 options 对象）。

主要用途：

初始化数据： 适用于只需要加载一次，或者在页面首次打开时进行初始化的数据请求和业务逻辑。
接收并处理页面参数： 获取从上一个页面传递过来的参数（例如，商品ID、用户ID等）。
设置页面标题： 根据参数动态设置页面标题。
一次性资源加载： 比如某个不经常变化的配置数据。

举例：

假设有一个商品详情页：

javascript 复制代码

Page({
  data: {
    productId: null,
    productInfo: null
  },
  onLoad: function (options) {
    // options 包含了从上一个页面传递过来的参数
    const productId = options.id;
    this.setData({
      productId: productId
    });
    // 根据 productId 请求商品详情，这个请求只会在页面首次加载时进行
    this.getProductDetail(productId);
    // 动态设置页面标题
    wx.setNavigationBarTitle({
      title: '商品详情'
    });
  },
  getProductDetail: function(id) {
    // 模拟网络请求
    console.log(`onLoad: 首次加载商品ID为 ${id} 的详情`);
    setTimeout(() => {
      this.setData({
        productInfo: {
          id: id,
          name: `商品名称 ${id}`,
          price: 99.99
        }
      });
    }, 500);
  }
});

`onShow`

触发时机：

页面显示/前台时触发，可以多次执行。
在 onLoad 之后会立即触发一次。
当小程序从后台进入前台时（例如，用户从微信聊天界面切换回小程序）。
当从当前页面的子页面（例如，另一个页面，或弹窗、选择器）返回到当前页面时。

主要用途：

数据刷新： 适用于需要频繁更新、实时性要求高的数据，或者在用户从其他页面返回时需要刷新的数据。
检查用户登录状态： 用户可能在其他页面进行了登录/登出操作。
实时性操作： 例如，位置信息更新、消息提示等。
页面可见性相关逻辑： 比如某些动画的启动，或在页面可见时才应该进行的用户行为统计。

举例：

继续上面的商品详情页，如果用户从商品详情页跳转到评论页，发表了评论，然后返回详情页，你可能希望详情页的评论数量或列表能立即更新。

javascript 复制代码

Page({
  data: {
    productId: null,
    productInfo: null,
    commentCount: 0 // 新增评论数量
  },
  onLoad: function (options) {
    const productId = options.id;
    this.setData({
      productId: productId
    });
    this.getProductDetail(productId); // 首次加载商品详情
    // wx.setNavigationBarTitle({ title: '商品详情' }); // 可以在 onLoad 设置
  },
  onShow: function () {
    console.log(`onShow: 页面显示，刷新评论等动态数据`);
    // 每次页面显示时，都去请求最新的评论数量
    this.getCommentCount(this.data.productId);
    // 还可以做其他实时性检查，比如登录状态
    // this.checkLoginStatus();
  },
  getProductDetail: function(id) { /* ...同上... */ },
  getCommentCount: function(productId) {
    // 模拟网络请求获取评论数量
    setTimeout(() => {
      const newCommentCount = Math.floor(Math.random() * 100); // 模拟每次刷新都可能不同
      console.log(`获取到商品 ${productId} 的最新评论数量: ${newCommentCount}`);
      this.setData({
        commentCount: newCommentCount
      });
    }, 300);
  }
});

区别总结

特性	`onLoad`	`onShow`
触发时机	页面首次加载时触发，只执行一次。	页面显示时触发，可以多次执行。
执行顺序	在页面初始化时最先执行。	第一次在 `onLoad` 之后执行，之后每次页面回到前台或从其他页面返回时执行。
参数	接收页面跳转带来的 `options` 参数。	不接收页面跳转参数 (如果需要，应在 `onLoad` 中保存或通过全局状态管理)。
主要用途	页面初始化、获取一次性数据、处理路由参数。	页面数据刷新、登录状态检查、实时性业务逻辑、页面可见性相关的动画/统计。
执行频率	低 (单次)	高 (多次)

页面生命周期简述

一个页面从创建到销毁的常见生命周期顺序是：

onLoad: 页面加载（只执行一次）
onShow: 页面显示（可以多次执行）
onReady: 页面初次渲染完成（只执行一次）
onHide: 页面隐藏（例如跳转到其他页面，或小程序进入后台）
onShow: 页面重新显示（从其他页面返回，或小程序从后台进入前台）
onUnload: 页面卸载（例如关闭当前页面或返回上一个页面栈）

何时选择哪个？

如果数据只需要在页面首次进入时获取一次，并且与页面跳转参数强相关，请放在 onLoad 中。 例如，根据ID获取商品详情、用户配置信息等。
如果数据需要在每次页面显示时都保持最新，或者用户从其他页面操作后需要更新，请放在 onShow 中。 例如，购物车数量、消息列表、用户登录状态、点赞状态等。

合理地使用这两个生命周期函数，可以有效地管理小程序的性能和用户体验。避免在 onShow 中执行过多不必要的复杂逻辑或重复请求，因为这可能会影响页面的流畅性。