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

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

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);
	}
}
相关推荐
excel7 小时前
Vue SFC 编译器源码深度解析:processDefineEmits 与运行时事件生成机制
前端
excel7 小时前
Vue 3 深度解析:defineModel() 与 defineProps() 的区别与底层机制
前端
excel7 小时前
深入解析 processDefineExpose:Vue SFC 编译阶段的辅助函数
前端
dcloud_jibinbin7 小时前
【uniapp】小程序体积优化,分包异步化
前端·vue.js·webpack·性能优化·微信小程序·uni-app
桜吹雪7 小时前
自定义instanceof运算符行为API: Symbol.hasInstance
前端
qq_427506087 小时前
基于Vue 3和Element Plus实现简单的钩子函数管理各类弹窗操作
前端·javascript·vue.js
excel7 小时前
深入解析:ScriptCompileContext —— Vue SFC 脚本编译上下文的核心机制
前端
粥里有勺糖7 小时前
视野修炼-技术周刊第126期 | TypeScript #1
前端·node.js·github
2501_916008897 小时前
金融类 App 加密加固方法,多工具组合的工程化实践(金融级别/IPA 加固/无源码落地/Ipa Guard + 流水线)
android·ios·金融·小程序·uni-app·iphone·webview
冰暮流星7 小时前
css3新增过渡
前端·css·css3