app分享页面，唤醒app方法总结

app分享页面看似简单的静态展示页面，其实里面有很多坑

1、分享页面的打开的浏览器兼容问题，微信，qq，手机自带浏览器等；
2、唤醒方法的兼容性问题，ios和安卓唤醒方法的兼容性，window.location 、setattribute('href','url');
3、如何唤醒app内部固定的某个页面

这里分享一下我的个人总结；

首先是几个常用的函数

//判断微信客户端
function isWeiXin() {
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
    } else {
        return false;
    }
}
//判断QQ客户端
function isQQ() {
    var chkRes = false;
    mqq.device.isMobileQQ(function (result) {
        chkRes = result;
    });
    return chkRes;
}

//判断IOS
function isIos() {
    return /iphone|ipod|ipad/i.test(ua);
}
//判断安卓
function isAndroid() {
    return /android/i.test(ua);
}

//获取浏览器的查询字符串
function GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
          return decodeURI(r[2]);
      }
      return null;
    }

流程梳理

唤醒手机app，一般是在app分享出来的h5页面唤醒，我们前端把写好的分享页面提供给安卓和ios，他们分享出来会在url地址上携带必要的参数(id=1)；我们获取到参数后，可以进行ajax请求等；

分享页面内可以直接点击按钮唤醒app内某个页面，需要ios和安卓提供初始唤醒的链接（安卓一般是应用宝，ios是app store），然后在后面跟上对应的浏览器查询字符串字段即可；如果用户安装了app，就会直接打开，如果没有安装，则进入对应的应用宝市场，这里的一个技巧就是用setTimeout进行500ms的延迟；

需要注意的几个问题

• 微信是个例外，微信不支持直接唤醒第三方app，故需要提示用户点击右上角在浏览器中打开；
• 经测试唤醒的方式window.location 、setattribute('href','url');两个都要使用，兼容性最好；

最后附上demo

      const iosBaseUrl = "iosBaseUrl?targetId= GetQueryString('userId')";   //app端提供的地址加参数
      const adrBaseUrl = "adrBaseUrl??targetId= GetQueryString('userId')";
      const iosAppUrl =  "iosAppUrl"    //应用宝链接
      const adrAppUrl =  "adrAppUrl"
   //安卓手机
      $('#adrBtn').click(function() {
        if (ua.match(/Android/i)) {
          if(isWeiXin()){
              alert('请用浏览器打开！')
            }else{
              window.location.href = "adrBaseUrl";
              $('#joinAppAdr').attr('href',"adrBaseUrl";)
              var set =  setTimeout(function(){
              window.location.href = "adrAppUrl";
              $('#joinAppAdr').attr("href","adrAppUrl");
            },1000)
            }
        }
      })
   //ios同理……