H5 跳转App Ios的踩坑过程

1.0石器版

代码如下:

<template>
</template>
<script>
export default{
  //…… 省略vue模版中其他的代码
  methods:{
      join(){
        let ua = navigator.userAgent.toLowerCase();
         if ( ua.match(/MicroMessenger/i) == "micromessenger" || ua.match(/QQ/i) == "qq") {
            this.isShow = true; // -----> 微信或者qq 打开该页面（h5）触发的弹框 提示用原生浏览器打开
           } else{
            // 跳转app 或者下载链接的处理逻辑
            window.location.href = 'xxxxx' // ---> app跳转链接（和原生沟通好的跳转地址）
            let oldTime = +Date.now();
            window.setTimeout(function(){
              if(+Date.now() - oldTime > 1000){
                  window.location.href = 'xxxxx' ;// -----> app 下载地址（苹果跳转appstore,安卓跳转应用市场）
              }
            },1500)
      }
    }
 }
}
</script>
<style>
</style>

以上代码存在的问题:
有app

• 安卓 ：浏览器中提示用户是否允许打开app 用户点击允许 即可跳转app内部 （注意： 跳转app 内部后 不再跳转 到下载链接)
• 苹果 ：浏览器中直接唤起app （注意： 跳转app之后，还会再次跳转到下载链接）
  我的理解： 按照js 的执行属性 下载链接只是延迟执行 无论是有app 还是没有app 都会执行定时器中js ， 也就是说苹果的现象是正确的但是为什么安卓没有执行 情况不得而知（可能安卓客户端做了特殊性处理 有待考究……）
  无app
• 安卓苹果都跳转到下载链接

2.0 青铜版

补充：
Ios唤起app 的两种方式（客户端设置）

• URL scheme
  是在app内配置的链接，比如：weixin://，superclass://。URL scheme的格是[scheme]://[host]/[path]?[query]。( 我们公司客户端用的就是scheme 方式)
• universal link：
  是ios9之后出的功能。它是通过传统HTTP链接来启动App。它其实就是一个https开头的链接，还要满足一些特定的规则才能被识别为universal link，才能直接唤起app。
  这个配置起来比较麻烦，主要是app那边配置。具体可以看看下面参考访问地址 中有详细介绍。
  实现方式 参考访问地址 ：https://www.jianshu.com/p/475b398a117d 中的具体实现部分代码；

-为了解决Ios成功跳转app 再次跳转appstore 的情况 解决办法:

代码如下：

<template>
</template>
<script>
export default{
  //…… 省略vue模版中其他的代码
  methods:{
      join(){
        let ua = navigator.userAgent.toLowerCase();
         if ( ua.match(/MicroMessenger/i) == "micromessenger" || ua.match(/QQ/i) == "qq") {
            this.isShow = true; // -----> 微信或者qq 打开该页面（h5）触发的弹框 提示用原生浏览器打开
           } else{
            // 跳转app 或者下载链接的处理逻辑
        this.openApp('xxxx',this.appLink) ;// this.openApp('app跳转链接'，Function)    
      }
    },
  appLink(){
      window.location.href = 'https://xxxxxxx'  ;// ----> app 下载链接
   },
  openApp(url, callback) {
            let t = 1000,hasApp = true;
            setTimeout(function() {
               if (!hasApp) {
                   callback && callback(); // ---> 没有app执行回调函数
             }
           }, 3000); 
/**3000  表示函数延迟执行的秒数 原文献中写的是 5000 在用户没有app 的时候 跳转appstore跳转时间过长用户体验不好 ；
 * 1000-2000 时 在没有app的时候也不能都跳转appstore
 *（js 中有多个定时器的时候 延迟的时间 要存在时间差 不然设置定时器的意义何在（我的局限性理解 不对望指正）） 
 * 然后我设置3000 就刚刚好满足两种情况
*/
           let oldTime = +Date.now();
           setTimeout(function() {
             let newTime = +Date.now();
             if (newTime - oldTime < t + 100) {
               hasApp = false;
             }
           }, t);
     window.location.href= url ; // -------> 函数中的形参 app 跳转链接（原生定义的链接）
    },
   }
}
</script>
<style>
</style>

以上代码 没有详细介绍 对ios的系统版本进行详细区分（因为我们的客户端将app 的跳转地址 统一为一个地址 我们的原生小哥哥还是很优秀的 ） 不同的平台跳转不同的地址 以上参考文档中有详细介绍

文章的末尾奉上 iOS 唤起APP之Universal Link(通用链接)的介绍 https://www.jianshu.com/p/ab50bdaec65d
注意 Universal Link 的对于H5 来说要注意的地方

1. 安卓 （应用宝）
2. 苹果手机 ： 通用链接 原生定义（https://开头）
   微信 : 可以直接唤起app (微信解除Universal Link 禁用)
   qq : 通过URL scheme 浏览器唤起 （禁用Universal Link ）
   对于H5 来说只要替换原生定义的通用链接 就好

share(){
 this.baseUrl = "https://a.app.qq.com/o/simple.jsp?pkgname=com.wzf.fan"; //安卓定义应用宝官方链接
      if (this.isAndroid) {
        window.location.href =
          this.baseUrl + `&android_schema=${appUrlAndroid("xxxx")}`; //原生安卓定义协议
      } else if (this.isiOS) {
        let ua = navigator.userAgent.toLowerCase();
        if (ua.match(/QQ/i) == "qq") {
          this.isAppopen = true; //ios 对qq 提示浏览器处理
        } else {
          window.location.href = appUrlIOS("xxxx"); // ios 原生定义协议
        }
      } else {
        window.location.href = "http://share.mvoicer.com/#/open";
      }
}