h5跳转app指定页面及各种坑的总结

admin管理员组

文章数量:1530068

11.29更新项目中对微信内的处理方案及一些坑
12.3更新ios9后url scheme的坑及最终解决方案

最近遇到一个需求：如果用户安装了app，则跳app；如果用户没安装app，则跳app下载链接，这个在平常见的还蛮多的。查了一些资料，总结一下。

一、解决方案：URL scheme 或 universal link

a）URL scheme是在app内配置的链接，比如：weixin://，superclass://。
URL scheme的格式是[scheme]://[host]/[path]?[query]。

b）universal link是ios9之后出的功能。它是通过传统HTTP链接来启动App。它其实就是一个https开头的链接，还要满足一些特定的规则才能被识别为universal link，才能直接唤起app。

二、具体实现

分2种情况讨论：
1、ios8之前和android：使用scheme方案。
原理：不管是ios还是安卓，浏览器都不可能知道手机有没有装某个app，所以方法是首先通过URL scheme打开app，如果打不开，则跳转下载链接。

var timeout, t = 1000, hasApp = true;  
var openScript = setTimeout(function () {  
        if (!hasApp) {
               // 跳转下载链接
        }
        document.body.removeChild(ifr);  
}, 2000)  
                
var t1 = Date.now();  
var ifr = document.createElement("iframe");  
ifr.setAttribute('src', url);  
ifr.setAttribute('style', 'display:none');  
document.body.appendChild(ifr);  

timeout = setTimeout(function () {  
       var t2 = Date.now();  
       if (t2 - t1 < t + 100) {  
             hasApp = false;
       }
}, t);

之所以要用iframe打开，而不是直接跳链接，是因为如果APP唤醒失败，或者APP未安装的话，很多时候都会跳到错误页，影响用户体验。而iframe方法不会引起页面可见的变化（例如页面内容变成一个新页面），不会导致浏览器历史记录的变化。

2、ios9之后：可以使用scheme方案，也可以使用ios9的universal link方案
（1）先说scheme方案，ios9把iframe封了，所以用的是直接跳转链接

location.href = url;
setTimeout(function() {   
       // 跳转下载链接
}, 250);
setTimeout(function() {
       location.reload();
}, 1000);

这个方案在用户安装了app的时候还没什么问题，但是如果没装app，跳转失败会先弹出错误弹窗，再弹出是否在「app store」中打开链接，见下图。

 

失败弹窗

如果产品能接受这种弹窗，其实也行。。下面的是封装了2个函数，实现h5跳app。

通用的URL scheme方案代码：

<script>
  function detectVersion() {
          let isAndroid,isIOS,isIOS9,version,
              u = navigator.userAgent,
              ua = u.toLowerCase();

          if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {   //android终端或者uc浏览器
              //Android系统
              isAndroid = true
          }

          if(ua.indexOf("like mac os x") > 0){
              //ios
              var regStr_saf = /os [\d._]*/gi ;
              var verinfo = ua.match(regStr_saf) ;
              version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
          }
          var version_str = version+"";
          if(version_str != "undefined" && version_str.length >0){
              version = parseInt(version)
              if(version>=8){
                  // ios9以上
                  isIOS9 = true
              }
              else{
                  isIOS = true
              }
          }
          return {isAndroid,isIOS,isIOS9}
        }

        // 判断手机上是否安装了app，如果安装直接打开url，如果没安装，执行callback
        function openApp(url,callback) {
            let {isAndroid,isIOS,isIOS9} = detectVersion()
            if(isAndroid || isIOS){
                var timeout, t = 4000, hasApp = true;  
                var openScript = setTimeout(function () {  
                    if (!hasApp) {
                        callback && callback()
                    }
                    document.body.removeChild(ifr);  
                }, 5000)  
                
                var t1 = Date.now();  
                var ifr = document.createElement("iframe");  
                ifr.setAttribute('src', url);  
                ifr.setAttribute('style', 'display:none');  
                document.body.appendChild(ifr);  

                timeout = setTimeout(function () {  
                    var t2 = Date.now();  
                    if (t2 - t1 < t + 100) {  
                        hasApp = false;
                    }
                }, t);
            }

            if(isIOS9){
                location.href = url;
                setTimeout(function() {   
                    callback && callback()
                }, 250);
                setTimeout(function() {
                    location.reload();
                }, 1000);
            }  
        }
        
        //跳h5
        function goConfirmAddr(){
            window.location.href = 'http://m.gaotu100'
        }
        window.onload = function(){
            openApp("superclass://home",goConfirmAddr)
        }
</script>

（2）universal link
这个配置起来比较麻烦，主要是app那边配置。具体可以看看最下面的参考博客。

看了下百度知乎的方法，都是用universal link
h5的知乎有个【app打开】按钮，这个按钮就是跳转universal link链接。
a)若此时安装了app，就提示是否在app打开。可以直接跳到app

 

image

b)若未装app或未唤起app，跳到下载页。

 

image

注意看域名：oia.zhihu，这个就是知乎的universal link，之所以是oia开头，是因为universal link必须跨域。

参考

https://wwwblogs/shadajin/p/5724117.html
http://www.cocoachina/ios/20170904/20463.html
https://www.jianshu/p/03e6b7828307

11.29更新

以上只是Demo阶段的总结，在项目过程遇到了2个问题：

一、微信内的处理方案

由于公司的app达不到微信的一些要求，所以微信浏览器内用universal link直接调起app这个方案行不通。

微信内的方案是：点击「打开app」时，弹窗一个遮罩层，提示让用户点开右上角选择在浏览器内打开。之后就简单了。

遇到的问题：ios微信浏览器内url不变化

解决方案戳ios微信浏览器内vue项目url不改变

二、一些安卓手机自带浏览器不能唤起app

原因：经反复测试之后发现，在手机自带浏览器内，某个网址第一次尝试打开app时，会有个是否打开某app的选择弹窗，浏览器会记住用户的选择。如用户选择「打开」，之后每次都不出现选择弹窗，每次直接跳转app；如果用户选择「取消」，之后该网站就再也不出现是否打开某app的选择弹窗，所以就调不起app，除非用户在设置内清除浏览器的数据。

暂时只在小米手机浏览器内发现这个问题，qq浏览器都好使，暂时没找到好的解决办法。

12.3更新

测试阶段自己点出了一个bug，ios9后用url scheme会出现一个偶发bug。
bug具体描述：前面我们知道，当用户没装app时，尝试打开app时会出现一个错误弹窗【safari打不开该网页，因为网址无效】。理论上说，点击「好」确认弹窗后，应该弹出【是否在app store打开】弹窗。（是否在app store中打开是因为配置了''window.location.href = 'https://itunes.apple/cn/app/id**********' "）

但是！！！！！！！！！！！！！！！！！！！！

当快速点击确认错误弹窗时，页面并不会弹出【是否在app store打开】弹窗，此时地址栏闪一下itunes的地址，之后尝试打开app，都是错误弹窗，再也调不起【是否在app store打开】弹窗。

然后看了下同样是使用url scheme方案的淘宝，他们的方案是错误弹窗后，跳转到自己内部的下载页，然后一进入下载页时就会弹出【是否在app store打开】弹窗，这样就不会出现上面的问题。

最后和产品商量，解决方案是跳到内部下载页，和淘宝一样。

12.7更新

看头条的这个功能时，发现了ios里一个好玩的东西Smart App Banners

作者：我才是大田田
链接：https://www.jianshu/p/475b398a117d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

本文标签： 跳转页面app