thirdJumpMiddle

pages.json

@@ -162,6 +162,13 @@
 			"style": {
 				"navigationBarTitleText": "生长测评"
 			}
+		},
+		{
+			"path" : "pages/thirdJumpMiddlePage/thirdJumpMiddlePage",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
 		}
 	],
 	"globalStyle": {

pages/thirdJumpDemo/thirdJumpDemo.vue

+<template>
+	<view class="demo-page">
+		<view class="header">
+			<text class="title">第三方跳转演示</text>
+		</view>
+		
+		<view class="form-container">
+			<view class="form-item">
+				<text class="label">目标小程序AppID:</text>
+				<input 
+					v-model="formData.appId" 
+					class="input" 
+					placeholder="请输入目标小程序的AppID"
+				/>
+			</view>
+			
+			<view class="form-item">
+				<text class="label">跳转路径:</text>
+				<input 
+					v-model="formData.path" 
+					class="input" 
+					placeholder="可选，跳转的具体页面路径"
+				/>
+			</view>
+			
+			<view class="form-item">
+				<text class="label">应用名称:</text>
+				<input 
+					v-model="formData.appName" 
+					class="input" 
+					placeholder="可选，目标应用名称"
+				/>
+			</view>
+			
+			<view class="form-item">
+				<text class="label">环境版本:</text>
+				<picker 
+					:value="envVersionIndex" 
+					:range="envVersions" 
+					@change="onEnvVersionChange"
+					class="picker"
+				>
+					<view class="picker-text">{{ envVersions[envVersionIndex] }}</view>
+				</picker>
+			</view>
+		</view>
+		
+		<view class="button-container">
+			<button class="jump-btn primary" @click="jumpWithMiddlePage">
+				通过中间页跳转
+			</button>
+			<button class="jump-btn secondary" @click="directJump">
+				直接跳转
+			</button>
+		</view>
+		
+		<view class="info-container">
+			<view class="info-item">
+				<text class="info-label">当前平台:</text>
+				<text class="info-value">{{ platform }}</text>
+			</view>
+			<view class="info-item">
+				<text class="info-label">支持跳转:</text>
+				<text class="info-value" :class="{ 'supported': canJump, 'not-supported': !canJump }">
+					{{ canJump ? '是' : '否' }}
+				</text>
+			</view>
+		</view>
+		
+		<view class="log-container">
+			<text class="log-title">操作日志:</text>
+			<scroll-view class="log-content" scroll-y>
+				<view v-for="(log, index) in logs" :key="index" class="log-item">
+					<text class="log-time">{{ log.time }}</text>
+					<text class="log-message">{{ log.message }}</text>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { jumpToThirdParty, directJump, canJumpToMiniProgram, getJumpStatus } from '../../utils/thirdJump.js'
+
+// 响应式数据
+const formData = ref({
+	appId: 'wx1234567890abcdef', // 示例AppID
+	path: 'pages/index/index',
+	appName: '示例小程序',
+	extraData: {}
+})
+
+const envVersions = ['release', 'trial', 'develop']
+const envVersionIndex = ref(0)
+const platform = ref('')
+const canJump = ref(false)
+const logs = ref([])
+
+// 页面加载
+onMounted(() => {
+	checkPlatform()
+	checkJumpSupport()
+	addLog('页面加载完成')
+})
+
+// 检查平台
+const checkPlatform = () => {
+	// #ifdef MP-WEIXIN
+	platform.value = '微信小程序'
+	// #endif
+	// #ifdef MP-ALIPAY
+	platform.value = '支付宝小程序'
+	// #endif
+	// #ifdef MP-BAIDU
+	platform.value = '百度小程序'
+	// #endif
+	// #ifdef MP-TOUTIAO
+	platform.value = '头条小程序'
+	// #endif
+	// #ifdef H5
+	platform.value = 'H5'
+	// #endif
+	// #ifdef APP-PLUS
+	platform.value = 'App'
+	// #endif
+}
+
+// 检查跳转支持
+const checkJumpSupport = async () => {
+	canJump.value = canJumpToMiniProgram()
+	
+	if (canJump.value) {
+		try {
+			const status = await getJumpStatus(formData.value.appId)
+			addLog(`跳转状态检查: ${status.message}`)
+		} catch (error) {
+			addLog(`跳转状态检查失败: ${error.message}`)
+		}
+	} else {
+		addLog('当前平台不支持跳转小程序')
+	}
+}
+
+// 环境版本选择
+const onEnvVersionChange = (e) => {
+	envVersionIndex.value = e.detail.value
+	formData.value.envVersion = envVersions[envVersionIndex.value]
+	addLog(`环境版本切换为: ${formData.value.envVersion}`)
+}
+
+// 通过中间页跳转
+const jumpWithMiddlePage = () => {
+	if (!formData.value.appId) {
+		uni.showToast({
+			title: '请输入AppID',
+			icon: 'none'
+		})
+		return
+	}
+	
+	addLog('开始通过中间页跳转')
+	jumpToThirdParty({
+		...formData.value,
+		envVersion: formData.value.envVersion
+	})
+}
+
+// 直接跳转
+const directJump = () => {
+	if (!formData.value.appId) {
+		uni.showToast({
+			title: '请输入AppID',
+			icon: 'none'
+		})
+		return
+	}
+	
+	if (!canJump.value) {
+		uni.showToast({
+			title: '当前平台不支持跳转',
+			icon: 'none'
+		})
+		return
+	}
+	
+	addLog('开始直接跳转')
+	directJump({
+		...formData.value,
+		envVersion: formData.value.envVersion
+	})
+}
+
+// 添加日志
+const addLog = (message) => {
+	const now = new Date()
+	const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
+	
+	logs.value.unshift({
+		time,
+		message
+	})
+	
+	// 限制日志数量
+	if (logs.value.length > 50) {
+		logs.value = logs.value.slice(0, 50)
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.demo-page {
+	min-height: 100vh;
+	background: #f5f5f5;
+	padding: 40rpx;
+}
+
+.header {
+	text-align: center;
+	margin-bottom: 60rpx;
+	
+	.title {
+		font-size: 48rpx;
+		font-weight: bold;
+		color: #333;
+	}
+}
+
+.form-container {
+	background: white;
+	border-radius: 20rpx;
+	padding: 40rpx;
+	margin-bottom: 40rpx;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+}
+
+.form-item {
+	margin-bottom: 40rpx;
+	
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.label {
+	display: block;
+	font-size: 28rpx;
+	color: #333;
+	margin-bottom: 20rpx;
+	font-weight: 500;
+}
+
+.input {
+	width: 100%;
+	height: 80rpx;
+	border: 2rpx solid #e0e0e0;
+	border-radius: 10rpx;
+	padding: 0 20rpx;
+	font-size: 28rpx;
+	box-sizing: border-box;
+	
+	&:focus {
+		border-color: #007aff;
+	}
+}
+
+.picker {
+	width: 100%;
+	height: 80rpx;
+	border: 2rpx solid #e0e0e0;
+	border-radius: 10rpx;
+	display: flex;
+	align-items: center;
+	padding: 0 20rpx;
+	box-sizing: border-box;
+}
+
+.picker-text {
+	font-size: 28rpx;
+	color: #333;
+}
+
+.button-container {
+	display: flex;
+	gap: 20rpx;
+	margin-bottom: 40rpx;
+}
+
+.jump-btn {
+	flex: 1;
+	height: 88rpx;
+	border-radius: 44rpx;
+	font-size: 32rpx;
+	border: none;
+	
+	&.primary {
+		background: #007aff;
+		color: white;
+	}
+	
+	&.secondary {
+		background: #f0f0f0;
+		color: #333;
+	}
+}
+
+.info-container {
+	background: white;
+	border-radius: 20rpx;
+	padding: 30rpx;
+	margin-bottom: 40rpx;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+}
+
+.info-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20rpx;
+	
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.info-label {
+	font-size: 28rpx;
+	color: #666;
+}
+
+.info-value {
+	font-size: 28rpx;
+	color: #333;
+	font-weight: 500;
+	
+	&.supported {
+		color: #4CAF50;
+	}
+	
+	&.not-supported {
+		color: #f44336;
+	}
+}
+
+.log-container {
+	background: white;
+	border-radius: 20rpx;
+	padding: 30rpx;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+}
+
+.log-title {
+	display: block;
+	font-size: 28rpx;
+	color: #333;
+	margin-bottom: 20rpx;
+	font-weight: 500;
+}
+
+.log-content {
+	height: 300rpx;
+}
+
+.log-item {
+	display: flex;
+	margin-bottom: 15rpx;
+	
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.log-time {
+	font-size: 24rpx;
+	color: #999;
+	margin-right: 20rpx;
+	min-width: 80rpx;
+}
+
+.log-message {
+	font-size: 24rpx;
+	color: #333;
+	flex: 1;
+}
+</style>

pages/thirdJumpMiddlePage/thirdJumpMiddlePage.vue

+<template>
+	<view class="third-jump-page">
+
+		<view v-if="jumpFailed" class="error-container">
+			<button class="retry-btn" @click="retryJump">点击跳转</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, onMounted, getCurrentInstance } from 'vue'
+
+// 获取全局属性
+const { proxy } = getCurrentInstance()
+const $baseUrl = proxy.$baseUrl
+
+// 响应式数据
+const jumpFailed = ref(false)
+const errorMessage = ref('')
+const jumpParams = ref({})
+
+// 页面加载时获取参数
+onMounted(() => {
+	// 获取页面参数
+	const pages = getCurrentPages()
+	const currentPage = pages[pages.length - 1]
+	const options = currentPage.options || {}
+
+	console.log('页面参数 options:', options)
+
+	// 解析跳转参数
+	jumpParams.value = {
+		appId: options.appId || '',
+		path: options.path || '',
+		extraData: options.extraData ? JSON.parse(decodeURIComponent(options.extraData)) : {},
+		envVersion: options.envVersion || 'release',
+	}
+
+	// 执行跳转
+	executeJump()
+})
+
+// 执行跳转
+const executeJump = () => {
+	if (!jumpParams.value.appId) {
+		showError('缺少必要参数：appId')
+		return
+	}
+
+	console.log('开始跳转，参数:', jumpParams.value)
+
+	// 调用跳转方法
+	uni.navigateToMiniProgram({
+		appId: jumpParams.value.appId,
+		path: jumpParams.value.path,
+		extraData: jumpParams.value.extraData,
+		envVersion: jumpParams.value.envVersion,
+		success: (res) => {
+			console.log('跳转成功:', res)
+			// 跳转成功后可以做一些清理工作
+		},
+		fail: (err) => {
+			console.error('跳转失败:', err)
+			showError(`跳转失败：${err.errMsg || '未知错误'}`)
+		}
+	})
+}
+
+// 显示错误信息
+const showError = (message) => {
+	errorMessage.value = message
+	jumpFailed.value = true
+}
+
+// 重试跳转
+const retryJump = () => {
+	jumpFailed.value = false
+	errorMessage.value = ''
+	executeJump()
+}
+
+// 返回上一页
+const goBack = () => {
+	uni.navigateBack({
+		delta: 1
+	})
+}
+</script>
+
+<style lang="less" scoped>
+.third-jump-page {
+	min-height: 100vh;
+	background: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 40rpx;
+}
+
+
+
+.error-container {
+	text-align: center;
+	color: white;
+}
+
+
+.retry-btn {
+	width: 200rpx;
+	height: 80rpx;
+	border-radius: 40rpx;
+	border: none;
+	font-size: 28rpx;
+	margin: 0 20rpx;
+}
+
+.retry-btn {
+	background: #4CAF50;
+	color: white;
+}
+</style>

utils/thirdJump.js

+/**
+ * 第三方跳转工具函数
+ */
+
+/**
+ * 跳转到第三方小程序
+ * @param {Object} params 跳转参数
+ * @param {string} params.appId 目标小程序appId
+ * @param {string} params.path 跳转路径
+ * @param {Object} params.extraData 额外数据
+ * @param {string} params.envVersion 环境版本
+ * @param {string} params.appName 应用名称
+ */
+export function jumpToThirdParty(params) {
+  const {
+    appId,
+    path = '',
+    extraData = {},
+    envVersion = 'release',
+    appName = '目标应用'
+  } = params
+
+  if (!appId) {
+    console.error('缺少必要参数：appId')
+    return
+  }
+
+  // 构建跳转参数
+  const jumpParams = {
+    appId,
+    path,
+    extraData: encodeURIComponent(JSON.stringify(extraData)),
+    envVersion,
+    appName
+  }
+
+  // 跳转到中间页
+  uni.navigateTo({
+    url: `/pages/thirdJumpMiddlePage/thirdJumpMiddlePage?${Object.keys(jumpParams)
+      .map(key => `${key}=${jumpParams[key]}`)
+      .join('&')}`
+  })
+}
+
+/**
+ * 直接跳转（不经过中间页）
+ * @param {Object} params 跳转参数
+ */
+export function directJump(params) {
+  const {
+    appId,
+    path = '',
+    extraData = {},
+    envVersion = 'release'
+  } = params
+
+  if (!appId) {
+    console.error('缺少必要参数：appId')
+    return
+  }
+
+  uni.navigateToMiniProgram({
+    appId,
+    path,
+    extraData,
+    envVersion,
+    success: (res) => {
+      console.log('跳转成功:', res)
+    },
+    fail: (err) => {
+      console.error('跳转失败:', err)
+      // 跳转失败时，可以跳转到中间页进行重试
+      jumpToThirdParty(params)
+    }
+  })
+}
+
+/**
+ * 检查是否支持跳转
+ * @returns {boolean}
+ */
+export function canJumpToMiniProgram() {
+  // #ifdef MP-WEIXIN
+  return true
+  // #endif
+  
+  // #ifndef MP-WEIXIN
+  return false
+  // #endif
+}
+
+/**
+ * 获取跳转状态
+ * @param {string} appId 目标小程序appId
+ * @returns {Promise}
+ */
+export function getJumpStatus(appId) {
+  return new Promise((resolve, reject) => {
+    // #ifdef MP-WEIXIN
+    uni.getSetting({
+      success: (res) => {
+        if (res.authSetting['scope.userInfo']) {
+          resolve({ canJump: true, message: '可以跳转' })
+        } else {
+          resolve({ canJump: false, message: '需要授权' })
+        }
+      },
+      fail: reject
+    })
+    // #endif
+    
+    // #ifndef MP-WEIXIN
+    resolve({ canJump: false, message: '当前平台不支持跳转' })
+    // #endif
+  })
+}