首先，小程序的跳转的跳转分为三类：分别是
- uni.navigateTo
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
- uni.switchTab
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
- uni.redirectTo
关闭当前页面，跳转到应用内的某个页面。
这些我想开发过小程序的都不陌生，但是我这里进行了一层封装，一个方法可以兼容以上三种形式的跳转
// 是否是h5链接
isH5Link(value) {
const urlReg = /(http|https):\/\/([\w.]+\/?)\S*/;
return urlReg.test(value);
},
// 是否是小程序内页面链接
isMiniPageLink(value) {
if (value.substr(0, 4) === 'page' || value.substr(0, 5) === '/page') {
return true;
}
return false;
},
// 页面跳转,支持小程序内页面和h5链接 linkType: ordinary: uni.navigateTo 其他为uni.redirectTo
pageJump(linkUrl, linkType = 'ordinary') {
if (!linkUrl) {
return ;
}
// 调用本页面的其他方法
if (utils.isH5Link(linkUrl)) {
if (linkType === 'ordinary') {
uni.navigateTo({ // 在本js内可以直接调用uni.navigateTo
url: '../webView/webView?froms='+ encodeURIComponent(linkUrl)
});
} else {
uni.redirectTo({
url: '../webView/webView?froms='+ encodeURIComponent(linkUrl)
});
}
} else if (utils.isMiniPageLink(linkUrl)) {
let hyperlink = '';
// 如果不是以/开头,前端补/
if (linkUrl.substr(0, 1) === 'p') {
hyperlink = '/' + linkUrl;
} else {
hyperlink = linkUrl;
}
if (linkType === 'ordinary') {
uni.navigateTo(
{
url: hyperlink,
// 比较巧妙的处理
fail: function() {
// 支付宝没有走fail
uni.switchTab({
// 兼容跳tab页面的情况
url: hyperlink
});
}
}
)
} else {
uni.redirectTo({
url: hyperlink
})
}
}
}
不知道，你有没有注意到，在判断是不是小程序内部页面的时候，对以page开头或者以/page开头，我这边都认为是小程序内部页面，所以跳转的时候，又做了一次处理，即如果没有/,我这边按会自动添加/,我觉得这是这个方法的亮点之一，其次，问你们一个问题，你觉得我这边跳转到webview页面的时候为什么要编码呢？
答案就是：有一些页面本身后面就会有很多参数，如果不进行编码，微信会认为是不合法的域名，但是如果这个链接是写死的，微信就认为没有问题，这个我也比较郁闷。最后一点，我认为比较巧妙的是，我在 uni.navigateTo跳转失败的时候，让它尝试进行tabBar页面的跳转，这个当时主要是要着急上线，如果按照平时，肯定会传一个标志，来告诉我是什么链接，如果是tabbar页面，就采取uni.switchTab，但这个如果单靠前端分辨不出来是不是tabbar页面，当时还查了一下，看看有没有现成的方法来判断一个链接是不是tabbar页面，但是无果，最后发现，uni.navigateTo有fail回调，就想着如果失败就用uni.switchTab岂不是一行代码就搞定了。
