小程序頁面的實例使用棧的數據結構存儲,棧內元素最多5個(換一種方式說,就是用戶最多能點擊5次返回),微信小程序能在棧中相對高層某個頁面調用其他相對低層的頁面實例的方法。小程序三種頁面跳轉API 的區別在于: ...
小程序頁面的實例使用棧的數據結構存儲,棧內元素最多5個(換一種方式說,就是用戶最多能點擊5次返回),微信小程序能在棧中相對高層某個頁面調用其他相對低層的頁面實例的方法。
小程序三種頁面跳轉API 的區別在于:
wx.navigateTo 不會將舊頁面出棧,會將新頁面入棧。(棧內元素個數增加,棧內元素5個時,不能再跳轉)
wx.redirectTo 會將棧頂的舊頁面出棧,再將需要跳轉到的頁面入棧(棧內元素個數不變);
wx.navigateBack 則是將頁面棧最后一個元素出棧,因此倒數第二個元素會成為最后一個元素,即變成當前頁面;也可以連續出棧好幾個元素(大于棧內元素的個數則返回首頁)返回棧中的某個頁面。
結合下面一個例子對上面的內容的理解:
有一個小程序包含 A、B、C、D 四個頁面,A 為首頁。小程序啟動后,在 A 頁面中,此時棧中有一個元素A,我們通過 navigateTo 跳轉到 B 頁面,然后在 B 頁面中再通過 navigateTo 跳轉到 C 頁面。此時頁面棧中就會包含三個元素,分別為 A、B、C 三個頁面。而此時如果通過 redirectTo 跳轉到 D 頁面,redirectTo 會將棧頂頁面出棧,即將 C 頁面出棧,再將 D 頁面入棧,這時候,頁面棧中的元素則會變為 A、B、D。此時如果在 D 頁面調用 navigateBack,會發現不是返回 C 頁面,而是返回到了 B 頁面。當然也可以直接在D頁面返回A,設置navigateBack的delta參數為2。
特殊情況,減少navigateTo的使用
描述
舉個栗子:比如小程序的商城,在用戶下單的頁面(下面簡稱:下單界面)很多時候用戶需要選擇收獲地址,然后程序根據用戶的選擇再返回該界面顯示用戶選擇的收獲地址是什么。可能需要在用戶的下單界面跳轉到地址界面,地址的界面可能有編輯地址之類的操作,用戶選擇地址后返回下單界面,顯示剛剛用戶選擇的收獲地址是什么。這個時候可以采用以下方法,減少navigateTo的使用。很多情況下都會有畫圈這樣的操作,就是經過一系列的界面后取得數據又返回了原來的界面,這個時候可以使用
編輯完當前頁面返回數據到上一頁更新,假設當前在首頁A頁面,需要跳轉到B頁面采集用戶的選擇的數據,然后在返回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
})
}
})
這樣能夠使得取得數據但不會增加棧中的元素個數,減少navigateTo的使用