h5、微信、小程序三端环境判断

这次的需求代码中存在兼容以上三端的情况，下文就如何判断这三个环境作详解（H5就不说了，没有判断的必要）。

微信环境的判断

对于微信可以通过全局变量WeixinJSBridge来判断当前代码是否在微信环境下，即

1	window.WeixinJSBridge ? '在微信' ：'不在微信'

但上述变量WeixinJSBridge并不会在执行代码时立刻挂载在window对象上，因此这个并不是一个最稳妥的判断方法，除非你执行上述代码的时候能保证window对象下已经挂载了这个变量。在不能确定是否存在这个变量时如果要判断当前是否在微信环境下，这里还有另外一个方法，代码如下：

1	/MicroMessenger/.test(navigator.userAgent) ? '在微信' ：'不在微信'

微信环境下的navigator.userAgent这个字符串中会存在MicroMessenger这个子字符串，因此可以通过上述方法在不确定WeixinJSBridge是否已挂载的情况下来判断是否是微信环境。

小程序环境的判断

对于小程序来说也有一个全局变量可以用来判断是否是小程序环境————window.__wxjs_environment

1	window.__wxjs_environment ? '在小程序' ：'不在小程序'

它和WeixinJSBridge一样并不能在第一时间获取到，中间也有一个挂载的过程，如果在尚未挂载之前要对环境进行判断则需要监听事件。

由于小程序的执行环境在微信程序中，所以可以通过监听WeixinJSBridgeReady事件来进行判断，代码如下：

if(!window.WeixinJSBridge || !WeixinJSBridge.invoke) {  //首先判断当前是否存在微信桥
    document.addEventListener('WeixinJSBridgeReady', function(){    //微信桥不存在则监听微信桥准备事件
        if(window.__wxjs_environment==='miniprogram'){   //当微信桥挂在上了之后则判断当前微信环境是否为小程序
            console.log("在小程序")
        }else{
            console.log("在微信")
        }
    }, false)
}

综上为判断三端环境的详细说明

edit By AmamiRyoin