在微信小程序中，onLoad 和 onShow 都是頁面生命週期函數，但它們的觸發時機和用途有明顯的區別。理解這兩者的區別對於編寫高效、邏輯清晰的小程序至關重要。

onLoad

觸發時機：

  • 頁面加載時觸發，只執行一次。 當頁面被創建並首次渲染時調用。
  • 它接收頁面跳轉帶來的參數（通過 options 對象）。

主要用途：

  • 初始化數據： 適用於只需要加載一次，或者在頁面首次打開時進行初始化的數據請求和業務邏輯。
  • 接收並處理頁面參數： 獲取從上一個頁面傳遞過來的參數（例如，商品ID、用户ID等）。
  • 設置頁面標題： 根據參數動態設置頁面標題。
  • 一次性資源加載： 比如某個不經常變化的配置數據。

舉例：
假設有一個商品詳情頁：

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 之後會立即觸發一次。
  • 當小程序從後台進入前台時（例如，用户從微信聊天界面切換回小程序）。
  • 當從當前頁面的子頁面（例如，另一個頁面，或彈窗、選擇器）返回到當前頁面時。

主要用途：

  • 數據刷新： 適用於需要頻繁更新、實時性要求高的數據，或者在用户從其他頁面返回時需要刷新的數據。
  • 檢查用户登錄狀態： 用户可能在其他頁面進行了登錄/登出操作。
  • 實時性操作： 例如，位置信息更新、消息提示等。
  • 頁面可見性相關邏輯： 比如某些動畫的啓動，或在頁面可見時才應該進行的用户行為統計。

舉例：
繼續上面的商品詳情頁，如果用户從商品詳情頁跳轉到評論頁，發表了評論，然後返回詳情頁，你可能希望詳情頁的評論數量或列表能立即更新。

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 中保存或通過全局狀態管理)。

主要用途

頁面初始化、獲取一次性數據、處理路由參數。

頁面數據刷新、登錄狀態檢查、實時性業務邏輯、頁面可見性相關的動畫/統計。

執行頻率

低 (單次)

高 (多次)

頁面生命週期簡述

一個頁面從創建到銷燬的常見生命週期順序是：

  1. onLoad: 頁面加載（只執行一次）
  2. onShow: 頁面顯示（可以多次執行）
  3. onReady: 頁面初次渲染完成（只執行一次）
  4. onHide: 頁面隱藏（例如跳轉到其他頁面，或小程序進入後台）
  5. onShow: 頁面重新顯示（從其他頁面返回，或小程序從後台進入前台）
  6. onUnload: 頁面卸載（例如關閉當前頁面或返回上一個頁面棧）

何時選擇哪個？

  • 如果數據只需要在頁面首次進入時獲取一次，並且與頁面跳轉參數強相關，請放在 onLoad 中。 例如，根據ID獲取商品詳情、用户配置信息等。
  • 如果數據需要在每次頁面顯示時都保持最新，或者用户從其他頁面操作後需要更新，請放在 onShow 中。 例如，購物車數量、消息列表、用户登錄狀態、點贊狀態等。

合理地使用這兩個生命週期函數，可以有效地管理小程序的性能和用户體驗。避免在 onShow 中執行過多不必要的複雜邏輯或重複請求，因為這可能會影響頁面的流暢性。