一、URL Scheme（Android 或者 IOS 9 以下）

1、介绍

• URL Scheme是我们最常见的一种跳转app的方式，其实就是通过一个链接跳转。格式为 [scheme]://[host]/[path]?[query]，具体内容需要h5端与app端协调。例如微信扫一扫 weixin://dl/scan

2、流程

• H5端通过 a链接点击/嵌入iframe跳转/本页面路径跳转 链接的方式触发（如果是在微信中打开，需要提醒去其他浏览器打开）
• 手机端已经安装有APP时，直接跳转到APP；手机端没有安装APP时，页面没有任何变化

3、代码示例

const url = 'weixin://dl/scan';

// a链接
let ahref = document.createElement('a');
ahref.href = url;
ahref.click();

// 嵌入iframe跳转 （ios9以后，屏蔽iframe跳转）
let ifr = document.createElement("iframe");  
ifr.setAttribute('src', url);  
ifr.setAttribute('style', 'display:none');  
document.body.appendChild(ifr);  

// 本页面路径跳转
location.href = url;

4、缺点及解决方案

• 缺点：主要体现在手机没有安装APP的情况下，不会给用户任何反馈信息，如果使用了 本页面路径跳转 方法，还可能跳转到一个404的页面，用户体验 非常不好

• 解决方案：在不使用 本页面路径跳转 的前提下，目前常见的解决方式为：通过 setTimeout 设置定时器，如果离开了当前页面，setTimeout 执行得会比设置的时间还要慢一些，通过 Date.now() 便可以监测到。如果没有离开当前页面，就说明用户没有安装APP，在设定的时间后就跳转APP下载页

  var timeout, t = 1000, hasApp = true;  
  var openScript = setTimeout(function () {  
          if (!hasApp) {
              // 跳转下载链接
          }
  }, 2000)  
                  
  var t1 = Date.now();  
  // 使用a标签方法或iframe方法触发URL Scheme
  
  timeout = setTimeout(function () {  
         var t2 = Date.now();  
         if (t2 - t1 < t + 100) {  
               hasApp = false;
         }
  }, t);

二、Universal Link（IOS 9及以上）

1、介绍

• Universal Link是苹果在WWDC 2015上提出的iOS9的新特性之一。此特性类 似于深层链接，并能够方便地通过打开一个Https链接来直接启动您的客户端应用
• 可以在微信内直接打开其他app

2、流程

• H5端通过点击链接触发跳转
• 手机端已经安装有APP时，直接跳转到APP；手机端没有安装APP时，跳转到自定义的 Web 页面

3、缺点

• 只适用于 IOS 9及以上
• 只能使用 HTTPS 协议