商城系統(tǒng) 注冊(cè)

如何在微信小程序頁面間傳遞數(shù)據(jù),微信小程序頁面跳轉(zhuǎn)傳遞參數(shù)

2018-08-17|HiShop
導(dǎo)讀:在微信小程序的開發(fā)中,我們會(huì)經(jīng)常遇到頁面間數(shù)據(jù)傳遞或者相互影響的問題。在實(shí)際的開發(fā)過程中,可以通過以下幾種方法來實(shí)現(xiàn)。...

在微信小程序的開發(fā)中,我們會(huì)經(jīng)常遇到頁面間數(shù)據(jù)傳遞或者相互影響的問題。在實(shí)際的開發(fā)過程中,可以通過以下幾種方法來實(shí)現(xiàn)。

如何在微信小程序頁面間傳遞數(shù)據(jù),微信小程序頁面跳轉(zhuǎn)傳遞參數(shù)

1使用全局變量

全局變量實(shí)際上是定義了一個(gè)全局的對(duì)象,并在每個(gè)頁面中引入。在初始化代碼的時(shí)候,小程序會(huì)讀取一個(gè) app.js 的文件,在這里我們可以定義我們所需要的全局變量。

如何在微信小程序頁面間傳遞數(shù)據(jù),微信小程序頁面跳轉(zhuǎn)傳遞參數(shù)

使用全局變量全局變量實(shí)際上是定義了一個(gè)全局的對(duì)象,并在每個(gè)頁面中引入。在初始化代碼的時(shí)候,小程序會(huì)讀取一個(gè) app.js 的文件,在這里我們可以定義我們所需要的全局變量。

如何在微信小程序頁面間傳遞數(shù)據(jù),微信小程序頁面跳轉(zhuǎn)傳遞參數(shù)

由于 app.js 在項(xiàng)目中是用來做基礎(chǔ)配置的,因此不建議將很多變量放在這里配置。一般情況下會(huì)將一些持久化的常量配置在這里,對(duì)于經(jīng)常需要變動(dòng)的量不建議用這個(gè)方法。

2使用本地緩存

本地緩存是微信小程序提供的一個(gè)功能,可以將用戶產(chǎn)生的數(shù)據(jù)做本地的持久化,類似于 NoSQL,可以進(jìn)行讀取和修改的操作。

那么在不同的頁面之間,如何利用它,進(jìn)行數(shù)據(jù)的交互呢?假設(shè)我們?cè)?A 頁面保存了用戶的信息。

如何在微信小程序頁面間傳遞數(shù)據(jù),微信小程序頁面跳轉(zhuǎn)傳遞參數(shù)

這樣做,這個(gè)數(shù)據(jù)就存在了本地。當(dāng)在 B 頁面需要使用的時(shí)候,可以直接的獲取到數(shù)據(jù)池中的數(shù)據(jù),并進(jìn)行 CRUD 操作:

如何在微信小程序頁面間傳遞數(shù)據(jù),微信小程序頁面跳轉(zhuǎn)傳遞參數(shù)

需要注意的是,在回到 A 頁面的時(shí)候,小程序需要重新讀取數(shù)據(jù)。這時(shí)候,可以選擇放在生命周期的 onShow 中對(duì)數(shù)據(jù)重新加載

3父級(jí)往子級(jí)頁面(模板)的數(shù)據(jù)傳遞

我們通常會(huì)在頁面之間進(jìn)行跳轉(zhuǎn)、重定向的操作。這時(shí)候,我們可以選擇將部分?jǐn)?shù)據(jù)放在 url 里面,并在新頁面 onLoad 的時(shí)候進(jìn)行初始化。

如何在微信小程序頁面間傳遞數(shù)據(jù),微信小程序頁面跳轉(zhuǎn)傳遞參數(shù)

在 D 頁面中,我們可以這樣接收到到所傳進(jìn)來的參數(shù):

如何在微信小程序頁面間傳遞數(shù)據(jù),微信小程序頁面跳轉(zhuǎn)傳遞參數(shù)

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

4微信新提供的 wx.reLaunch 接口可以傳入?yún)?shù)。

另外,在頁面中我們通常會(huì)用到一些組件模板,因此在父子之間也會(huì)有相應(yīng)的數(shù)據(jù)傳遞。
使用 name 屬性,作為模板的名字。然后在這里面使用 is 屬性,聲明需要的使用的模板。

如何在微信小程序頁面間傳遞數(shù)據(jù),微信小程序頁面跳轉(zhuǎn)傳遞參數(shù)

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

如何在微信小程序頁面間傳遞數(shù)據(jù),微信小程序頁面跳轉(zhuǎn)傳遞參數(shù)

傳入模板的除了變量,還可以是事件方法對(duì)象。例如,模板中的點(diǎn)擊事件,可以傳遞到使用模板的元素中。通過獲取到頁面對(duì)象進(jìn)行數(shù)據(jù)操作這個(gè)方法的精髓,是通過獲取到其他頁面的對(duì)象原型,然后通過原型方法 setData 對(duì)當(dāng)前對(duì)象管理的 data 進(jìn)行修改,示例如下:

如何在微信小程序頁面間傳遞數(shù)據(jù),微信小程序頁面跳轉(zhuǎn)傳遞參數(shù)

當(dāng)跳轉(zhuǎn)到下一個(gè)頁面 F 之后,假定在 F 中有操作需要對(duì) E 中的數(shù)據(jù)有修改,則可以使用以下方法:

如何在微信小程序頁面間傳遞數(shù)據(jù),微信小程序頁面跳轉(zhuǎn)傳遞參數(shù)

這個(gè)方法可以操作頁面堆棧里面的頁面的數(shù)據(jù),可以做到讓后一級(jí)頁面對(duì)上級(jí)頁面群的數(shù)據(jù)管理。小結(jié)在微信小程序中有以上并且不局限于以上幾種的方式進(jìn)行頁面間數(shù)據(jù)傳遞、交互,在實(shí)際應(yīng)用中可以組合使用。比如說:一些常量,可以交由 app.js 管理;需要持久化的量可以放在本地保存。

涉及到下級(jí)頁面或者模板元素的數(shù)據(jù),可以通過傳入?yún)?shù)的方式傳入。后級(jí)頁面可以通過獲取堆棧里的頁面對(duì)象快速修改上級(jí)的數(shù)據(jù)。在實(shí)際應(yīng)用中結(jié)合使用,可以更好地管理小程序的數(shù)據(jù)。

以上是如何在微信小程序頁面間傳遞數(shù)據(jù),更多關(guān)于微信小程序其他功能開發(fā),可以關(guān)注本網(wǎng)站,謝謝。

HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序請(qǐng)查看:小程序商店


電話咨詢 預(yù)約演示 0元開店