首頁 >微信小程式 >小程式開發 >微信小程式頁頁間傳遞資料的幾種方法

微信小程式頁頁間傳遞資料的幾種方法

青灯夜游
青灯夜游轉載
2020-07-13 16:49:2410918瀏覽

微信小程式頁頁間傳遞資料的幾種方法

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

使用全域變數

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

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

微信小程式頁頁間傳遞資料的幾種方法

然後在頁面中,可以透過 getApp()方法取得全域應用對象,可以對全域變數進行讀取並更改:

微信小程式頁頁間傳遞資料的幾種方法

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

使用本機快取

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

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

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

微信小程式頁頁間傳遞資料的幾種方法

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

微信小程式頁頁間傳遞資料的幾種方法

需要注意的是,在回到A 頁面的時候,小程式需要重新讀取資料。這時候,可以選擇放在生命週期的onShow 中對資料重新載入

#父級往子級頁面(範本)的資料傳遞

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

微信小程式頁頁間傳遞資料的幾種方法

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

微信小程式頁頁間傳遞資料的幾種方法

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

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

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

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

微信小程式頁頁間傳遞資料的幾種方法

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

微信小程式頁頁間傳遞資料的幾種方法

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

透過取得到頁面物件進行資料操作

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

微信小程式頁頁間傳遞資料的幾種方法

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

1微信小程式頁頁間傳遞資料的幾種方法

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

小結

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

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

  • 涉及到下級頁面或模板元素的數據,可以透過傳入參數的方式傳入。

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

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

推薦:《小程式開發教學

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

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除