唤端技术我们也称之为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
app | URL Scheme |
---|---|
微信 | weixin:// |
支付宝 | alipay:// |
淘宝 | taobao:// |
mqq:// | |
知乎 | zhihu:// |
打开方式
-
直接通过window.location.href跳转
window.location.href = 'weixin://'
-
通过iframe跳转
const iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = 'weixin://' document.body.appendChild(iframe)
-
使用a标签进行跳转
window.location.href = 'weixin://'
-
通过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
export default {
name: 'openApp',
methods: {
watchVisibility() {
window.addEventListener('visibilitychange', () => {
// 监听页面visibility
if(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 Scheme | Universal Link | App Link |
---|---|---|---|
小于ios9 | 支持 | 不支持 | 不支持 |
大于ios9 | 支持 | 支持 | 不支持 |
小于android6 | 支持 | 不支持 | 不支持 |
大于android6 | 支持 | 不支持 | 不支持 |
是否需要HTTPS | 不需要 | 需要 | 需要 |
是否需要客户端 | 需要 | 需要 | 需要 |
无对应APP时的现象 | 报错/无反应 | 跳到对应的页面 | 跳到对应的页面 |