路由api简介:
文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html
switchTab:跳转到 tabBar 页面
navigateTo:普通跳转
navigateBack:返回上一页面或多级页面
reLaunch:关闭所有页面,打开到应用内的某个页面
redirectTo:关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
痛点:
1,tabBar页面得用switchTab跳转、普通页面用navigateTo,当tabBar配置改变时,相关跳转所调用的api就需要进行修改
2,navigateBack得自己计算要返回的页面数delta,有时进入页面的路径不一样,返回相同的页面时delta就可能不一样,于是路径数量多时,计算delta显得很复杂
解决方案:
1,封装方法 jump
入参:url:要进入的页面
type:进入方式 back(返回)、reLaunch(对应api <span style="font-size: 16px;">reLaunch</span>)、<span style="font-size: 16px;">redirectTo(对应api reLaunch)</span>
函数内处理:
1,声明tabBar页面数组,判断到入参url在这数组中,则调用switchTab
2,根据传入type调用相应api
3,当type值为‘back’时,调用getCurrentPages()获取当前的页面栈,根据传入的url计算要返回的delta
使用:
普通跳转:jump('/pages/goods/detail')
返回:<span style="font-size: 16px;">jump('/pages/goods/detail','back')</span>
返回上一页:jump('back')、jump(-1)
reLaunch:jump(’/pages/goods/detail’,‘reLaunch’)
redirectTo:jump(’/pages/goods/detail’,‘redirectTo’)
具体实现:
const jump = (url, type) => {
const pages = getCurrentPages();
// 判断当前页面就是要跳转的url,无需处理
if (pages.length !== 0) {
const nowUrl = pages[pages.length - 1].$page.fullPath;
if (nowUrl === url) {
return;
}
}
if (url === 'back' || url === -1) { // jump('back') || jump(-1)
wx.navigateBack();
} else if (type === 'reLaunch') {
wx.reLaunch({
url,
});
} else if (type === 'back') { // 返回
let delta;
for (let i = 0; i < pages.length; i++) {
if (('/' + pages[i].route) === url) {
delta = pages.length - 1 - i;
break;
}
}
if (delta) {
wx.navigateBack({
delta
});
} else { // 返回时没找到要返回对应的delta
wx.reLaunch({ url });
}
} else { // 普通跳转
const tabList = [ // tabbar页面数组
'/pages/index/index',
'/pages/store/list',
]
if (tabList.indexOf(url) !== -1) { // 当前要跳转的页面是tabbar页面
wx.switchTab({
url,
});
} else if (type === 'redirectTo') {
wx.redirectTo({
url,
});
} else {
wx.navigateTo({
url,
});
}
}
}