小程序页面路由共有5个api,使用这些页面路由首先你要到在小程序的主配置文件 App.json 里面配置你页面的路径,这些页面你可以放到pages目录下,也可以定义到pages目录下子目录的文件夹,例如pages/index/index。
{"pages": [ "pages/logs/index", "pages/index/index", "pages/user/index", "pages/my/index" ]}
跳转到 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地址
保留当前页面,跳转到应用内的某个页面。但是不能跳到 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生命周期。
关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面。
代码示例 (调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>)
wx.redirectTo({url:'test?id=1'})
在A页面跳转到B页面,路由前页面A路由为onUnload生命周期,跳转到B页面路由onLoad, onShow生命周期
关闭所有页面,打开到应用内的某个页面
代码示例 (调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>)
wx.reLaunch({url:'test?id=1'})
在A页面跳转到B页面,路由前页面A路由为onUnload生命周期,跳转到B页面路由onLoad, onShow生命周期
关闭当前页面,返回上一页面或多级页面。可通过 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中获取。