H5 如何实现唤起 APP兼容版

在移动端开发中，H5页面唤起本地APP是一个非常常见的需求。本文将介绍如何在H5页面中实现唤起本地APP的具体操作。

常见的唤起APP方式

URL Scheme

URL Scheme是一种特殊的URL协议，可以在URL中携带参数，通过调用该URL来唤起本地APP。例如，微信的URL Scheme为weixin://，支付宝的URL Scheme为alipay://。

唤起APP的实现方式是在H5页面中通过JavaScript代码拼接出唤起APP的URL，并将该URL作为链接或按钮的href属性值或JavaScript事件绑定中的location.href赋值即可实现。

<!-- 通过链接方式唤起APP -->
<a href="weixin://">打开微信</a>
<!-- 通过绑定事件方式唤起APP -->
<button onclick="location.href='weixin://'">打开微信</button>

以下是一些国内常见的URL Scheme：

• 微信 weixin://
• 支付宝 alipay://
• 淘宝 tbopen://
• 美团 imeituan://
• 大众点评 dianping://
• 京东 openApp.jdMobile://
• 饿了么 eleme://
• 滴滴出行 diditaxi://
• 唯品会 vipshop://
• 豆瓣 douban://
• 网易云音乐 orpheus://
• 知乎 zhihu://
• 新浪微博 sinaweibo://
• QQ mqq:// 需要注意的是，不同的版本和不同的应用可能会有不同的URL Scheme，需要根据实际情况进行调整。

Universal Link

Universal Link是一种苹果公司提供的新的URL协议，它能够在URL中携带参数，并且具有更好的用户体验。与URL Scheme不同的是，Universal Link是由苹果公司提供的服务，需要在APP中进行相应的配置才能生效。 唤起APP的实现方式与URL Scheme类似，只需要将Universal Link作为链接或按钮的href属性值或JavaScript事件绑定中的location.href赋值即可实现。

<!-- 通过链接方式唤起APP -->
<a href="https://example.com/apple-app-site-association">打开APP</a>
<!-- 通过绑定事件方式唤起APP -->
<button onclick="location.href='https://example.com/apple-app-site-association'">打开APP</button>

Schemaless

Schemaless是一种不需要特定的URL协议即可实现唤起APP的方式。它可以通过在H5页面中进行JavaScript代码编写，实现通过APP的包名或应用名称来唤起APP。

// 通过包名方式唤起APP
window.location.href = 'intent://example.com#Intent;scheme=example;package=com.example;end';
// 通过应用名称方式唤起APP
window.location.href = 'intent://example.com#Intent;scheme=example;package=com.example;end';

App link

用于替代传统的URL Scheme。与URL Scheme不同的是，App link不需要在应用内注册，也不需要担心链接被其他应用占用的问题。以下是一个简单的App link示例：

https://www.example.com/path/to/content?param1=value1&param2=value2#target

其中，https代表使用的协议，www.example.com代表应用的域名，path/to/content代表应用内的页面路径，param1=value1&param2=value2代表传递的参数，target代表跳转到的锚点。使用App link方式打开链接时，系统会先尝试在应用内打开链接，如果应用不存在或者应用内无法处理该链接，则会尝试在浏览器中打开链接。 为了让应用支持App link，需要在应用的AndroidManifest.xml或者Info.plist文件中添加相应的配置。例如，在AndroidManifest.xml文件中，可以添加以下代码：

<activity
    android:name=".MainActivity"
    android:label="@string/app_name">
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:host="www.example.com"
            android:pathPrefix="/path/to/content"
            android:scheme="https" />
    </intent-filter>
</activity>

其中，autoVerify="true"表示使用自动验证方式，可以让应用自动进行验证，无需进行手动验证。android:host代表应用的域名，android:pathPrefix代表应用内的页面路径，android:scheme代表使用的协议。在这个例子中，当打开https://www.example.com/path/to/content链接时，系统会尝试在应用内打开链接。

需要注意的是，使用App link方式打开链接需要系统支持，目前仅在Android 6.0及以上的系统中支持。在低版本的系统中，仍需要使用URL Scheme方式打开链接。

唤起APP的注意事项

唤起APP不是在所有情况下都有效的，需要注意以下几点：

• 仅限于移动端使用。
• URL Scheme或Universal Link需要在本地APP中进行相应的配置才能生效。
• 不同的浏览器对唤起APP的方式支持情况不同，需要进行相应的兼容性处理。
• 如果用户没有安装对应的APP，则唤起操作将无效，需要对此情况进行相应的处理。

不同的浏览器对唤起APP的方式支持情况不同,以下是一个兼容性较好的openApp函数，同时支持设置超时时间和唤起失败后的处理方式。

function openApp(schemeUrl, timeout, failCallback) {
  var ua = navigator.userAgent.toLowerCase();
  var startTime = Date.now();
  var iframe;
  var timer;
  // 微信浏览器，采用JSAPI方式唤起微信APP
  if (ua.indexOf('micromessenger') !== -1) {
    if (typeof WeixinJSBridge === 'undefined') {
      if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', function() {
          WeixinJSBridge.invoke('launchApplication', {
            'schemeUrl': schemeUrl
          }, function(res) {});
        }, false);
      } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', function() {
          WeixinJSBridge.invoke('launchApplication', {
            'schemeUrl': schemeUrl
          }, function(res) {});
        });
        document.attachEvent('onWeixinJSBridgeReady', function() {
          WeixinJSBridge.invoke('launchApplication', {
            'schemeUrl': schemeUrl
          }, function(res) {});
        });
      }
    } else {
      WeixinJSBridge.invoke('launchApplication', {
        'schemeUrl': schemeUrl
      }, function(res) {});
    }
  } else {
    // 其他浏览器，采用URL Scheme方式唤起APP
    iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = schemeUrl;
    document.body.appendChild(iframe);
  }
  timer = setTimeout(function() {
    var endTime = Date.now();
    if (endTime - startTime < timeout + 200) {
      // APP未唤起，执行失败回调函数
      failCallback && failCallback();
    }
  }, timeout);
  window.onblur = function() {
    clearTimeout(timer);
  };
  window.onfocus = function() {
    clearTimeout(timer);
  };
}

使用方式：

openApp('weixin://', 2000, function() {
  // 唤起失败，执行处理逻辑
});

其中，schemeUrl为唤起链接，timeout为超时时间，failCallback为唤起失败后的处理函数。需要注意的是，微信浏览器不支持iframe方式唤起APP，如果需要在微信浏览器中唤起APP，需要使用JSAPI方式。

当用户没有安装对应的APP时，唤起失败时，我们可以通过以下几种方式处理：

提示用户下载安装APP。

可以在唤起链接或按钮的点击事件中加入一个判断，如果唤起失败，则弹出提示框，提示用户下载安装对应的APP。

function openApp() {
  window.location.href = 'weixin://';
  setTimeout(function() {
    if (document.hidden || document.webkitHidden) {
      // 唤起失败，提示用户下载安装APP
      alert('请下载安装对应的APP');
    }
  }, 2000);  // 设置一个2秒的定时器，判断是否唤起成功
}

跳转到APP下载页面。可以在H5页面中添加一个下载APP的按钮，点击该按钮时跳转到APP下载页面。

<a href="https://example.com/download">下载APP</a>

提供选择性跳转到H5页面的选项。

可以在唤起链接或按钮的点击事件中加入一个判断，如果唤起失败，则提供一个跳转到H5页面的选项。

function openApp() {
  window.location.href = 'weixin://';
  setTimeout(function() {
    if (document.hidden || document.webkitHidden) {
      // 唤起失败，提供跳转到H5页面的选项
      if (confirm('未检测到对应的APP，是否跳转到H5页面？')) {
        window.location.href = 'https://example.com';
      }
    }
  }, 2000);  // 设置一个2秒的定时器，判断是否唤起成功
}

以上是常见的处理方式，可以根据具体的需求选择合适的处理方式。

总结

以上就是H5实现唤起APP的具体操作。在实际开发中，需要根据具体的场景选择合适的唤起方式，并进行相应的兼容性处理和错误处理。