1. 程式人生 > >如何在微信小程式的頁面間傳遞資料?

如何在微信小程式的頁面間傳遞資料?

知曉程式注:

我們在之前釋出過小程式頁面傳值方法的 ,說明了在小程式開發中,兩種常見的頁面之間傳值方法。

本期,「知曉程式」為你帶來的是「倒數記日」小程式開發者帶來的,小程式開發中,有關頁面間資料傳遞的更多方法。

文 | 小日子先生

在微信小程式的開發中,我們會經常遇到頁面間資料傳遞或者相互影響的問題。在實際的開發過程中,可以通過以下幾種方法來實現。

使用全域性變數

全域性變數實際上是定義了一個全域性的物件,並在每個頁面中引入。

在初始化程式碼的時候,小程式會讀取一個 app.js的檔案,在這裡我們可以定義我們所需要的全域性變數。

然後在頁面中,可以通過 getApp()方法獲取到全域性應用物件,可以對全域性變數進行讀取並更改:

由於 app.js在專案中是用來做基礎配置的,因此不建議將很多變數放在這裡配置。一般情況下會將一些持久化的常量配置在這裡,對於經常需要變動的量不建議用這個方法。

使用本地快取

本地快取是微信小程式提供的一個功能, 可以將使用者產生的資料做本地的持久化,類似於 NoSQL,可以進行讀取和修改的操作。

那麼在不同的頁面之間,如何利用它,進行資料的互動呢?

假設我們在 A 頁面儲存了使用者的資訊。

這樣做,這個資料就存在了本地。當在 B 頁面需要使用的時候,可以直接的獲取到資料池中的資料,並進行 CRUD 操作:

需要注意的是,在 回到 A 頁面的時候,小程式需要重新讀取資料

。這時候,可以選擇放在生命週期的 onShow中對資料重新載入

父級往子級頁面(模板)的資料傳遞

我們通常會在頁面之間進行跳轉、重定向的操作。 這時候,我們可以選擇將部分資料放在 url裡面,並在新頁面 的時候進行初始化。

在 D 頁面中,我們可以這樣接收到到所傳進來的引數:

wx.navigateTo和 wx.redirectTo不允許跳轉到 tab 所包含的頁面,只能用 wx.switchTab跳轉。需要注意的是, wx.switchTab中的 url不能傳引數。

微信新提供的 wx.reLaunch介面可以傳入引數。

另外,在頁面中我們通常會用到一些元件模板,因此在父子之間也會有相應的資料傳遞。

使用 name屬性,作為模板的名字。然後在這裡面使用 is屬性,宣告需要的使用的模板。

然後將模板所需要的 data傳入,如:

傳入模板的除了變數,還可以是事件方法物件。例如,模板中的點選事件,可以傳遞到使用模板的元素中。

通過獲取到頁面物件進行資料操作

這個方法的精髓,是通過獲取到其他頁面的物件原型, 然後通過原型方法 setData對當前物件管理的 data進行修改,示例如下:

當跳轉到下一個頁面 F 之後,假定在 F 中有操作需要對 E 中的資料有修改,則可以使用以下方法:

這個方法可以操作頁面堆疊裡面的頁面的資料, 可以做到讓後一級頁面對上級頁面群的資料管理

小結

在微信小程式中有以上並且不侷限於以上幾種的方式進行頁面間資料傳遞、互動, 在實際應用中可以組合使用。比如說:

  • 一些常量,可以交由 app.js 管理;需要持久化的量可以放在本地儲存。

  • 涉及到下級頁面或者模板元素的資料,可以通過傳入引數的方式傳入。

  • 後級頁面可以通過獲取堆疊裡的頁面物件快速修改上級的資料。

在實際應用中結合使用,可以更好地管理小程式的資料。

本文如有不周到之處,可以留言進行討論。

轉載:http://www.sohu.com/a/138831377_603236