炫意html5
最早CSS3和HTML5移动技术网站之一

xSwitch调试和代理线上代码及h5判断小程序ua及浏览器运行环境

前言

介绍一款同事推荐的谷歌插件。即装即用,很方便。应用场景蛮多,可以把线上代码代理到本地,类似fiddler。也可以将线上请求数据代理到本地。就是本地测试环境没有数据的话,可以代理线上环境的数据。

不翻墙安装谷歌插件

一般公司都会有自己的googleCDN,程序员很多也都有翻墙软件。假如你没有翻墙,打不开谷歌应用商店,没有问题。我介绍一下不翻墙安装谷歌插件的方法。

1、去谷歌插件网,例如Extfans、Crx4Chrome、Chromecj,下载CRX文件

2、直接将下载好的CRX文件拖拽到谷歌浏览器中就可以了,或者浏览器输入chrome://extensions,或者依次点击 Chrome
中的「菜单 – 更多工具 – 扩展程序」,打开开发者模式,添加就可以了。

xSwitch安装使用

xSwitch的github地址是:https://github.com/yize/xswitch

这里我就不照搬了。

安装好了如下图:

enter image description here

点击就可以出现配置项。

h5判断小程序ua信息

时间还早,再记录一个h5判断小程序的方法吧。就是小程序内嵌的h5页面,如何判断是在哪个小程序下面?微信、支付宝、百度、头条还是快应用呢?

判断方法代码如下:

var ua = window.navigator.userAgent.toLowerCase() || ''
var cmpBridge = {
CONSTS: {// 炫H5注释:小程序厂商常量
WECHATAPP: 'WECHATAPP',
ALIPAYAPP: 'ALIPAYAPP',
BAIDUAPP: 'BAIDUAPP',
TOUTIAOAPP: 'TOUTIAOAPP',
QUICKAPP: 'QUICKAPP'
},
isAndroid: function () {
return ua.indexOf('android') > -1
},
isIphone: function(){
return ua.indexOf('iPhone') > -1
},
isWechat: function () {
return ua.indexOf('micromessenger') > -1
},
isAlipay: function () {
return ua.indexOf('alipayclient') > -1
},
isBaidu: function () {
return ua.indexOf('baiduboxapp') > -1
},
isTouTiao: function() {
return ua.indexOf('toutiaomicroapp') > -1
},
isMiniProgram: function () {// 炫H5注释:判断小程序主要方法
try {
if (cmpBridge.isWechat() && (window.__wxjs_environment === 'miniprogram' || ua.indexOf('miniprogram') > -1)) {
return cmpBridge.CONSTS.WECHATAPP
}
if (cmpBridge.isBaidu() && (window.Bdbox_aiapps_jsbridge || (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.BBAMNPJSBridgeWebViewComponent))) {
return cmpBridge.CONSTS.BAIDUAPP
}
if (cmpBridge.isAlipay()) {
return cmpBridge.CONSTS.ALIPAYAPP
}
if(cmpBridge.isTouTiao()){
return cmpBridge.CONSTS.TOUTIAOAPP
}
if (/(hap|OPPO\/Hybrid)\/\d/i.test(ua)) {
return cmpBridge.CONSTS.QUICKAPP
}
} catch (e) {
return false
}
return false
}
}
module.exports = cmpBridge;

判断浏览器运行环境

export default function BrowserType() {
// 权重:系统 + 系统版本 > 平台 > 内核 + 载体 + 内核版本 + 载体版本 > 外壳 + 外壳版本
const ua = navigator.userAgent.toLowerCase();
const testUa = regexp => regexp.test(ua);
const testVs = regexp => (ua.match(regexp) + "")
.replace(/[^0-9|_.]/ig, "")
.replace(/_/ig, ".");
// 系统
let system = "unknown";
if (testUa(/windows|win32|win64|wow32|wow64/ig)) {
system = "windows"; // window系统
} else if (testUa(/macintosh|macintel/ig)) {
system = "macos"; // macos系统
} else if (testUa(/x11/ig)) {
system = "linux"; // linux系统
} else if (testUa(/android|adr/ig)) {
system = "android"; // android系统
} else if (testUa(/ios|iphone|ipad|ipod|iwatch/ig)) {
system = "ios"; // ios系统
}
// 系统版本
let systemVs = "unknown";
if (system === "windows") {
if (testUa(/windows nt 5.0|windows 2000/ig)) {
systemVs = "2000";
} else if (testUa(/windows nt 5.1|windows xp/ig)) {
systemVs = "xp";
} else if (testUa(/windows nt 5.2|windows 2003/ig)) {
systemVs = "2003";
} else if (testUa(/windows nt 6.0|windows vista/ig)) {
systemVs = "vista";
} else if (testUa(/windows nt 6.1|windows 7/ig)) {
systemVs = "7";
} else if (testUa(/windows nt 6.2|windows 8/ig)) {
systemVs = "8";
} else if (testUa(/windows nt 6.3|windows 8.1/ig)) {
systemVs = "8.1";
} else if (testUa(/windows nt 10.0|windows 10/ig)) {
systemVs = "10";
}
} else if (system === "macos") {
systemVs = testVs(/os x [\d._]+/ig);
} else if (system === "android") {
systemVs = testVs(/android [\d._]+/ig);
} else if (system === "ios") {
systemVs = testVs(/os [\d._]+/ig);
}
// 平台
let platform = "unknow";
if (system === "windows" || system === "macos" || system === "linux") {
platform = "desktop"; // 桌面端
} else if (system === "android" || system === "ios" || testUa(/mobile/ig)) {
platform = "mobile"; // 移动端
}
// 内核和载体
let engine = "unknow";
let supporter = "unknow";
if (testUa(/applewebkit/ig) && testUa(/safari/ig)) {
engine = "webkit"; // webkit内核
if (testUa(/edge/ig)) {
supporter = "edge"; // edge浏览器
} else if (testUa(/opr/ig)) {
supporter = "opera"; // opera浏览器
} else if (testUa(/chrome/ig)) {
supporter = "chrome"; // chrome浏览器
} else {
supporter = "safari"; // safari浏览器
}
} else if (testUa(/gecko/ig) && testUa(/firefox/ig)) {
engine = "gecko"; // gecko内核
supporter = "firefox"; // firefox浏览器
} else if (testUa(/presto/ig)) {
engine = "presto"; // presto内核
supporter = "opera"; // opera浏览器
} else if (testUa(/trident|compatible|msie/ig)) {
engine = "trident"; // trident内核
supporter = "iexplore"; // iexplore浏览器
}
// 内核版本
let engineVs = "unknow";
if (engine === "webkit") {
engineVs = testVs(/applewebkit\/[\d.]+/ig);
} else if (engine === "gecko") {
engineVs = testVs(/gecko\/[\d.]+/ig);
} else if (engine === "presto") {
engineVs = testVs(/presto\/[\d.]+/ig);
} else if (engine === "trident") {
engineVs = testVs(/trident\/[\d.]+/ig);
}
// 载体版本
let supporterVs = "unknow";
if (supporter === "chrome") {
supporterVs = testVs(/chrome\/[\d.]+/ig);
} else if (supporter === "safari") {
supporterVs = testVs(/version\/[\d.]+/ig);
} else if (supporter === "firefox") {
supporterVs = testVs(/firefox\/[\d.]+/ig);
} else if (supporter === "opera") {
supporterVs = testVs(/opr\/[\d.]+/ig);
} else if (supporter === "iexplore") {
supporterVs = testVs(/(msie [\d.]+)|(rv:[\d.]+)/ig);
} else if (supporter === "edge") {
supporterVs = testVs(/edge\/[\d.]+/ig);
}
// 外壳和外壳版本
let shell = "none";
let shellVs = "unknow";
if (testUa(/micromessenger/ig)) {
shell = "wechat"; // 微信浏览器
shellVs = testVs(/micromessenger\/[\d.]+/ig);
} else if (testUa(/qqbrowser/ig)) {
shell = "qq"; // QQ浏览器
shellVs = testVs(/qqbrowser\/[\d.]+/ig);
} else if (testUa(/ubrowser/ig)) {
shell = "uc"; // UC浏览器
shellVs = testVs(/ubrowser\/[\d.]+/ig);
} else if (testUa(/2345explorer/ig)) {
shell = "2345"; // 2345浏览器
shellVs = testVs(/2345explorer\/[\d.]+/ig);
} else if (testUa(/metasr/ig)) {
shell = "sougou"; // 搜狗浏览器
} else if (testUa(/lbbrowser/ig)) {
shell = "liebao"; // 猎豹浏览器
} else if (testUa(/maxthon/ig)) {
shell = "maxthon"; // 遨游浏览器
shellVs = testVs(/maxthon\/[\d.]+/ig);
} else if (testUa(/bidubrowser/ig)) {
shell = "baidu"; // 百度浏览器
shellVs = testVs(/bidubrowser [\d.]+/ig);
}
return Object.assign({
engine, // webkit gecko presto trident
engineVs,
platform, // desktop mobile
supporter, // chrome safari firefox opera iexplore edge
supporterVs,
system, // windows macos linux android ios
systemVs
}, shell === "none" ? {} : {
shell, // wechat qq uc 2345 sougou liebao maxthon baidu
shellVs
});
}

广告

炫H5博客目前勉强自给自足,主要靠广告位收入勉强盈利,文章右侧及文章底部广告位,还请大家帮忙点击一下,炫H5博客后续可能推出培训及视频相关教程。同时也争取给大家带来更多精彩文章。

炫意HTML5 » xSwitch调试和代理线上代码及h5判断小程序ua及浏览器运行环境

Java基础教程Android基础教程