通过app以链接形式分享，被分享者点击h5链接，跳转到相应app，携带路径和参数

1、网页端是无法获取到手机中是否安装该app的
        通用的解决方法：点击唤醒链接2秒后，自动跳转到下载页面。如果页面隐藏了，则清除定时器，停留在当前页面。这个定时器的间隔时间要根据实际情况去控制，如果间隔时间小于app的启动时间，则app未被唤醒，就直接跳转到下载页面了。如果间隔时间过长，则会有明显的等待时间，然后跳转到下载页，用户体验不好。

2、对于app是否真正被唤醒，网页端是无法捕捉到的
        一般使用onpagehide、visibilitychange、webkitvisibilitychange判断网页是否切换到后台，如果切换到后台，则认为app已经被打开。

let timeout = null;
window.onpagehide = function () {
  if (timeout) {
    clearTimeout(timeout);
  }
};
// 页面的可见状态变化时，会触发
const visibilitychange = function () {
  const tag = document.hidden || document.webkitHidden;
  if (tag && timeout) {
    clearTimeout(timeout);
  }
};
document.addEventListener('visibilitychange', visibilitychange, false);
// 兼容多的浏览器事件
document.addEventListener('webkitvisibilitychange', visibilitychange, false);

3、唤醒之后的处理，未被唤醒之后的处理
        唤醒之后，停留在当前页面。未被唤醒，跳转到指定的页面

4、各种方式、各种链接唤醒的成功几率
        iframe 在Android中使用，但我实际测试中，iframe的唤醒成功几率小于10%（不知是什么原因，希望大佬指点我一下）

        window.location.href：成功几率几乎100%，与a标签相似

        appLink、universalLink链接唤醒几率不高

        scheme 唤醒几率很高

5、在不同浏览器、不同容器、浏览器的不同版本中的表现情况
1、在谷歌、safari、夸克浏览器中出现是否打开该应用的弹框，如果选择的不允许，并且记住操作。则下次打开该唤醒链接时，即使app存在，也不会唤醒app在不同的版本版本中，出现有些版本可唤醒，有些唤醒不了火狐浏览器中使用scheme打开app，几率很小。

2、容器中的打开几率几乎没有，因为容器中对唤醒链接都是有限制的。多数容器都会限制唤醒链接，以避免用户跳出应用，做用户留存

        例：知乎在微信等容器中可以无障碍唤醒，这是与这些容器有合作，知乎的唤醒链接在容器的白名单中，唤醒无限制。

6、scheme、appLink、universalLink的区别
        scheme：早期解决方法。是否唤醒，都会跳转到404页面，因为scheme链接本身就是一个空链接，不指向任何页面

        appLink、universalLink：先进一些，是否唤醒，都会停留在当前页面

功能实现

1、首先判断浏览器环境，根据浏览器不同做出不同的处理，主要分微信环境和普通浏览器

     

const userAgent = navigator.userAgent;
const publicMethod = {
  isAndroid: userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1,//android终端,
  isIOS:!!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),//ios终端,
  isWeixin:() => {
    let ua = userAgent.toLowerCase();
    return !!ua.match(/micromessenger/i);
  }
}
export default publicMethod;

 2、相应业务处理，这里我们用到a标签的跳转方式

import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import publicMethod from '@/utils/publicMethod'

const isIOS = ref(publicMethod.isIOS); //ios终端
const schemeConfig = {
  iosScheme: "ios Scheme",
  androidScheme: "安卓Scheme",
};
let timeout = null;
// 页面不可见状态变化时， 清除定时器停止跳转
window.onpagehide = function () {
  if (timeout) {
    clearTimeout(timeout);
  }
};
// 页面的可见状态变化时，会触发 清除定时器停止跳转
const visibilitychange = function () {
  const tag = document.hidden || document.webkitHidden;
  if (tag && timeout) {
    clearTimeout(timeout);
  }
};
document.addEventListener('visibilitychange', visibilitychange, false);
// 兼容多的浏览器事件
document.addEventListener('webkitvisibilitychange', visibilitychange, false);

const openApp = () => {
  let scheme = ''
  if (isIOS.value) {
    scheme = schemeConfig.iosScheme;
  } else {
    scheme = schemeConfig.androidScheme;
  }
  
  const a = document.createElement('a');
  a.href = scheme;
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);

   //3秒后跳转下载路径
  timeout = window.setTimeout(() => {
    $router.push({ path: '/下载路径' })
  }, 3000);
}

3.下载页

// 下载
const storeLinkConfig = {
  iosStoreLink: "ios商店app地址",
  androidStoreLink: "下载地址",
};
const download = () => {
  let a = document.createElement('a');
  if (isIOS.value) {
    window.location.href = storeLinkConfig .iosStoreLink;
  } else {
    a.href = storeLinkConfig .androidStoreLink;
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
  }
}

参考文档：H5唤醒app_pc端 h5 换醒客户端程序-CSDN博客