Vue.js 3实现手机已安装第三方应用唤起方案咨询

核心思路 #

利用浏览器的应用协议唤起机制，结合页面可见性检测判断唤起是否成功：

1. 优先尝试唤起MercadoLibre的应用协议
2. 设置定时器，若指定时间内页面仍处于可见状态（说明唤起失败），则跳转对应平台的应用商店
3. 页面切换至后台时（说明唤起成功），立即清除定时器终止后续跳转逻辑

实现代码（Vue 3 <script setup> 写法） #

<template>
  <button @click="openMercadoLibre">打开MercadoLibre</button>
</template>

<script setup>
import { onUnmounted } from 'vue'

let timer = null
let visibilityListener = null

const openMercadoLibre = () => {
  // 替换为可用的MercadoLibre唤起协议，优先尝试ml://（部分地区应用使用）
  const appDeepLink = 'ml://home'
  // 各平台应用商店链接
  const storeLinks = {
    ios: 'https://apps.apple.com/us/app/mercadolibre/id489812564',
    android: 'https://play.google.com/store/apps/details?id=com.mercadolibre'
  }

  // 尝试唤起应用
  window.location.href = appDeepLink

  // 定义页面可见性变化的处理逻辑
  visibilityListener = () => {
    if (document.visibilityState === 'hidden') {
      clearTimeout(timer)
    }
  }
  document.addEventListener('visibilitychange', visibilityListener)

  // 检测唤起是否失败
  timer = setTimeout(() => {
    if (document.visibilityState === 'visible') {
      // 判断当前设备平台
      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
      window.location.href = isIOS ? storeLinks.ios : storeLinks.android
    }
    // 清理监听
    document.removeEventListener('visibilitychange', visibilityListener)
  }, 1000)
}

// 组件卸载时清理定时器和监听
onUnmounted(() => {
  if (timer) clearTimeout(timer)
  if (visibilityListener) {
    document.removeEventListener('visibilitychange', visibilityListener)
  }
})
</script>

关键注意事项 #

• 协议适配：若ml://home无效，可尝试mercadolibre://、mercadolibre://search等路径，不同地区的MercadoLibre应用Scheme可能存在差异，可通过抓包工具或官方开发者文档确认正确协议
• 定时器时长：1000ms是兼顾用户体验和检测准确性的合理值，可根据实际测试调整
• 移动端测试：桌面端无法唤起应用，会直接跳转应用商店，必须在iOS/Android真机上验证功能
• iOS系统限制：iOS上唤起应用时会弹出系统提示，此为系统默认行为，无法通过代码屏蔽

内容的提问来源于stack exchange，提问作者Jis