关于h5跳转app的坑

最新推荐文章于 2024-04-23 17:47:48 发布

scarecrowll

最新推荐文章于 2024-04-23 17:47:48 发布

阅读量986

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_41227106/article/details/129990104

版权

需求：h5点击按钮跳转app，有下载app的直接打开，无下载就跳转下载的链接（安卓跟ios的下载链接不一样）

1、用超链接的方式打开app

<a href="xxxx"></a>

弊端：这种方式只能控制有下载app的，并不能控制没下载app就跳转下载链接

2、使用scheme协议打开

使用 URL Scheme 格式为 [scheme] : //[host]/[path]?[query]。每个app都有一个独立的scheme名称，例如淘宝的是taobao://

调用方式：

 window.location = "rfzubs://";

整体的写法是：

  let ua = navigator.userAgent.toLowerCase();
          let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
          let isOpera = userAgent.indexOf("Opera") > -1;
          let isFirefox = userAgent.indexOf("Firefox") > -1;
          let isChrome = userAgent.indexOf("Chrome") > -1;
          let isSafari = userAgent.indexOf("Safari") > -1;
          let isIE = !!window.ActiveXObject || "ActiveXObject" in window;
           if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
              // 苹果机
              var loadDateTime = new Date();
              window.location = "rfzubs://"; //schema链接或者universal link
              window.setTimeout(function() {
                //如果没有安装app,便会执行setTimeout跳转下载页
                var timeOutDateTime = new Date();
                if (timeOutDateTime - loadDateTime < 5000) {
                  window.location =
                    "https://apps.applexxx"; //ios下载地址
                } else {
                  window.close();
                }
              }, 500);
            } else if (navigator.userAgent.match(/android/i)) {
               try {
                  window.location = "rfzubs://"; //schema链接或者universal link
                  window.setTimeout(function() {
                    window.location =
                      "https://a.app.qq.xxxx"; //android下载地址
                  }, 1000);
                } catch (e) {}
            }

这种方式的弊端是

安卓机在微信浏览器上使用应用宝的话会出现红色错误提示

然后ios在默认浏览器可能会出现提示链接无效

解决办法是

在微信环境上，安卓手机提示用默认浏览器打开

在ios的默认浏览器使用直接打开应用市场的链接

  window.location ="https://apps.applexxx"; //ios下载地址

最后

 let ua = navigator.userAgent.toLowerCase();
          let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
          let isOpera = userAgent.indexOf("Opera") > -1;
          let isFirefox = userAgent.indexOf("Firefox") > -1;
          let isChrome = userAgent.indexOf("Chrome") > -1;
          let isSafari = userAgent.indexOf("Safari") > -1;
          let isIE = !!window.ActiveXObject || "ActiveXObject" in window;
          if (ua.match(/MicroMessenger/i) == "micromessenger") {
            // 微信环境
            if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
              // 苹果机
              var loadDateTime = new Date();
              window.location = "rfzubs://"; //schema链接或者universal link
              window.setTimeout(function() {
                //如果没有安装app,便会执行setTimeout跳转下载页
                var timeOutDateTime = new Date();
                if (timeOutDateTime - loadDateTime < 5000) {
                  window.location =
                    "https://apps.applexxx"; //ios下载地址
                } else {
                  window.close();
                }
              }, 500);
            } else if (navigator.userAgent.match(/android/i)) {
              that.showShare = true;
            }
          } else {
            if (isOpera || isFirefox || isChrome || isSafari || isIE) {
              if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
               window.location =
                    "https://apps.applexxx"; //ios下载地址
              } else if (navigator.userAgent.match(/android/i)) {
                try {
                  window.location = "rfzubs://"; //schema链接或者universal link
                  window.setTimeout(function() {
                    window.location =
                      "https://a.app.qxxxxx"; //android下载地址
                  }, 1000);
                } catch (e) {}
              }
            } else {
              that.showShare = true;
            }
          }