JS - 定制功能(1): 判断是否是微信浏览器

最近半年来一直在微信小程序，微信公众号打转，小程序就不说了，跟这个没得关系，公众号页面以及一些附属的H5页面，很多时候会通过微信直接分享出去。虽然公众号页面也是H5网页，但有时候又是特殊的H5页面，特殊就特殊在只能微信浏览器内打开，在其他浏览器或其他应用的浏览器打开有些功能无法正常使用；而且还可能存在一些其他定制功能，又只能在桌面浏览器内打开等等，总之一句话：就是要判定网页打开的运行环境。

具体通过判断navigator对象内userAgent中是否存在关键字micromessenger，存在则是微信内置浏览器，反之不是。

function isWeChat() {
  let ua = window.navigator.userAgent.toLowerCase();
  return ua.match(/MicroMessenger/i) == "micromessenger"; // 判定为true则是微信浏览器，false则不是
}

也可以写成

function isWeChat() {
  let ua = window.navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;// 是微信浏览器
  } else {
    return false;// 不是
  }
}

类似的还可以判定当前环境是安卓环境(浏览器)还是iPhone环境(浏览器)等

var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/android/i) == "android") {
  alert("android");    // 安卓
}
if (ua.match(/iPhone/i) == "iPhone") {
  alert("iPhone");    // iPhone
}
if (ua.match(/iPad/i) == "iPad") {
  alert("iPad");    // iPad
}

2、升级版，上面的代码只能判定当前环境是否是微信浏览器，对于其他的，如：是否是移动端浏览器还是PC端浏览器，则无能为力。

function judgeEnv() {
  var system = {
    win: false,
    mac: false,
    xll: false,
    ipad: false
  };
  // 检测网页运行平台
  var p = window.navigator.platform;
  system.win = p.indexOf("Win") == 0; // windows
  system.mac = p.indexOf("Mac") == 0; // 苹果
  system.x11 = p == "X11" || p.indexOf("Linux") == 0; // Linux
  system.ipad = navigator.userAgent.match(/iPad/i) != null ? true : false;  // iPad

  if (system.win || system.mac || system.xll || system.ipad) {  // 在PC端上打开的
    return system;
  } else {  // 在手机端打开的则直接跳转到wap.baidu.com页面
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {  // 在手机端微信上打开的(注：这里不能用===，具体看打印)
      return true;
    } else {  // 在手机上非微信上打开的
      return false;
    }
  }
}

这个升级版也只是初级升级，如果要更加细致化的升级，PC端还得判定是什么浏览器(或什么内核的浏览器)，如：IE，谷歌，火狐等等，以及国内的360，QQ，百度等等。如：

 

3、最后：这类运行环境(平台)的判定实际上只需要在页面打开时或系统启动时判定一次就够了，然后基于判定跳转到对应的指示页面，因此后面基本不会再用，不需要每个页面都进行判定(特定页面定制执行环境除外)。

既然只是基于这个判定进行对应的操作，那么我们完全可以将该方法封装成一个自执行函数，在项目启动或页面打开的初期勾子函数内自动执行一遍，然后不管后面是只用一次还是无数次，都只需读取这个判定结果就是，并不需要每次都再执行该函数。

let isWeChat = false; // 是否是微信端打开 状态变量(默认不是)
(function () {
  var system = {
    win: false,
    mac: false,
    xll: false,
    ipad: false
  };
  // 检测网页运行平台
  var p = window.navigator.platform;
  system.win = p.indexOf("Win") == 0; // windows
  system.mac = p.indexOf("Mac") == 0; // 苹果
  system.x11 = p == "X11" || p.indexOf("Linux") == 0; // Linux
  system.ipad = navigator.userAgent.match(/iPad/i) != null ? true : false;  // iPad

  if (system.win || system.mac || system.xll || system.ipad) {  // 在PC端上打开的
    isWeChat = false;
  } else {  // 在手机端打开的则直接跳转到wap.baidu.com页面
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {  // 在手机端微信上打开的(注：这里不能用===，具体看打印)
      isWeChat = true;
    } else {  // 在手机上非微信上打开的
      isWeChat = false;
    }
  }
})();