1. 程式人生 > 實用技巧 >小程式開發-小程式頁面間傳遞資料的方式

小程式開發-小程式頁面間傳遞資料的方式

在小程式開發中,我們小程式的不同頁面間經常需要傳遞一些資料。針對不同的資料要求,有幾種不同的傳遞資料方式。

1. 頁面跳轉通過url傳遞資料

在使用wx.navigateTo或者wx.redirectTo的時候,可以將部分資料放在url裡面,在新頁面onLoad的時候獲取且初始化。

//pageA.js

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

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

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

需要注意的是:

  • wx.navigateTo或者wx.redirectTo, 不能跳轉到tab說包含的頁面
  • onLoad 只會執行一次

這種方式比較適合兩個頁面之間傳遞少量的資料。

2. 使用全域性變數傳遞資料

app.js中可以定義全域性變數globalData, 舊頁面將要傳遞的資料賦值存放在裡面,新頁面呼叫全域性變數獲取傳遞資料值。

// app.js

App({
     // 全域性變數
  globalData: {
    name: null
  }
})

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


//pageB.js
···
this.setData({
  userName: getApp().globalData.name
});
  • 使用的時候通過getApp()拿到儲存的資訊
  • 這種方式一般適用於多個頁面或者全部頁面都需要獲取使用同一個資料,比如一開始進入首頁就獲取到的使用者資訊等;

3. 使用本地快取

使用小程式中的本地快取Storage,舊頁面將傳遞資料存入快取中,新頁面通過呼叫獲取快取的API得到資料。

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


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

注意:

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

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