如何在移动端浏览器点击按钮后启动App（JS/React实现深度链接）

核心思路 #

• 借助App的自定义URL Scheme（如myapp://page/home）尝试唤起App，系统会优先响应已注册的Scheme
• 通过定时器结合页面可见性判断唤起是否成功：若页面始终处于激活状态，说明唤起失败，跳转对应应用商店
• 区分iOS/Android平台，分别跳转App Store和Google Play

原生JavaScript实现 #

function openAppOrStore() {
  // 替换为你的App自定义Scheme
  const appScheme = 'myapp://page/home';
  // 替换为你的应用商店对应链接
  const storeLinks = {
    ios: 'https://apps.apple.com/cn/app/your-app-id',
    android: 'https://play.google.com/store/apps/details?id=your.package.name'
  };

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

  let pageActive = true;
  window.addEventListener('visibilitychange', () => {
    pageActive = !document.hidden;
  });

  // 尝试唤起App
  window.location.href = appScheme;

  // 1.5秒后判断是否唤起成功
  setTimeout(() => {
    if (pageActive) {
      const targetUrl = isIOS ? storeLinks.ios : isAndroid ? storeLinks.android : '';
      targetUrl && (window.location.href = targetUrl);
    }
  }, 1500);
}

// 绑定按钮点击事件
document.getElementById('openAppBtn').addEventListener('click', openAppOrStore);

React 函数组件实现 #

const AppLaunchButton = () => {
  const appScheme = 'myapp://page/home';
  const storeLinks = {
    ios: 'https://apps.apple.com/cn/app/your-app-id',
    android: 'https://play.google.com/store/apps/details?id=your.package.name'
  };

  const handleOpenApp = () => {
    const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
    const isAndroid = /Android/i.test(navigator.userAgent);
    let pageActive = true;

    const handleVisibilityChange = () => {
      pageActive = !document.hidden;
    };
    window.addEventListener('visibilitychange', handleVisibilityChange);

    window.location.href = appScheme;

    setTimeout(() => {
      window.removeEventListener('visibilitychange', handleVisibilityChange);
      if (pageActive) {
        const targetUrl = isIOS ? storeLinks.ios : isAndroid ? storeLinks.android : '';
        targetUrl && (window.location.href = targetUrl);
      }
    }, 1500);
  };

  return (
    <button onClick={handleOpenApp} style={{ padding: '10px 20px', fontSize: '16px' }}>
      打开我的应用
    </button>
  );
};

export default AppLaunchButton;

关键注意事项 #

• 自定义Scheme配置：需要App开发人员在App内提前注册对应Scheme，iOS需在Info.plist中配置，Android需在AndroidManifest.xml中配置
• 定时器时长：建议设置1-2秒，过短可能误判App启动慢的情况，过长会影响用户体验
• iOS 特殊处理：iOS 14+对Scheme唤起限制更严格，部分浏览器（如Safari）可能需要用户授权，也可考虑使用Universal Links（稳定性更高，但配置更复杂）
• 浏览器兼容性：不同内置浏览器（如微信）可能需要额外配置（如微信开放平台备案），需针对性测试
• 测试要求：必须在真实移动端设备上测试，模拟器无法准确模拟唤起逻辑

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