You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3.2 KiB

Raw Blame History Unescape Escape

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> |

总结

方式	适用平台	适用场景	适配难度
URL Scheme	iOS/Android	适用于已知 APP	低
Universal Links / Deep Link	iOS/Android	更安全，适用于已安装 APP	高
Intent Scheme	Android	适用于 Android	中
iframe	部分浏览器	适用于尝试拉起 APP	低
综合方案	iOS/Android	适用于多种情况	中

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

3.2 KiB Raw Blame History Unescape Escape