最近在做微信小程序,碰到頁面跳轉(zhuǎn)的問題,總結(jié)一下頁面之間跳轉(zhuǎn)的方式
一、wx.navigateTo(OBJECT)
這是最普遍的一種跳轉(zhuǎn)方式,其官方解釋為:“保留當前頁面,跳轉(zhuǎn)到應用內(nèi)的某個頁面”
類似于html中的 window.location.href=" "
eg:
wx.navigateTo({ url: 'test?id=1'})
實際效果如下:

小程序中左上角有一個返回箭頭,可返回上一個頁面
也可以通過方法 wx.navigateBack 返回原頁面
二、wx.redirectTo(OBJECT)
關(guān)閉當前頁面,跳轉(zhuǎn)到應用內(nèi)的某個頁面。
類似于html中的 window.open('你所要跳轉(zhuǎn)的頁面');
eg:
wx.redirectTo({ url: 'test?id=1'})
效果如下:
左上角沒有返回箭頭,不能返回上一個頁面
三、wx.switchTab(OBJECT)
跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面
eg:
{ "tabBar": { "list": [{ "pagePath": "index", "text": "首頁"
},{ "pagePath": "other", "text": "其他"
}]
}
}
wx.switchTab({ url: '/index'})

wx.navigateTo 和 wx.redirectTo 不允許跳轉(zhuǎn)到 tabbar 頁面,只能用 wx.switchTab 跳轉(zhuǎn)到 tabbar 頁面
四、wx.reLaunch(OBJECT)
關(guān)閉所有頁面,打開到應用內(nèi)的某個頁面。
跟wx.redirectTo
一樣左上角不會出現(xiàn)返回箭頭,但兩者卻不完全相同
這里要提到小程序中的 getCurrentPages()
方法
在wx.navigateTo中,每跳轉(zhuǎn)一個新的頁面,其原始頁面就會被加入堆棧,通過調(diào)用wx.navigateBack(OBJECT)可通過獲取堆棧中保存的頁面 返回上一級或多級頁面;
wx.redirectTo,方法則不會被加入堆棧,但仍可通過wx.navigateBack(OBJECT)方法返回之前堆棧中的頁面
wx.reLaunch 方法則會清空當前的堆棧。
eg:
// 此處是A頁面wx.navigateTo({ url: 'B?id=1'})// 此處是B頁面wx.navigateTo({ url: 'C?id=1'})// 在C頁面內(nèi) navigateBack,將返回b頁面wx.navigateBack({ delta: 1})
// 此處是B頁面
wx.redirectTo
({
url: 'C?id=1'
})
// 在C頁面內(nèi) navigateBack,則會返回a頁面
wx.navigateBack({
delta: 1
})
// 此處是B頁面
wx.reLaunch({
url: 'C?id=1'
})
// 在C頁面內(nèi) navigateBack,則無效