唤端技术(跳转) 也叫deep link技术

不同平台的实现方式有些不同，常见的有这几种：

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

 URL Scheme：一般有协议名、路径、参数组成，如：

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

常用APP的URl Scheme

APP	微信	支付宝	淘宝	QQ	知乎
URL Scheme	weixin://	alipay://	taobao://	mqq://	zhihu://

常用的打开方式有：

1.直接通过window.location.href跳转：

window.location.href = 'zhihu://'

2.通过iframe跳转：

const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = 'zhihu://';
document.body.appendChild(iframe);

3.直接使用a标签进行跳转：

<a href='zhihu://'>跳转</a>

4.通过js bridge来打开：

window.midyBridge.call('openAppByRouter',{url:'zhihu://'})

判断是否成功唤起

  监听当前页面的visibilitychange事件，如果页面隐藏，则表示唤端成功，否则唤端失败，跳转到应用商店。

<template>
  <div class="open_app">
      <div class="open_app_title">前端唤端测试Demo</div>
      <div class="open_btn" @click="open">打开腾讯微博</div>
  </div>
</template>

<script>
let timer
export default {
    name: 'openApp',
    methods: {
        watchVisibility() {
            window.addEventListener('visibilitychange', () => {
                // 监听页面visibility
                if(document.hidden) {
                    // 如果页面隐藏了，则表示唤起成功，这时候需要清除下载定时器
                    clearTimeout(timer)
                }
            })
        },
        open() {
            timer = setTimeout(() => {
              // 没找到腾讯微博的下载页，这里暂时以淘宝下载页代替
                window.location.href = 'http://apps.apple.com/cn/app/id387682726'
            }, 3000)
            window.location.href = 'TencentWeibo://'
        }
    }
}
</script>

<style lang="less">
.open_app_title {
    font-size: (20/@rem);
}
.open_btn{
    margin-top:(20/@rem);
    padding:(10/@rem) 0;
    border-radius: (8/@rem);
    background: salmon;
    color: #fff;
    font-size: (16/@rem);
}
</style>

优点：兼容性好，安卓或IOS都支持。

缺点：

•   无法准确判断是否唤起成功，因为本质上这种方式就是打开一个链接，并且还不是普通的http链家，所有如果用户没有安装对应的APP，那么尝试跳转后在浏览器中会没有任何反应，通过定时器来引导用户跳转到应用商店，但这个定时器的时间又没有准确值，不同手机的唤端时间也不同，我们只能大概估计一下时间来实现，一般设为300ms左右。
• 会有一个弹框提示是否在对应APP中打开，可能导致用户流失。
• 有劫持风险，如果有一个app也向系统注册了zhihu://scheme ，换气流量可能就会被劫持到这个app里。
• 容易被屏蔽。

 Universal Link

   是ios 9中新增的功能，使用它可以直接通过https协议的连接来打开APP。

原理

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

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

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

 优点:

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

缺点：

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

• 只能够在iOS上使用

• 只能由用户主动触发

 App Link、Chrome Intents

    

在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，没有配置的则跳转应用市场。