小程序頁面路由共有5個api,使用這些頁面路由首先你要到在小程序的主配置文件 app.json 里面配置你頁面的路徑材诽,這些頁面你可以放到pages目錄下闹瞧,也可以定義到pages目錄下子目錄的文件夾捎拯,例如pages/index/index滴铅。
{"pages": [
"pages/logs/index",
"pages/index/index",
"pages/user/index",
"pages/my/index"
]}
1.Tab 切換? wx.switchTab(Object object)
跳轉(zhuǎn)到 tabBar 頁面享扔,并關(guān)閉其他所有非 tabBar 頁面,這個api只能跳轉(zhuǎn)到底部導(dǎo)航設(shè)置的幾個頁面筋量,它是不能跳轉(zhuǎn)到其他單獨(dú)頁面的。
代碼示例 (調(diào)用 API?wx.switchTab?或使用組件?<navigator open-type="switchTab"/>?或用戶切換 Tab)
底部導(dǎo)航的設(shè)置路徑是到app.json里面設(shè)置是
{
"tabBar":{
"list":[{
"pagePath":"page/tabBar/index/index",//路徑設(shè)置
"text":"首頁"
},{
"pagePath":"page/cart/cart",
"text":"購物車"
},{
"pagePath":"page/tabBar/userCenter/userCenter",
"text":"我的"
}]
}?
}
wx.switchTab({url:'/index'}) ;//跳轉(zhuǎn)到指定URL地址
2.打開新頁面?wx.navigateTo(Object object)
保留當(dāng)前頁面拯欧,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面详囤。但是不能跳到 tabbar 頁面。使用?wx.navigateBack?可以返回到原頁面镐作。小程序中頁面棧最多十層藏姐。
代碼示例 (調(diào)用 API?wx.navigateTo?或使用組件?<navigator open-type="navigateTo"/>)
wx.navigateTo({
? url: 'test?id=1',
? events: {// 為指定事件添加一個監(jiān)聽器隆箩,獲取被打開頁面?zhèn)魉偷疆?dāng)前頁面的數(shù)據(jù)
? ? acceptDataFromOpenedPage: function(data) {
? ? ? console.log(data)
? ? },
? ? someEvent: function(data) {
? ? ? console.log(data)
? ? }
? ? ...
? },
? success: function(res) {
? ? // 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)
? ? res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
? }
})
在A頁面跳轉(zhuǎn)到B頁面,路由前頁面A路由為onHide生命周期羔杨,跳轉(zhuǎn)到B頁面路由onLoad, onShow生命周期
3.頁面重定向?wx.redirectTo(Object object)
關(guān)閉當(dāng)前頁面捌臊,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面问畅。
代碼示例 (調(diào)用 API?wx.redirectTo?或使用組件?<navigator open-type="redirectTo"/>)
wx.redirectTo({url:'test?id=1'})
在A頁面跳轉(zhuǎn)到B頁面娃属,路由前頁面A路由為onUnload生命周期,跳轉(zhuǎn)到B頁面路由onLoad, onShow生命周期
4.重啟動?wx.reLaunch(Object object)
關(guān)閉所有頁面护姆,打開到應(yīng)用內(nèi)的某個頁面
代碼示例 (調(diào)用 API?wx.reLaunch?或使用組件?<navigator open-type="reLaunch"/>)
wx.reLaunch({url:'test?id=1'})
在A頁面跳轉(zhuǎn)到B頁面矾端,路由前頁面A路由為onUnload生命周期,跳轉(zhuǎn)到B頁面路由onLoad, onShow生命周期
5.頁面返回?wx.navigateBack(Object object)
關(guān)閉當(dāng)前頁面卵皂,返回上一頁面或多級頁面秩铆。可通過?getCurrentPages?獲取當(dāng)前的頁面棧灯变,決定需要返回幾層殴玛。
// 注意:調(diào)用 navigateTo 跳轉(zhuǎn)時,調(diào)用該方法的頁面會被加入堆棧添祸,而 redirectTo 方法則不會滚粟。
代碼示例 (調(diào)用 API?wx.navigateBack?或使用組件<navigator open-type="navigateBack">或用戶按左上角返回按鈕)
// 此處是A頁面
wx.navigateTo({url:'B?id=1'})
// 此處是B頁面
wx.navigateTo({url:'C?id=1'})
// 在C頁面內(nèi) navigateBack,將返回A頁面wx.navigateBack({delta:2})
在A頁面跳轉(zhuǎn)到B頁面刃泌,路由前頁面A路由為onUnload生命周期凡壤,跳轉(zhuǎn)到B頁面路由onShow生命周期
Tips:
navigateTo,redirectTo只能打開非 tabBar 頁面。
switchTab?只能打開 tabBar 頁面耙替。
reLaunch?可以打開任意頁面亚侠。
頁面底部的 tabBar 由頁面決定,即只要是定義為 tabBar 的頁面俗扇,底部都有 tabBar硝烂。
調(diào)用頁面路由帶的參數(shù)可以在目標(biāo)頁面的onLoad中獲取。