H5 頁面中實現跳轉到其他 APP

在 H5 頁面中跳轉到其他 APP，可以使用以下幾種方式：

1. URL Scheme（自定義協議）

許多 APP 都支持 URL Scheme 方式的跳轉，例如：

<a href="weixin://">打開微信</a>
<a href="alipay://">打開支付寶</a>
<a href="yourapp://path">打開自定義 APP</a>

注意：

• 需要目標 APP 支持 URL Scheme，未安裝 APP 時會無響應或報錯。
• 在 iOS 9+ 之後，需在 info.plist 中配置 LSApplicationQueriesSchemes。

2. Universal Links（iOS）& Deep Link（Android）

Universal Links（iOS）和 Deep Link（Android）可以更安全地跳轉到 APP，且未安裝時可跳轉至 Web 頁面。

• 需要服務端配置特定文件（如 apple-app-site-association）。
• 適用於 iOS 9+，不會彈出確認框，用户體驗更好。

示例：

<a href="https://yourdomain.com/path">打開 APP</a>

3. Intent Scheme（Android 專屬）

在 Android 設備上可以使用 intent:// 方案：

<a href="intent://path#Intent;scheme=yourapp;package=com.example.app;end;"
  >打開 APP</a
>

• 若 APP 已安裝，則直接打開。
• 若 APP 未安裝，則可跳轉到 Google Play。

4. iframe 方式（部分瀏覽器支持）

<iframe src="yourapp://path" style="display: none;"></iframe>

• 可用於嘗試靜默拉起 APP，但可能被瀏覽器攔截。

5. 混合方式（兼容性方案）

綜合以上方法，推薦使用 JS 處理：

<script>
  function openApp() {
    var schemeUrl = "yourapp://path";
    var storeUrl = "https://yourapp.com/download"; // APP 下載地址

    var ua = navigator.userAgent.toLowerCase();
    var isAndroid = ua.indexOf("android") > -1;
    var isIOS = ua.indexOf("iphone") > -1 || ua.indexOf("ipad") > -1;

    if (isIOS) {
      window.location.href = schemeUrl;
      setTimeout(() => {
        window.location.href = storeUrl;
      }, 2000);
    } else if (isAndroid) {
      window.location.href = schemeUrl;
      setTimeout(() => {
        window.location.href = storeUrl;
      }, 2000);
    } else {
      window.location.href = storeUrl;
    }
  }
</script>

<button onclick="openApp()">打開 APP</button>

總結

如果 APP 需要兼容性更好的跳轉方式，建議結合 Universal Links（iOS）和 Deep Link（Android）。