小程序開發-小程序頁面間傳遞數據的方式

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

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。

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