Hey，这个需求就是典型的App深度链接（Deep Linking）+ 回退跳转应用商店场景，我帮你拆解完整的实现方案——很多人尝试后没生效，大概率是忽略了APP端的配置环节，光靠前端JS是搞不定的！

先尝试通过自定义协议唤起已安装的APP，若在指定时间内唤起失败（说明未安装APP），则自动跳转至对应平台的应用商店。但要注意：iOS和Android的唤起逻辑、浏览器限制存在差异，且APP端必须提前完成配置。

这是很多人踩坑的核心点——前端代码写得再对，APP没配置就根本唤起不了。

iOS端配置 #

• 自定义URL Scheme：在Xcode的Info.plist中添加CFBundleURLTypes字段，设置CFBundleURLSchemes为你的唯一协议（比如myapp，这样唤起链接就是myapp://开头）。
• （推荐）Universal Links：iOS 9+之后，自定义Scheme容易被浏览器拦截，Universal Links更稳定。需要在苹果开发者后台配置关联域名，同时在你的服务器根目录放置apple-app-site-association文件（无后缀），文件内容示例：

  {
    "applinks": {
      "apps": [],
      "details": [
        {
          "appID": "你的TeamID.你的BundleID",
          "paths": ["*"]
        }
      ]
    }
  }
  

Android端配置 #

在AndroidManifest.xml的目标Activity中添加<intent-filter>，配置自定义协议：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 自定义协议，比如myapp:// -->
    <data android:scheme="myapp" />
</intent-filter>

• （推荐）App Links：类似iOS的Universal Links，需要服务器配置assetlinks.json文件，且APP签名与配置匹配，可实现无弹窗直接唤起APP。

以下是兼容iOS和Android的JS代码，核心逻辑是：尝试唤起APP的同时设置定时器，若未成功唤起则跳转应用商店。

function openAppOrStore() {
  // 自定义协议链接，可携带参数，比如 myapp://page/home?param=123
  const appDeepLink = 'myapp://';
  // 应用商店跳转链接
  const storeLinks = {
    ios: 'https://apps.apple.com/cn/app/你的APP名称/idxxxxxx',
    android: 'https://play.google.com/store/apps/details?id=你的APP包名'
  };

  const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
  const isAndroid = /Android/i.test(navigator.userAgent);

  let fallbackTimer;
  // 设置1.5秒超时：若未唤起APP则跳转商店
  fallbackTimer = setTimeout(() => {
    if (isIOS) {
      window.location.href = storeLinks.ios;
    } else if (isAndroid) {
      window.location.href = storeLinks.android;
    } else {
      alert('请在手机设备上打开');
    }
  }, 1500);

  // 尝试唤起APP
  if (isIOS) {
    // iOS用iframe唤起，避免浏览器拦截（需用户主动点击触发）
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = appDeepLink;
    document.body.appendChild(iframe);
    setTimeout(() => document.body.removeChild(iframe), 2000);
  } else if (isAndroid) {
    // Android直接跳转自定义协议
    window.location.href = appDeepLink;
  }

  // 若APP成功唤起，页面会被隐藏，此时清除定时器
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) clearTimeout(fallbackTimer);
  });
  // 兼容iOS的pagehide事件
  window.addEventListener('pagehide', () => clearTimeout(fallbackTimer));
}

// 绑定触发逻辑（必须是用户主动操作，比如点击按钮，避免被浏览器拦截）
document.getElementById('open-app-btn').addEventListener('click', openAppOrStore);

• APP端配置缺失：这是最常见原因！先自行测试：在手机浏览器输入myapp://，看能否唤起APP，不能的话先排查APP配置。
• 浏览器拦截：iOS Safari、Android Chrome都禁止非用户交互（比如页面自动加载）时唤起APP，必须通过用户点击按钮触发。
• 定时器时间不合理：时间太短可能APP还未启动就跳转商店，太长会让用户等待，1000-2000ms是合适的区间。
• Universal Links/App Links优先级更高：如果配置了这类链接，系统会优先使用，需确保服务器上的配置文件可正常访问（无HTTPS报错）。

• 优先使用Universal Links（iOS）/App Links（Android）：无需JS逻辑，用户打开你的域名http://somedomain.com时，系统会自动判断是否打开APP或跳转商店，体验更流畅。
• 第三方服务：比如Branch、Firebase Dynamic Links，可简化跨平台配置，还能提供唤起统计、参数传递等功能。

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