小程序頁面的實例使用棧的數(shù)據(jù)結(jié)構(gòu)存儲,棧內(nèi)元素最多5個(換一種方式說,就是用戶最多能點擊5次返回),微信小程序能在棧中相對高層某個頁面調(diào)用其他相對低層的頁面實例的方法。小程序三種頁面跳轉(zhuǎn)API 的區(qū)別在于: ...
小程序頁面的實例使用棧的數(shù)據(jù)結(jié)構(gòu)存儲,棧內(nèi)元素最多5個(換一種方式說,就是用戶最多能點擊5次返回),微信小程序能在棧中相對高層某個頁面調(diào)用其他相對低層的頁面實例的方法。
小程序三種頁面跳轉(zhuǎn)API 的區(qū)別在于:
wx.navigateTo 不會將舊頁面出棧,會將新頁面入棧。(棧內(nèi)元素個數(shù)增加,棧內(nèi)元素5個時,不能再跳轉(zhuǎn))
wx.redirectTo 會將棧頂?shù)呐f頁面出棧,再將需要跳轉(zhuǎn)到的頁面入棧(棧內(nèi)元素個數(shù)不變);
wx.navigateBack 則是將頁面棧最后一個元素出棧,因此倒數(shù)第二個元素會成為最后一個元素,即變成當(dāng)前頁面;也可以連續(xù)出棧好幾個元素(大于棧內(nèi)元素的個數(shù)則返回首頁)返回棧中的某個頁面。
結(jié)合下面一個例子對上面的內(nèi)容的理解:
有一個小程序包含 A、B、C、D 四個頁面,A 為首頁。小程序啟動后,在 A 頁面中,此時棧中有一個元素A,我們通過 navigateTo 跳轉(zhuǎn)到 B 頁面,然后在 B 頁面中再通過 navigateTo 跳轉(zhuǎn)到 C 頁面。此時頁面棧中就會包含三個元素,分別為 A、B、C 三個頁面。而此時如果通過 redirectTo 跳轉(zhuǎn)到 D 頁面,redirectTo 會將棧頂頁面出棧,即將 C 頁面出棧,再將 D 頁面入棧,這時候,頁面棧中的元素則會變?yōu)?A、B、D。此時如果在 D 頁面調(diào)用 navigateBack,會發(fā)現(xiàn)不是返回 C 頁面,而是返回到了 B 頁面。當(dāng)然也可以直接在D頁面返回A,設(shè)置navigateBack的delta參數(shù)為2。
特殊情況,減少navigateTo的使用
描述
舉個栗子:比如小程序的商城,在用戶下單的頁面(下面簡稱:下單界面)很多時候用戶需要選擇收獲地址,然后程序根據(jù)用戶的選擇再返回該界面顯示用戶選擇的收獲地址是什么。可能需要在用戶的下單界面跳轉(zhuǎn)到地址界面,地址的界面可能有編輯地址之類的操作,用戶選擇地址后返回下單界面,顯示剛剛用戶選擇的收獲地址是什么。這個時候可以采用以下方法,減少navigateTo的使用。很多情況下都會有畫圈這樣的操作,就是經(jīng)過一系列的界面后取得數(shù)據(jù)又返回了原來的界面,這個時候可以使用
編輯完當(dāng)前頁面返回數(shù)據(jù)到上一頁更新,假設(shè)當(dāng)前在首頁A頁面,需要跳轉(zhuǎn)到B頁面采集用戶的選擇的數(shù)據(jù),然后在返回A界面更新顯示。代碼例子如下
//A界面
Page({
data: {
userName: ''
},
getBackData: function(name){
this.setData({
userName: name
})
}
})
//B頁面
Page({
edtinputname: function (e) {
var name="張三";
var pagelist = getCurrentPages();
if(pagelist.length > 1){
//獲取上一個頁面實例對象
var prePage = pagelist[pagelist.length - 2];
prePage.getBackData(name);
wx.navigateBack({
delta: 1
})
}
})
這樣能夠使得取得數(shù)據(jù)但不會增加棧中的元素個數(shù),減少navigateTo的使用