H5 如何实现唤起 APP

唤端技术我们也称之为deep link技术。当然，不同平台的实现方式有些不同，一般常见的有这几种，分别是：

URL Scheme（通用）
Universal Link （iOS）
App Link、Chrome Intents（android）

1、URL Scheme（通用）

这种方式是一种比较通用的技术，各平台的兼容性也很好，它一般由协议名、路径、参数组成。这个一般是由Native开发的同学提供，我们前端同学再拿到这个scheme之后，就可以用来打开APP或APP内的某个页面了。

URL Scheme 组成

[scheme:][//authority][path][?query][#fragment]

我们常用APP的 URL Scheme

appURL Scheme微信weixin://支付宝alipay://淘宝taobao://QQmqq://知乎zhihu://

打开方式

1. 直接通过window.location.href跳转window.location.href ='weixin://'
2. 通过iframe跳转const iframe = document.createElement('iframe')iframe.style.display ='none'iframe.src ='weixin://'document.body.appendChild(iframe)
3. 使用a标签进行跳转window.location.href ='weixin://'
4. 通过js bridge来打开window.miduBridge.call('openAppByRouter',{url:'zhihu://'})

判断是否成功唤起APP

当用户唤起APP失败时，我们希望可以引导用户去进行下载。

我们可以监听当前页面的visibilitychange事件

<template><div class="main"><p class="open_btn" @click="open">打开腾讯微博</p></div></template><script>let timer
exportdefault{name:'openApp',methods:{watchVisibility(){
            window.addEventListener('visibilitychange',()=>{// 监听页面visibilityif(document.hidden){// 如果页面隐藏了，则表示唤起成功，这时候需要清除下载定时器clearTimeout(timer)}})},open(){
            timer =setTimeout(()=>{// 三秒后没跳APP就跳转下载页
                window.location.href ='http://apps.apple.com/cn/app/id387682726'},3000)
            window.location.href ='taobao://'}}}</script>

2、Universal Link （iOS）

Universal Link 是在iOS 9中新增的功能，使用它可以直接通过https协议的链接来打开 APP。它相比前一种URL Scheme的优点在于它是使用https协议，所以如果没有唤端成功，那么就会直接打开这个网页，不再需要判断是否唤起成功了。并且使用 Universal Link，不会再弹出是否打开的弹出，对用户来说，唤端的效率更高了。

相对 URL Scheme，universal links 有一个较大优点是它唤端时没有弹窗提示是否打开，提升用户体验，可以减少一部分用户流失；

无需关心用户是否安装对应的APP，对于没有安装的用户，点击链接就会直接打开对应的页面，因为它也是http协议的路径，这样也能一定程度解决 URL Scheme 无法准确判断唤端失败的问题；

步骤

1、在 APP 中注册自己要支持的域名；

2、在自己域名的根目录下配置一个 apple-app-site-association 文件即可。（具体的配置前端同学不用关注，只需与iOS同学确认好支持的域名即可）

打开方式

openByUniversal(){// 打开知乎问题页
  window.location.href ='https://oia.zhihu.com/questions/64966868'},

3、App Link、Chrome Intents（Android）

App Link

在2015年的Google I/O大会上，Android M宣布了一个新特性：App Links让用户在点击一个普通web链接的时候可以打开指定APP的指定页面，前提是这个APP已经安装并且经过了验证，否则会显示一个打开确认选项的弹出框，只支持Android M以上系统。

App Links的最大的作用，就是可以避免从页面唤醒App时出现的选择浏览器选项框;

前提是必须注册相应的Scheme，就可以实现直接打开关联的App。

App links在国内的支持还不够，部分安卓浏览器并不支持跳转至App，而是直接在浏览器上打开对应页面。

—
系统询问是否打开对应App时，假如用户选择“取消”并且选中了“记住此操作”，那么用户以后就无法再跳转App。

Chrome Intents

Chrome Intent 是 Android 设备上 Chrome 浏览器中 URI 方案的深层链接替代品。

如果 APP 已安装，则通过配置的 URI SCHEME 打开 APP。

如果 APP 未安装，配置了 fallback url 的跳转 fallback url，没有配置的则跳转应用市场。

这两种方案在国内的应用都比较少。

方案对比

_URL SchemeUniversal LinkApp Link小于ios9支持不支持不支持大于ios9支持支持不支持小于android6支持不支持不支持大于android6支持不支持不支持是否需要HTTPS不需要需要需要是否需要客户端需要需要需要无对应APP时的现象报错/无反应跳到对应的页面跳到对应的页面