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

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

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);
	}
}
相关推荐
何时梦醒8 分钟前
⚛️ React 19 组件化实战 —— 从零搭建 Todo List 并吃透组件通信
前端·人工智能·react.js
bonechips11 分钟前
React 组件通信:一套 TodoList 讲清 props 与回调
前端·react.js
渣波13 分钟前
别把 TodoList 写成面条代码!一文吃透 React 组件通信与状态驱动的核心内功
前端
2601_9647028913 分钟前
Claude Opus 5 API 开发实战:对话、文本生成与结构化输出
java·服务器·前端
cellurw23 分钟前
20260724 六组件编译收尾与全局构建验证
前端
寒水馨27 分钟前
Windows下载、安装electron-v43.2.0(附安装包electron-v43.2.0-win32-x64.zip)
javascript·windows·typescript·electron·跨平台·桌面应用·chromium
用户29307509766935 分钟前
用React 完成Todos 的 组件应用:深入理解单向数据流与组件通信
前端
玉宇夕落1 小时前
React 父子组件通信 Todo List 看透单向数据流与不可变数据
前端
软件开发技术深度爱好者1 小时前
国际音标魔法实验室工具HTML5实现
前端·html5·英语学习