1. 程式人生 > >微信小程序頁面傳值詳解

微信小程序頁面傳值詳解

comm glob ring div ear article tle 使用 dsm

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

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

但是,這種方式只有在目標頁面還沒有創建的時候,才有效。因為一個頁面的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. //=== 2.存儲到數據緩存的方式 =========
  6. wx.setStorage({
  7. key: "mydata",
  8. data: {a:1, b:2},
  9. success: function () {
  10. wx.navigateBack(); //返回上一個頁面
  11. }
  12. })

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

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

方法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. //直接調用上一個頁面的setData()方法,把數據存到上一個頁面中去
  5. prevPage.setData({
  6. mydata: {a:1, b:2}
  7. })

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

微信小程序頁面傳值詳解