1. 原理： 使用浏览器的userAgent和微信环境的标识
2. 微信的判断为什么放在sessionStorage而不是localStorage？
1. 新版本的微信中， 关闭小程序localStorage不会清除， 导致h5的代码既在可以在小程序使用又可以在微信浏览器中使用判断会有问题
2. sessionStorage在新版小程序中跳转小程序页面就会清除
3. 代码如下:
var sessionStorage = {
sessionStorage: window.sessionStorage || {},
contains: function(key) {
return this.sessionStorage.hasOwnProperty(key);
},
//获取指定key的数据
getItem: function(key) {
if (this.contains(key)) {
return JSON.parse(this.sessionStorage[key]);
}
return null;
},
//存储数据
setItem: function(key, value) {
this.sessionStorage[key] = JSON.stringify(value);
},
};
var browser = {
userAgent: navigator.userAgent,
//是否是iphone
iPhone: function () {
return this.userAgent.indexOf('iPhone') > -1;
},
//是否是iPad
iPad: function () {
return this.userAgent.indexOf('iPad') > -1;
},
//ios的手机
ios: function () {
return this.iPhone() || this.iPad();
},
//android的手机
android: function () {
return this.userAgent.indexOf('Android') > -1 || this.userAgent.indexOf('Linux') > -1;
},
//QQ浏览器
qqBrowser: function () {
return this.userAgent.indexOf('QQBrowser') > -1;
},
//是不是在微信环境打开， 是微信环境可能会调取一些跟微信公众号有关的接口
weixin: function () {
return this.userAgent.indexOf('MicroMessenger') > -1;
},
//是不是小程序
miniProgram:function(){
if(window.__wxjs_environment === 'miniprogram'){//ios 可以取值
sessionStorage.setItem('isMiniProgram', true);
return true;
}else if(/miniprogram/ig.test(this.userAgent.toLowerCase())){//低版本的微信可能拿不到
sessionStorage.setItem('isMiniProgram', true);
return true;
}else if(sessionStorage.getItem('isMiniProgram')){//异步存储过
return true;
}else{//todo
//没有weixin对象有2种情况：1微信没初始化好，2不是微信浏览器
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {//异步
//非微信浏览器环境先把小程序设置成false，如果是微信再异步设置成true
sessionStorage.setItem('isMiniProgram', false);
document.addEventListener('WeixinJSBridgeReady', function(){
if(window.__wxjs_environment === 'miniprogram'){
sessionStorage.setItem('isMiniProgram', true);
return true;
}else{
sessionStorage.setItem('isMiniProgram', false);
}
}, false)
} else {
if(window.__wxjs_environment === 'miniprogram'){
sessionStorage.setItem('isMiniProgram', true);
return true;
}else{
sessionStorage.setItem('isMiniProgram', false);
}
}
}
},
//是否嵌套的自己的app
isApp: function () {
return this.ua.indexOf('app商定的值') > -1;
},
//获取userAgent塞入的一些对象值， 一般是嵌套app， app包的浏览器塞一些值跟h5交互
getUaParams: function () {
var matchers = this.userAgent.match(/--[([sS]+?)]--/i);
if (matchers && matchers.length>1) {
var uaObj = JSON.parse(matchers[1]);
return uaObj;
}
return {};
}
}
4. chrom模拟微信、小程序、app内核浏览器的方法；注意：模拟小程序时WeixinJSBridgeReady不会有callback，建议在session加入isMiniProgram:true
1.模拟微信： 选中 Mobile， 填入：Chrome/33.0.0.0 Mobile Safari/537.36 MicroMessenger/6.0.0.54_r849063.501 NetType/WIFI
2.模拟小程序： 先模拟出微信再在session中添加isMiniProgram:true
3.模拟app：选中Mobile，填入：跟app商定的一些值，
比如格式：app商定的值--[{"XXX":"XXX","XXX":"XXX",...}]--