小程式頁頁間傳遞資料的方式

最近在做小程式項目，發現小程式的頁間常常需要傳遞一些資料。根據自己的了解和熟悉，針對不同的資料要求，總結到有幾種不同的傳資料方式，以下做一個簡單的介紹歸納。

第一種：頁面跳轉時透過url傳遞

使用wx.navigateTo 與wx.redirectTo 的時候，可以將部分數據放在url 裡面，並在新頁面onLoad 的時候取得且初始化。

//pageA.js

// Navigate
wx.navigateTo({
  url: '../pageB/pageB?name=lin&gender=male',
})

// Redirect
wx.redirectTo({
  url: '../pageB/pageB?name=lin&gender=male',
})

// pageB.js
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender);
    this.setData({
      option: option
    });
  }
})

需要注意的問題：

1. 使用wx.navigateTo 與wx.redirectTo時，不允許跳到tab 所包含的頁面；
2. onLoad只執行一次；

#適用：
這種方式一般適用於少數頁面之間需要少量資料傳遞，如B頁面需要A頁面中的1-2個資料等等。

第二種：使用全域變數來傳遞

在app.js 檔案中定義全域變數globalData，舊頁面將要傳遞的資料賦值存放在裡面，新頁面呼叫全域變數取得傳遞資料值。

// app.js

App({
     // 全局变量
  globalData: {
    name: null
  }
})

//pageA.js
···
getApp().globalData.name = "lin";


//pageB.js
···
this.setData({
  userName: getApp().globalData.name
});

要注意的問題：

1. 使用的時候，直接使用 getApp() 拿到儲存的資訊。

適用：
這種方式一般適用於多個頁面或全部頁面都需要取得使用同一個數據，例如一開始進入首頁就取得到的使用者資訊等；

第三種：使用本機快取

使用小程式中的本機快取Storage，舊頁將傳遞資料存入快取中，新頁面透過呼叫取得快取的API得到數據。

//pageA.js
···
wx.setStorageSync('sessionId', res.sessionId);


//pageB.js
···
var sessionId = wx.getStorageSync('sessionId');

要注意的問題：

1. Storage每次存入會覆寫原來該 key 對應的內容。
2. 如果使用者主動刪除小程式或因儲存空間原因而被系統清理，Storage中資料將會被清除。
3. 單一 key 允許儲存的最大資料長度為 1MB，所有資料儲存上限為 10MB。

適用：
這種方式一般適用於即使小程式退出然後再重新進入，也要保留的數據，類似於登入狀態的保留等。

推薦教學：《微信小程式》

以上是小程式頁頁間傳遞資料的方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！