微信小程序頁面傳值詳解

 

我們知道，在微信小程序中，從一個頁面轉到另一個頁面，一般情況下可以通過navigate或redirect時候的url來攜帶參數，然后在目標頁面的onLoad函數參數中獲取這些url參數。例如：

1.  
   // 源頁面A相關代碼
2.  
   wx.navigateTo({
3.  
   url: "/pages/mypage/mypage?a=1&b=2"
4.  
   })
5.  
    
6.  
   // 目標頁面B相關代碼
7.  
   Page({
8.  
   onLoad: function (options) {
9.  
   var a = options.a; // 值：1
10.  
    var b = options.b; // 值：2
11.  
    }
12.  
    })
13.  
     

但是，這種方式只有在目標頁面還沒有創建的時候，才有效。因為一個頁面的onLoad方法在頁面的生命周期中，只執行一次。

 

方法1：使用全局數據存儲

• 將要傳遞的數據，存儲在App對象上（比如globalData屬性）。
• 將要傳遞的數據，存儲在小程序的本地數據緩存（Storage）中。

例如，我們在將要退出頁面B的時候，作如下調用：

1.  
   //=== 1. 存儲到app對象上的方式 ========
2.  
   var app = getApp()
3.  
   app.globalData.mydata = { a:1, b:2}; //存儲數據到app對象上
4.  
   wx.navigateBack(); //返回上一個頁面
5.  
    
6.  
   //=== 2.存儲到數據緩存的方式 =========
7.  
   wx.setStorage({
8.  
   key: "mydata",
9.  
   data: {a:1, b:2},
10.  
    success: function () {
11.  
    wx.navigateBack(); //返回上一個頁面
12.  
    }
13.  
    })

這樣一來，當返回到上一個頁面的時候，可以通過讀取這些全局存儲區域，來獲取到我們需要的數據。

不過，這種方式也是有很明顯的缺點的。由於是全局數據存儲，所以當你存入了那些數據后，必須謹慎的去管理這些全局數據（何時被銷毀），否則一不小心，就會產生副作用。

方法2：從頁面路由棧中直接獲取和操作目標Page對象

這種方式，是通過調用小程序的API: getCurrentPages()，來獲取當前頁面路由棧的信息，這個路由棧中按照頁面的路由順序存放着相應的Page對象，我們可以很容易的獲取到上一級頁面的完整Page對象，從而使直接調用Page對象的屬性和方法成為可能。

如下所示：

1.  
   var pages = getCurrentPages();
2.  
   var currPage = pages[pages.length - 1]; //當前頁面
3.  
   var prevPage = pages[pages.length - 2]; //上一個頁面
4.  
    
5.  
   //直接調用上一個頁面的setData()方法，把數據存到上一個頁面中去
6.  
   prevPage.setData( {
7.  
   mydata: {a:1, b:2}
8.  
   })

比起全局數據存儲的方式，這種方式在邏輯上要清晰得多，也不存在對數據的銷毀有額外的管理工作。