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

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

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);
	}
}
相关推荐
EndingCoder2 分钟前
类的继承和多态
linux·运维·前端·javascript·ubuntu·typescript
用户47949283569153 分钟前
React 终于出手了:彻底终结 useEffect 的"闭包陷阱"
前端·javascript·react.js
程序员猫哥9 分钟前
前端开发,一句话生成网站
前端
Younglina30 分钟前
一个纯前端的网站集合管理工具
前端·vue.js·chrome
木头程序员32 分钟前
前端(包含HTML/JavaScript/DOM/BOM/jQuery)基础-暴力复习篇
开发语言·前端·javascript·ecmascript·es6·jquery·html5
卖火箭的小男孩33 分钟前
# Flutter Provider 状态管理完全指南
前端
小雨青年34 分钟前
鸿蒙 HarmonyOS 6|ArkUI(01):从框架认知到项目骨架
前端
Null15536 分钟前
浏览器唤起本地桌面应用(基础版)
前端·浏览器
哈__40 分钟前
React Native 鸿蒙跨平台开发:PixelRatio 实现鸿蒙端图片的高清显示
javascript·react native·react.js
wszy18091 小时前
外部链接跳转:从 App 打开浏览器的正确姿势
java·javascript·react native·react.js·harmonyos