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
如果手机能找到相应的APP就打开否则跳转到手机默认的应用商店。

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

方式三:Safari内置APP广告

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

详细文档请参考:链接


方式四:Universal Links

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

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

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

你可能感兴趣的:(HTML,H5,JS)