|
|
# [H5 页面中实现跳转到其他 APP](https://www.cnblogs.com/yuzhihui/p/18707478)
|
|
|
|
|
|
在 H5 页面中跳转到其他 APP，可以使用以下几种方式：
|
|
|
|
|
|
### 1\. **URL Scheme（自定义协议）**
|
|
|
|
|
|
许多 APP 都支持 URL Scheme 方式的跳转，例如：
|
|
|
|
|
|
```html
|
|
|
| | |
|
|
|
| --- | --- |
|
|
|
| | <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+，不会弹出确认框，用户体验更好。
|
|
|
|
|
|
**示例：**
|
|
|
|
|
|
```html
|
|
|
| | |
|
|
|
| --- | --- |
|
|
|
| | <a href="https://yourdomain.com/path">打开 APP</a> |
|
|
|
```
|
|
|
|
|
|
### 3\. **Intent Scheme（Android 专属）**
|
|
|
|
|
|
在 Android 设备上可以使用 `intent://` 方案：
|
|
|
|
|
|
```html
|
|
|
| | |
|
|
|
| --- | --- |
|
|
|
| | <a href="intent://path#Intent;scheme=yourapp;package=com.example.app;end;" |
|
|
|
| | >打开 APP</a |
|
|
|
| | > |
|
|
|
```
|
|
|
|
|
|
* 若 APP 已安装，则直接打开。
|
|
|
* 若 APP 未安装，则可跳转到 Google Play。
|
|
|
|
|
|
### 4\. **iframe 方式（部分浏览器支持）**
|
|
|
|
|
|
```html
|
|
|
| | |
|
|
|
| --- | --- |
|
|
|
| | <iframe src="yourapp://path" style="display: none;"></iframe> |
|
|
|
```
|
|
|
|
|
|
* 可用于尝试静默拉起 APP，但可能被浏览器拦截。
|
|
|
|
|
|
### 5\. **混合方式（兼容性方案）**
|
|
|
|
|
|
综合以上方法，推荐使用 JS 处理：
|
|
|
|
|
|
```html
|
|
|
| | |
|
|
|
| --- | --- |
|
|
|
| | <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）。 |