封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)

封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)

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);
	}
}
相关推荐
@PHARAOH3 小时前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金390413 小时前
flutter 仿商场_首页
前端
少卿3 小时前
react-native图标替换
前端·react native
熊猫钓鱼>_>3 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
2501_915909063 小时前
iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
android·ios·小程序·https·uni-app·iphone·webview
JYeontu4 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_4 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
盛夏绽放4 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
少卿4 小时前
React Native Vector Icons 安装指南
前端·react native