封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
jumpType:
普通链接 0 例如:https://www.baidu.com/
跳转当前小程序内部 1
外部半屏小程序 2
外部全屏小程序 3
背景:
uniapp, vue2, 小程序
javascript
comMethods.differentJumpType = (data, callbacks = {}) => {
console.log('differentJumpType', data, 'callbacks', callbacks)
// 参数结构
const {
jumpType, // 跳转类型:0普通链接 1内部 2外部半屏 3外部全屏
appid, // 小程序appid
path, // 全屏,半屏 跳转路径 page/home/index
pagePath, // 内部:页面路径 page/home/index
linkUrl, // 链接地址 https://www.baidu.com/
baseTabbarUrl = [], // 跳转tabbar页面路径列表
extraData, //跳转小程序携带的参数
} = data;
// 回调函数
const {
beforeJump, // 跳转前执行 - 可以在这里添加权限校验等业务逻辑
onSuccess, // 跳转成功回调
onFail, // 跳转失败回调
onComplete // 跳转完成回调(无论成功失败都会执行)
} = callbacks;
// 跳转前执行 - 可以添加业务逻辑
if (beforeJump && typeof beforeJump === 'function') {
console.log('跳转前执行回调函数')
beforeJump({ data });
}
// 根据跳转类型执行不同的跳转逻辑
switch (jumpType) {
case 0:
// 普通链接跳转
// 如果是http链接,跳转到webview
if (linkUrl.indexOf('://')) {
comMethods.checkUrlWebview(linkUrl);
if (onSuccess) onSuccess({ type: 'webview', linkUrl });
return;
}
break;
case 1:
// 内部小程序跳转
setTimeout(() => {
// 检查是否是tabbar页面
let isTabbarPage = false;
if(baseTabbarUrl && baseTabbarUrl.length > 0) {
for (let i = 0; i < baseTabbarUrl.length; i++) {
if (pagePath.indexOf(baseTabbarUrl[i]) !== -1) {
isTabbarPage = true;
break;
}
}
}
// 选择跳转方式
let jumpMethod = isTabbarPage ? 'switchTab' : 'navigateTo';
uni[jumpMethod]({
url: pagePath,
success: (res) => {
if (onSuccess) onSuccess({
type: 'internal',
method: jumpMethod,
isTabbar: isTabbarPage,
result: res
});
},
fail: (err) => {
if (onFail) onFail(err);
}
});
}, 100); // 延迟100ms跳转
break;
case 2:
// 外部半屏小程序跳转
uni.openEmbeddedMiniProgram({
appId: appid,
path: path,
extraData: extraData,
success: (res) => {
if (onSuccess) onSuccess({
type: 'embedded',
appid,
path,
result: res
});
},
fail: (err) => {
if (onFail) onFail(err);
}
});
break;
case 3:
// 外部全屏小程序跳转
// 同应用跳转
if (appid === wxAppId) {
comMethods.pageNavigation('nav', path);
if (onSuccess) onSuccess({
type: 'external_same_app',
appid,
path
});
return;
}
// 跨小程序跳转
uni.navigateToMiniProgram({
appId: appid,
path: path,
extraData: extraData,
envVersion: envVersion,
success: (res) => {
console.log(`[${new Date().toISOString()}]跳转成功`);
if (onSuccess) onSuccess({
type: 'external',
appid,
path,
result: res
});
},
fail: (err) => {
console.error(`[${new Date().toISOString()}]跳转失败`);
uni.showToast({
title: '跳转已取消',
icon: 'none'
});
if (onFail) onFail(err);
}
});
break;
default:
uni.showToast({
title: '不支持的跳转类型',
icon: 'none'
});
console.error('不支持的跳转类型:', jumpType);
break;
}
}
调用示例
javascript
//跳转外部链接
this.$comMethods.differentJumpType({
jumpType: 0,
path: 'https://www.example.com'
});
// 内部页面跳转
this.$comMethods.differentJumpType({
jumpType: 1,
path: '/pages/user/profile',
baseTabbarUrl: ['/pages/index/index', '/pages/user/user']
});
// 外部半屏小程序
this.$comMethods.differentJumpType({
jumpType: 2,
appid: 'wx1234567890',
path: 'pages/index/index'
});
// 外部全屏小程序
this.$comMethods.differentJumpType({
jumpType: 3,
appid: 'wx1234567890',
path: 'pages/detail/detail'
});
这是原有的checkUrlWebview 方法:
javascript
// 控制链接跳转-可以走路由还是走webview,url为要跳转的链接
comMethods.checkUrlWebview = (url) => {
if(url.indexOf('你的项目名称前缀') > -1) {
url = url.split('你的项目名称前缀')[1];
comMethods.pageNavigation('nav', url);
}else {
comMethods.pageNavigation('nav', "/pages/tool/webview?url=" + url);
}
}