需求: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;
            }
          }

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐