開發 | 如何在微信小程序的頁面間傳遞數據？

咱們在以前發佈太小程序頁面傳值方法的簡單介紹，說明了在小程序開發中，兩種常見的頁面之間傳值方法。

本期，知曉程序（微信號 zxcx0101）爲你帶來的是「倒數記日」小程序開發者帶來的，小程序開發中，有關頁面間數據傳遞的更多方法。

---

文 | 小日子先生

在微信小程序的開發中，咱們會常常遇到頁面間數據傳遞或者相互影響的問題。在實際的開發過程當中，能夠經過如下幾種方法來實現。

使用全局變量

全局變量其實是定義了一個全局的對象，並在每一個頁面中引入。

在初始化代碼的時候，小程序會讀取一個 app.js 的文件，在這裏咱們能夠定義咱們所須要的全局變量。

//app.js ... App({ globalData : { foo : 'bar' } });

而後在頁面中，能夠經過 getApp() 方法獲取到全局應用對象，能夠對全局變量進行讀取並更改：

//page.js ... var app = getApp() var getFoo = app.globalData.foo app.globalData.foo = 'fun'

因爲 app.js 在項目中是用來作基礎配置的，所以不建議將不少變量放在這裏配置。通常狀況下會將一些持久化的常量配置在這裏，對於常常須要變更的量不建議用這個方法。

使用本地緩存

本地緩存是微信小程序提供的一個功能，能夠將用戶產生的數據作本地的持久化，相似於 NoSQL，能夠進行讀取和修改的操做。

那麼在不一樣的頁面之間，如何利用它，進行數據的交互呢？

假設咱們在 A 頁面保存了用戶的信息。

// pageA.js ... var developer = { name: 'raymond', gender: 'male' } wx.setStorageSync('developer', developer);

這樣作，這個數據就存在了本地。當在 B 頁面須要使用的時候，能夠直接的獲取到數據池中的數據，並進行 CRUD 操做：

//pageB.js ... // Retrieve var developer = (wx.getStorageSync('developer') || []) // Update developer.name = 'Jiayang' wx.setStorageSync('developer', developer); // Delete wx.removeStorage({ key: 'developer' })

須要注意的是，在回到 A 頁面的時候，小程序須要從新讀取數據。這時候，能夠選擇放在生命週期的 onShow 中對數據從新加載

父級往子級頁面（模板）的數據傳遞

咱們一般會在頁面之間進行跳轉、重定向的操做。這時候，咱們能夠選擇將部分數據放在 url 裏面，並在新頁面 onLoad 的時候進行初始化。

pageC.js ... // Navigate wx.navigateTo({ url: '../pageD/pageD?name=raymond&gender=male', }) // Redirect wx.redirectTo({ url: '../pageD/pageD?name=raymond&gender=male', })

在 D 頁面中，咱們能夠這樣接收到到所傳進來的參數：

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

wx.navigateTo 和 wx.redirectTo 不容許跳轉到 tab 所包含的頁面，只能用 wx.switchTab 跳轉。須要注意的是，wx.switchTab 中的 url 不能傳參數。

微信新提供的 wx.reLaunch 接口能夠傳入參數。

另外，在頁面中咱們一般會用到一些組件模板，所以在父子之間也會有相應的數據傳遞。

使用 name 屬性，做爲模板的名字。而後在這裏面使用 is 屬性，聲明須要的使用的模板。

{{index}}: {{msg}}
Time: {{time}}

而後將模板所須要的 data 傳入，如：

<template is="msgItem" data="{{...item}}"/>

Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } })

傳入模板的除了變量，還能夠是事件方法對象。例如，模板中的點擊事件，能夠傳遞到使用模板的元素中。

經過獲取到頁面對象進行數據操做

這個方法的精髓，是經過獲取到其餘頁面的對象原型，而後經過原型方法 setData 對當前對象管理的 data 進行修改，示例以下：

//pageE.js ... Page({ data: { index: 1 } })

當跳轉到下一個頁面 F 以後，假定在 F 中有操做須要對 E 中的數據有修改，則可使用如下方法：

pageF.js
...
Page({
  changeIndexInE: function(){ var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; prevPage.setData({ index: 0 }) } })

這個方法能夠操做頁面堆棧裏面的頁面的數據，能夠作到讓後一級頁面對上級頁面羣的數據管理。

小結

在微信小程序中有以上而且不侷限於以上幾種的方式進行頁面間數據傳遞、交互，在實際應用中能夠組合使用。好比說：

• 一些常量，能夠交由 app.js 管理；須要持久化的量能夠放在本地保存。
• 涉及到下級頁面或者模板元素的數據，能夠經過傳入參數的方式傳入。
• 後級頁面能夠經過獲取堆棧裏的頁面對象快速修改上級的數據。

在實際應用中結合使用，能夠更好地管理小程序的數據。

本文若有不周到之處，能夠留言進行討論。