H5打开外部APP

H5开发我们会遇到这样的需求，在页面中打开外部APP。下面我们来总结一下H5打开APP的方式。并详细介绍 URL Scheme 打开方式。

目前常见的唤醒APP方式有：

1：URL Scheme

2：Android intent

3：Safari内置APP广告条

4：Universal Links

方式一：URL Scheme

IOS和Android都支持Scheme，在APP开发时注册一下scheme就可以使用了。如果想跳转指定页面还可以借助URL Router机制。

这种打开APP的方式是现在使用比较多的方式，相对比较简单。但是不同浏览器的错误不同，处理起来比较困难。不同浏览器的支持情况也不同：IOS9以后Safari不再支持js,iframe来触发scheme跳转，并加入了确认机制，这让之前通过js超时机制处理的方式基本不可用。有的应用内置浏览器也不支持这种方式比如：微信、微博等

下面是通过scheme打开app的代码。但是不完全兼容所有浏览器但相对比较稳定，可以参考一下：

/*
* brower:{brower: 浏览器, sys: 浏览器系统}
* appSrc:{android: 安卓app scheme,ios: IOS scheme}
* downSrc:{android: 安卓下载地址,ios: IOS下载地址}
* srtt:默认null用于记录定时器
*/
function openApp(brower, appSrc, downSrc, srtt) {
    let openUrl = function() {
      // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
      // 否则打开a标签的href链接
      if (brower.brower == 'Safari') {
        if (brower.sys === 'ios') {
          window.location.href = appSrc.ios
          if (srtt) clearTimeout(srtt)
          srtt = setTimeout(() => {
            // document.getElementById('dc').innerHTML = '下载1'
            window.location.href = downSrc.ios
          }, 500)
          return true
        } else {
          window.location.href = appSrc.android
        }
      } else {
        let ifr = document.createElement('iframe')
        ifr.src = brower.sys === 'ios' ? appSrc.ios : appSrc.android
        ifr.style.display = 'none'
        document.body.appendChild(ifr)
        window.setTimeout(function() {
          document.body.removeChild(ifr)
        }, 2000)
      }
    }
    if (brower.brower == 'weixin' || brower.brower == 'weibo') {
      // 引导用户在浏览器中打开
      alert('1、请点击页面右上角按钮n2、选择“在浏览器打开”')
      return
    }
    let d = new Date()
    let t0 = d.getTime()
    if (openUrl()) {
    } else {
      let ta = Date.now()
      // document.getElementById('dc').innerHTML = ta - t0
      if (brower.sys === 'android' && ta - t0 > 22) return
      if (brower.sys === 'ios' && ta - t0 > 70) return
      // 由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
      let delay = setInterval(function() {
        let d = new Date()
        let t1 = d.getTime()
        if (t1 - t0 < 3000 && t1 - t0 > 2000) {
          if (brower.sys === 'ios') {
            window.location.href = downSrc.ios
          } else {
            alert('请下载APP')
          }
          // window.location.href = downSrc.android
        }
        if (t1 - t0 >= 3000) {
          clearInterval(delay)
        }
      }, 1000)
    }
  }

此方法支持大部分浏览器打开APP，请根据业务场景修改此方法。

方式二：Android intent

可以看出这是Android特有的方式不支持iOS，使用方法如下：

<!-- 唤醒APP并跳转至指定的path页面 -->
<a href="intent://<role>/<path>#Intent;scheme=<scheme>;package=com. domain;end"">打开APP</a>

如果手机能找到相应的APP就打开否则跳转到手机默认的应用商店。

次方法相对scheme优点是打开失败后可以跳转到失败URL,并且可以通过参数 S.browser_fallback_url 指定URL

方式三：Safari内置APP广告

通过在head中添加meta属性为apple-itunes-app的标签来实现。次方法只针对Safari

详细文档请参考：链接

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

方式四：Universal Links

Universal Links 通用链接是2015 WWDC上Apple推出的iOS 9的一个功能。

如果App支持，那么就可以通过http/https链接来直接打开app,如果App没有安装可以打开自定义页面

更多关于Universal Links 的使用请参考：链接

GitHub - AlanZhang001/H5CallUpNative: H5端唤醒移动客户端程序 这个项目可以研究一下

最后

以上就是淡定舞蹈为你收集整理的H5打开外部APP的全部内容，希望文章能够帮你解决H5打开外部APP所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。