当APP要跳转到H5页面时,往往会携带一些用户信息,之前做法是在跳转的地址中拼接H5页面需要的参数,现在通过window.WebViewJavascriptBridge来进行数据之间的交互问题。
身为一个前端工程师,我应该从自己的角度上来考虑问题:
首先我们都知道安卓系统和苹果系统是有很多不同的地方的,因此我们在进行相关操作的时候需要判断一下用户当前使用的环境,用navigator.userAgent判断一下当前环境。
什么是navigator.userAgent是干什么用的?
navigator.userAgent获取浏览器信息(类型及系统)
目前市场上的浏览器有接近百种之多,例如:Firefox、Opera、Safari、IE、Chrome等。因此在开发项目过程中,我们判断浏览器类型及系统是很重要的。
User-Agent是HTTP请求中的用户标识,一般发送一个能够代表客户端的字符串,比如浏览器类型、操作系统等信息。User-Agent的约定格式是:应用名,跟一个斜线,跟版本号,剩下的是自由的格式。
例如在Chrome中
navigator.userAgent
->"Mozilla/5.0(Windows NT 6.1;WOS64) AppleWebkit/537.36 (KHTML,like Gecko) Chrome/69.0.3497.100 Safari/537.36"
封装获取系统的函数
// 系统区分
function getOS() {
var u = navigator.userAgent;
if (!!u.match(/compatible/i) || u.match(/Windows/i)) {
return 'windows';
} else if (!!u.match(/Macintosh/i) || u.match(/MacIntel/i)) {
return 'macOS';
} else if (!!u.match(/iphone/i) || u.match(/Ipad/i)) {
return 'ios';
} else if (!!u.match(/android/i)) {
return 'android';
} else {
return 'other';
}
封装浏览器类型的函数
// 各主流浏览器
function getBrowser() {
var u = navigator.userAgent;
var bws = [{
name: 'sgssapp',
it: /sogousearch/i.test(u)
}, {
name: 'wechat',
it: /MicroMessenger/i.test(u)
}, {
name: 'weibo',
it: !!u.match(/Weibo/i)
}, {
name: 'uc',
it: !!u.match(/UCBrowser/i) || u.indexOf(' UBrowser') > -1
}, {
name: 'sogou',
it: u.indexOf('MetaSr') > -1 || u.indexOf('Sogou') > -1
}, {
name: 'xiaomi',
it: u.indexOf('MiuiBrowser') > -1
}, {
name: 'baidu',
it: u.indexOf('Baidu') > -1 || u.indexOf('BIDUBrowser') > -1
}, {
name: '360',
it: u.indexOf('360EE') > -1 || u.indexOf('360SE') > -1
}, {
name: '2345',
it: u.indexOf('2345Explorer') > -1
}, {
name: 'edge',
it: u.indexOf('Edge') > -1
}, {
name: 'ie11',
it: u.indexOf('Trident') > -1 && u.indexOf('rv:11.0') > -1
}, {
name: 'ie',
it: u.indexOf('compatible') > -1 && u.indexOf('MSIE') > -1
}, {
name: 'firefox',
it: u.indexOf('Firefox') > -1
}, {
name: 'safari',
it: u.indexOf('Safari') > -1 && u.indexOf('Chrome') === -1
}, {
name: 'qqbrowser',
it: u.indexOf('MQQBrowser') > -1 && u.indexOf(' QQ') === -1
}, {
name: 'qq',
it: u.indexOf('QQ') > -1
}, {
name: 'chrome',
it: u.indexOf('Chrome') > -1 || u.indexOf('CriOS') > -1
}, {
name: 'opera',
it: u.indexOf('Opera') > -1 || u.indexOf('OPR') > -1
}];
for (var i = 0; i < bws.length; i++) {
if (bws[i].it) {
return bws[i].name;
}
}
return 'other';