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 的使用请参考：链接