H5页面唤醒App的方式

鱼樱前端
399 阅读3分钟

H5页面唤醒App通常有几种方式，可以根据不同的场景和需求选择合适的方法：

  1. URL Scheme

    • 适用于iOS和部分Android设备。
    • 通过在H5页面中设置超链接或使用JavaScript动态创建链接，指向特定的URL Scheme地址来启动App。
    • 例如：<a href="myapp://home">打开我的应用</a>。

  2. Universal Links (iOS)  / App Links (Android)

    • 更安全且推荐的做法，特别是在iOS 9及以上版本中。
    • 需要在服务器上配置相关文件（如苹果的apple-app-site-association文件），并进行域名关联设置。
    • 用户点击链接后，系统会检查是否有安装对应的应用，并决定是否打开。

  3. 自定义协议 + JSBridge

    • 在H5页面中发送一个请求到自定义协议（如myapp://bridge?method=showHome）。
    • 如果App已安装，则通过JSBridge实现H5与App之间的交互。
    • 这种方式可以执行更复杂的操作，如传递参数、调用App内的方法等。

  4. 使用SDK

    • 对于某些特定类型的App（如微信、支付宝），可以通过集成官方提供的SDK来实现更加稳定可靠的唤起功能。
    • SDK通常会处理各种兼容性和安全性问题，简化开发流程。

  5. 二维码扫描

    • 特定场景下，如小程序或特定App内，可通过扫描二维码直接打开指定页面。
    • 不是最常见的H5唤醒方式，但在某些场合下非常有效。

  6. Hybrid模式

    • 将H5页面嵌入到App内部WebView中运行。
    • 可以通过Webview与原生环境之间的通信机制（如WKWebView JavaScript接口）实现无缝切换体验。

每种方法都有其适用场景和局限性，在实际应用时需根据具体需求和技术条件选择最合适的方案。

下面我们举例说明各种场景使用案例

1. URL Scheme

示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5唤醒App示例</title>
</head>
<body>
    <h1>点击按钮唤醒App</h1>
    <button id="openAppButton">打开App</button>

    <script>
        document.getElementById('openAppButton').addEventListener('click', function() {
            // 尝试使用URL Scheme唤醒App
            var iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            iframe.src = 'myapp://home';
            document.body.appendChild(iframe);
            setTimeout(function() {
                document.body.removeChild(iframe);
            }, 1000);

            // 如果App未安装，则跳转到下载页面
            window.location.href = 'https://example.com/download';
        });
    </script>
</body>
</html>

2. Universal Links (iOS) / App Links (Android)

示例代码：

首先，你需要在服务器上配置相关的文件，例如对于iOS的 apple-app-site-association 文件。

配置文件 apple-app-site-association
{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "1234567890.com.example",
        "paths": ["/home", "/profile"]
      }
    ]
  }
}
H5页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5唤醒App示例</title>
</head>
<body>
    <h1>点击按钮唤醒App</h1>
    <button id="openAppButton">打开App</button>

    <script>
        document.getElementById('openAppButton').addEventListener('click', function() {
            // 尝试使用Universal Links唤醒App
            window.location.href = 'https://example.com/home';
        });
    </script>
</body>
</html>

3. 自定义协议 + JSBridge

示例代码：

假设你已经实现了JSBridge，可以通过以下代码来调用。

H5页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5唤醒App示例</title>
</head>
<body>
    <h1>点击按钮唤醒App</h1>
    <button id="openAppButton">打开App</button>

    <script>
        document.getElementById('openAppButton').addEventListener('click', function() {
            // 尝试使用自定义协议唤醒App
            var iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            iframe.src = 'myapp://bridge?method=showHome';
            document.body.appendChild(iframe);
            setTimeout(function() {
                document.body.removeChild(iframe);
            }, 1000);

            // 如果App未安装，则跳转到下载页面
            window.location.href = 'https://example.com/download';
        });
    </script>
</body>
</html>

4. 使用SDK

示例代码：

假设你已经集成了某个特定App的SDK，比如微信SDK。

H5页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5唤醒App示例</title>
</head>
<body>
    <h1>点击按钮唤醒App</h1>
    <button id="openAppButton">打开App</button>

    <script>
        document.getElementById('openAppButton').addEventListener('click', function() {
            // 假设已经加载了微信SDK
            if (typeof WeixinJSBridge === 'undefined') {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
                        WeixinJSBridge.invoke(
                            'openURL',
                            { url: 'https://example.com/home' },
                            function(res) {
                                console.log(res.err_msg);
                            }
                        );
                    }, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', function onBridgeReady() {
                        WeixinJSBridge.invoke(
                            'openURL',
                            { url: 'https://example.com/home' },
                            function(res) {
                                console.log(res.err_msg);
                            }
                        );
                    });
                    document.attachEvent('onWeixinJSBridgeError', function(res) {
                        console.log(res.err_msg);
                    });
                }
            } else {
                WeixinJSBridge.invoke(
                    'openURL',
                    { url: 'https://example.com/home' },
                    function(res) {
                        console.log(res.err_msg);
                    }
                );
            }
        });
    </script>
</body>
</html>

好了以上就是H5页面唤醒App的常用方式举例了~今天就分享到这里。。。如有不对望指正！！！

avatar
文章
阅读
粉丝