基于React+Capacitor的App：无需网站实现链接跳转应用或应用商店

核心思路 #

不用自有网站的话，直接借助Capacitor的原生API和系统的深度链接机制，就能处理「唤起已安装APP」和「未安装时跳转应用商店」的场景——本质是先尝试唤起APP，失败则自动跳转商店。

具体实现步骤 #

1. 配置深度链接（Deep Link） #

先给Android和iOS应用配置自定义scheme，让外部链接能直接触发APP唤起：

• Android：修改android/app/src/main/AndroidManifest.xml，添加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" />
      <!-- 替换为你的自定义scheme，比如myapp:// -->
      <data android:scheme="myapp" />
  </intent-filter>
  

• iOS：修改ios/App/App/Info.plist，添加URL Types：

  <key>CFBundleURLTypes</key>
  <array>
      <dict>
          <key>CFBundleURLSchemes</key>
          <array>
              <!-- 替换为你的自定义scheme -->
              <string>myapp</string>
          </array>
      </dict>
  </array>
  

2. 用Capacitor插件写跳转逻辑 #

借助@capacitor/app和@capacitor/launcher插件，在React代码里直接处理唤起与跳转：

安装依赖

npm install @capacitor/app @capacitor/launcher
npx cap sync

编写核心逻辑

在React组件中添加如下代码：

import { Capacitor } from '@capacitor/core';
import { Launcher } from '@capacitor/launcher';

const handleAppRedirect = async () => {
  try {
    // 尝试通过自定义scheme唤起APP
    await Launcher.openUrl({ url: 'myapp://' });
  } catch (error) {
    // 唤起失败，跳转对应应用商店
    if (Capacitor.getPlatform() === 'android') {
      // 替换为你的Android应用包名
      await Launcher.openUrl({ url: 'market://details?id=com.your.app.package' });
    } else if (Capacitor.getPlatform() === 'ios') {
      // 替换为你的iOS应用App Store ID
      await Launcher.openUrl({ url: 'itms-apps://itunes.apple.com/app/idYOUR_APP_ID' });
    }
  }
};

3. 外部链接触发场景（如短信/社交平台） #

如果是外部渠道的链接要触发这个逻辑，不用网站的话可以直接用系统原生的fallback格式：

• Android：使用带 fallback 的intent链接：

  intent://#Intent;scheme=myapp;package=com.your.app.package;S.browser_fallback_url=https://play.google.com/store/apps/details?id=com.your.app.package;end
  

  用户点击后，系统会先尝试唤起APP，失败则自动跳转到Play Store。
• iOS：配置Universal Links后，可在Apple开发者后台设置未安装时的跳转目标为App Store；如果不想配置，直接分发itms-apps://商店链接，同时告知用户「若已安装APP，可直接打开myapp://」。

关键注意事项 #

• 自定义scheme的唤起逻辑在不同浏览器、系统版本可能有差异，建议覆盖主流设备测试；
• Android用market://链接直接打开Play Store应用，比网页版体验更好；
• iOS用itms-apps://链接会直接跳转App Store应用，避免网页跳转的繁琐。

内容的提问来源于stack exchange，提问作者Alperen Yılma