jeecgBootUniapp/src/pages/linktoapp/index.vue

<route lang="json5" type="page">
{
    layout: 'default',
    style: {
        navigationStyle: 'custom',
        navigationBarTitleText: '跳转到APP',
    },
}
</route>

<template>
    <view class="container">
        <!-- 顶部占位 -->
        <view class="placeholder"></view>
        
        <!-- 主要内容 -->
        <view class="content">
            <view class="logo-area">
                <uni-title :title="'数智产销APP'" type="h1" color="white" />
            </view>
            
            <view class="action-area">
                <!-- 主跳转按钮 -->
                <button class="action-btn" @click="handleJump">立即打开APP</button>
		<uni-section title="自定义颜色" type="line" padding>
			<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" color="#007BFF"></uni-link>
		</uni-section>
                <!-- 备用方案 -->
                <view class="tips" v-if="showTips">
                    <text>跳转失败？请尝试：</text>
                    <button class="secondary-btn" @click="openInBrowser">在浏览器中打开</button>
                    <button class="secondary-btn" @click="copyDownloadLink">复制下载链接</button>
                    <button class="secondary-btn" @click="tryIntent">高级跳转方式</button>
                </view>
                
                <!-- 特殊浏览器指引 -->
                <view class="guide" v-if="showGuide">
                    <text>操作指引：</text>
                    <text>1. 点击右上角 ⋮ 或 ••• 按钮</text>
                    <text>2. 选择"在浏览器中打开"</text>
                    <text>3. 在浏览器中点击"打开APP"按钮</text>
                </view>
            </view>
        </view>
        
        <!-- 隐藏的iframe用于Intent跳转 -->
        <iframe id="intentIframe" style="display:none;"></iframe>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const showTips = ref(false)
const showGuide = ref(false)

// 尝试直接Scheme跳转
const trySchemeJump = () => {
    window.location.href = 'szcxapp://pages/login/login'
    
    setTimeout(() => {
        if (!document.hidden) {
            showTips.value = true
            detectSpecialBrowser()
        }
    }, 1000)
}

// Android Intent方式跳转
const tryIntentJump = () => {
    const iframe = document.getElementById('intentIframe')
    iframe.src = `intent://open#Intent;scheme=szcxapp;package=${getAppPackageName()};end`
    
    // setTimeout(() => {
    //     if (!document.hidden) {
    //         openInBrowser()
    //     }
    // }, 1000)
}

// 获取应用包名（根据实际情况修改）
const getAppPackageName = () => {
    return 'uni.UNI1B02D50' // 替换为你的实际包名
}

// 处理跳转按钮点击
const handleJump = () => {
    trySchemeJump()
}

// 高级跳转方式
const tryIntent = () => {
    tryIntentJump()
}

// 在系统浏览器中打开
const openInBrowser = () => {
    window.open('https://36.112.48.190//jeecg-boot/sys/common/static//D://opt//AppUpdate//apk//数智产销.apk')
}

// 复制下载链接
const copyDownloadLink = () => {
    uni.setClipboardData({
        data: 'https://36.112.48.190//jeecg-boot/sys/common/static//D://opt//AppUpdate//apk//数智产销.apk',
        success: () => {
            uni.showToast({
                title: '链接已复制',
                icon: 'success'
            })
        }
    })
}

// 检测是否在特殊浏览器中
const detectSpecialBrowser = () => {
    const ua = navigator.userAgent.toLowerCase()
    if (ua.indexOf('micromessenger') > -1 || 
        ua.indexOf('weibo') > -1 || 
        ua.indexOf('qq') > -1 ||
        ua.indexOf('your-app-internal-browser') > -1) {
        showGuide.value = true
    }
}

onLoad(() => {
    // 页面加载时自动尝试跳转
    trySchemeJump()
})
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #0a2463;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 20rpx 20rpx;
    background-position: 0 0, 10rpx 10rpx;
}

.placeholder {
    height: var(--status-bar-height);
}

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40rpx;
}

.logo-area {
    display: flex;
    justify-content: center;
    margin-top: 80rpx;
}

.action-area {
    margin-bottom: 80rpx;
}

.action-btn {
    background-color: #007aff;
    color: white;
    border-radius: 50rpx;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    margin-bottom: 40rpx;
}

.secondary-btn {
    background-color: transparent;
    color: #007aff;
    border: 1rpx solid #007aff;
    border-radius: 50rpx;
    padding: 15rpx 30rpx;
    font-size: 28rpx;
    margin: 10rpx 0;
}

.tips {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    margin-top: 40rpx;
}

.guide {
    display: flex;
    flex-direction: column;
    color: #ffffff;
    margin-top: 40rpx;
    padding: 20rpx;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10rpx;
}

.guide text {
    margin-bottom: 10rpx;
    font-size: 28rpx;
}
</style>