小程序頁面路由共有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)
跳轉到 tabBar 頁面,并關閉其他所有非 tabBar 頁面,這個api只能跳轉到底部導航設置的幾個頁面,它是不能跳轉到其他單獨頁面的。
小程序底部tab
代碼示例
(調用 API wx.switchTab 或使用組件 <navigator open-type="switchTab"/> 或用戶切換 Tab)
首先底部導航的設置路徑是到app.json里面設置
{ "tabBar":{ "list":[{ "pagePath":"page/tabBar/index/index",//路徑設置 "text":"首頁" },{ "pagePath":"page/cart/cart", "text":"購物車" },{ "pagePath":"page/tabBar/userCenter/userCenter", "text":"我的" }] }
wx.switchTab({url:'/index'}) ;//跳轉到指定URL地址
2.打開新頁面 wx.navigateTo(Object object)
保留當前頁面,跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面,小程序中頁面棧最多十層。
代碼示例
(調用 API wx.navigateTo 或使用組件 <navigator open-type="navigateTo"/>)
wx.navigateTo({ url: 'test?id=1', events: {// 為指定事件添加一個監聽器,獲取被打開頁面傳送到當前頁面的數據 acceptDataFromOpenedPage: function(data) { console.log(data) }, someEvent: function(data) { console.log(data) } ... }, success: function(res) { // 通過eventChannel向被打開頁面傳送數據 res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' }) } })
在A頁面跳轉到B頁面,路由前頁面A路由為onHide生命周期,跳轉到B頁面路由onLoad, onShow生命周期。
3.頁面重定向 wx.redirectTo(Object object)
關閉當前頁面,跳轉到應用內的某個頁面,但是不允許跳轉到 tabbar 頁面。
代碼示例 (調用 API wx.redirectTo 或使用組件 <navigator open-type="redirectTo"/>)
wx.redirectTo({url:'test?id=1'})
在A頁面跳轉到B頁面,路由前頁面A路由為onUnload生命周期,跳轉到B頁面路由onLoad, onShow生命周期
4.重啟動 wx.reLaunch(Object object)
關閉所有頁面,打開到應用內的某個頁面
代碼示例 (調用 API wx.reLaunch 或使用組件 <navigator open-type="reLaunch"/>)
wx.reLaunch({url:'test?id=1'})
在A頁面跳轉到B頁面,路由前頁面A路由為onUnload生命周期,跳轉到B頁面路由onLoad, onShow生命周期
5.頁面返回 wx.navigateBack(Object object)
關閉當前頁面,返回上一頁面或多級頁面。可通過 getCurrentPages 獲取當前的頁面棧,決定需要返回幾層。
// 注意:調用 navigateTo 跳轉時,調用該方法的頁面會被加入堆棧,而 redirectTo 方法則不會。
代碼示例 (調用 API wx.navigateBack 或使用組件<navigator open-type="navigateBack">或用戶按左上角返回按鈕)
// 此處是A頁面
wx.navigateTo({url:'B?id=1'})
// 此處是B頁面
wx.navigateTo({url:'C?id=1'})
// 在C頁面內 navigateBack,將返回A頁面wx.navigateBack({delta:2})
在A頁面跳轉到B頁面,路由前頁面A路由為onUnload生命周期,跳轉到B頁面路由onShow生命周期
Tips:
navigateTo,redirectTo只能打開非 tabBar 頁面。
switchTab 只能打開 tabBar 頁面。
reLaunch 可以打開任意頁面。
頁面底部的 tabBar 由頁面決定,即只要是定義為 tabBar 的頁面,底部都有 tabBar。
調用頁面路由帶的參數可以在目標頁面的onLoad中獲取。