需求： H5页面获取手机具体机型在提交照片时传给服务端，并在pc端展示
分析实现：因为H5 是运行在浏览器上的，只能获取window上给的信息也就是浏览器信息。如下图所示，这是安卓机（华为）的拿取到的信息。重这个信息中我们可以获取到手机的入网机型代码，这个也是唯一，是由工信部批准的，是唯一不会变的。
苹果的我们是拿不到这个信息的，不过苹果我们可以根据逻辑分辨率来时区分机型（此方法无法区分具体机型比如xr与11都是414,896,2）那就做折中方案苹果机型做或的处理iPhone 11(XR)
下面是代码实现
第一步 安装mobile-detect
yarn add mobile-detect -s
到package.json中查看
"mobile-detect": "^1.4.5",
第二步新建model.ts 存放数据
// 判断业务是否是 iphone、华为、小米、oppo、view、三星 打开
export function judgeBrand(sUserAgent: any) {
var isIphone = sUserAgent.match(/iphone/i) == 'iphone';
var isHuawei = sUserAgent.match(/huawei/i) == 'huawei';
var isHonor = sUserAgent.match(/honor/i) == 'honor';
var isOppo = sUserAgent.match(/oppo/i) == 'oppo';
var isOppoR15 = sUserAgent.match(/pacm00/i) == 'pacm00';
var isVivo = sUserAgent.match(/vivo/i) == 'vivo';
var isXiaomi = sUserAgent.match(/mi\s/i) == 'mi ';
var isXiaomi2s = sUserAgent.match(/mix\s/i) == 'mix ';
var isRedmi = sUserAgent.match(/redmi/i) == 'redmi';
var isSamsung = sUserAgent.match(/sm-/i) == 'sm-';
var isLG = sUserAgent.match(/lg/i) == 'lg';
if (isIphone) {
return 'iPhone';
} else if (isHuawei || isHonor) {
return 'Huawei';
} else if (isOppo || isOppoR15) {
return 'Oppo';
} else if (isVivo) {
return 'vivo';
} else if (isXiaomi || isRedmi || isXiaomi2s) {
return 'mi';
} else if (isSamsung) {
return 'Samsung';
} else if (isLG) {
return 'LG';
} else {
return '其他型号手机';
}
}
export const arrModal = [
{
// 华为
type: 'Huawei',
modelNumber: [
{
lable: 'NOH-AN50',
value: '华为Mate40E Pro',
},
{
lable: 'NOH-AN50',
value: '华为Mate40E Pro',
},
{
lable: 'ABR-AL60',
value: '华为P50E',
},
{
lable: 'BRQ-AN00',
value: '华为nova8 Pro',
},
{
lable: 'JLN-AL00',
value: '华为nova 9 SE',
},
{
lable: 'CHA-AL80',
value: '华为nova 10z',
},
{
lable: 'MGA-AL00',
value: '华为畅享 50',
},
{
lable: 'NCO-AL00',
value: '华为nova 10',
},
{
lable: 'GLA-AL00',
value: '华为nova 10 Pro',
},
{
lable: 'TET-AN50',
value: '华为Mate Xs 2',
},
{
lable: 'RTE-AL00',
value: '华为nova 9 Pro',
},
{
lable: 'NAM-AL00',
value: '华为nova 9',
},
{
lable: 'BAL-AL80',
value: '华为P50 Pocket S',
},
{
lable: 'JAD-AL50',
value: '华为P50 Pro',
},
{
lable: 'NOH-AN50',
value: '华为Mate40E',
},
{
lable: 'OCE-AN00',
value: '华为Mate40',
},
{
lable: 'NOH-AN00',
value: '华为Mate40 Pro',
},
{
lable: 'NOP-AN00',
value: '华为Mate40 Pro+',
},
{
lable: 'ANA-AN00',
value: '华为P40',
},
{
lable: 'ANA-TN00',
value: '华为P40',
},
{
lable: 'ELS-AN00',
value: '华为P40 Pro',
},
{
lable: 'ELS-TN00',
value: '华为P40 Pro',
},
{
lable: 'ELS-AN10',
value: '华为P40 Pro Premium Edition',
},
{
lable: 'CET-AL60',
value: '华为 Mate 50E',
},
{
lable: 'BNE-AL00',
value: '华为 Mate 50',
},
{
lable: 'CTR-AL00',
value: '华为畅享 50 Pro',
},
{
lable: 'STK-AL00',
value: '华为畅享 10 Pro',
},
{
lable: 'CET-AL00',
value: '华为 Mate 50 RS',
},
{
lable: 'DCO-AL00',
value: '华为 Mate 50 Pro',
},
{
lable: 'JSC-AN00',
value: '华为nova 8 SE',
},
{
lable: 'ANG-AN00',
value: '华为nova 8',
},
{
lable: 'OCE-AN00',
value: '华为Mate40',
},
{
lable: 'NOH-AN00',
value: '华为Mate40 Pro',
},
{
lable: 'NOP-AN00',
value: '华为Mate40 Pro+',
},
{
lable: 'LIO-AL00',
value: '华为Mate30E Pro',
},
{
lable: 'CindyN-AN00',
value: '华为nova 7 SE',
},
{
lable: 'ELE-AL00',
value: '华为P30',
},
{
lable: 'VOG-AL10',
value: ' 华为P30 Pro',
},
{
lable: 'HMA-AL00',
value: '华为Mate20',
},
{
lable: 'EML-AL00',
value: '华为P20',
},
{
lable: 'CLT-AL00',
value: '华为P20 Pro',
},
{
lable: 'LYA-AL00',
value: '华为Mate20 Pro',
},
{
lable: 'LIO-AN00',
value: '华为Mate30 Pro',
},
{
lable: 'VOG-AL00',
value: '华为P30 Pro',
},
{
lable: 'SEA-AL10',
value: '华为nova5 Pro',
},
{
lable: 'TAS-AN00',
value: '华为Mate30',
},
{
lable: 'TAS-AL00',
value: '华为Mate30',
},
{
lable: 'PAR-AL00',
value: '华为Nova 3',
},
{
lable: 'VCE-AL00',
value: '华为Nova 4',
},
{
lable: 'ADT-AN00',
value: '荣耀X40 GT',
},
{
lable: 'VNE-AN40',
value: '荣耀Play6C',
},
{
lable: 'FNE-AN00',
value: '荣耀70 Pro',
},
{
lable: 'HPB-AN00',
value: '荣耀70 Pro+',
},
{
lable: 'VNE-AN00',
value: '荣耀畅玩30',
},
{
lable: 'CMA-AN40',
value: '荣耀Play6T',
},
{
lable: 'LGE-AN20',
value: '荣耀Magic4 至臻版',
},
{
lable: 'TFY-AN40',
value: '荣耀Play6T Pro',
},
{
lable: 'LGE-AN00',
value: '荣耀Magic4',
},
{
lable: 'LGE-AN10',
value: '荣耀Magic4 Pro',
},
{
lable: 'TFY-AN40',
value: '荣耀60 SE',
},
{
lable: 'MGI-AN00',
value: '荣耀Magic V',
},
{
lable: 'DIO-AN00',
value: '荣耀X40i',
},
{
lable: 'ANY-AN00',
value: '荣耀X30',
},
{
lable: 'EDG-AN00',
value: '荣耀X30i',
},
{
lable: 'TFY-AN00',
value: '荣耀X30i',
},
{
lable: 'KKG-AN70',
value: '荣耀X30 Max',
},
{
lable: 'CMA-AN00',
value: '荣耀畅玩30 Plus',
},
{
lable: 'TNA-AN00',
value: '荣耀60 Pro',
},
{
lable: 'LSA-AN00',
value: '荣耀60',
},
{
lable: 'ELZ-AN10',
value: '荣耀Magic3 Pro',
},
{
lable: 'ELZ-AN20',
value: '荣耀Magic3 至臻版',
},
{
lable: 'JLH-AN00',
value: '荣耀50 SE',
},
{
lable: 'CHL-AN00',
value: '荣耀X20 SE',
},
{
lable: 'NTN-AN00',
value: '荣耀50',
},
],
},
{
// 华为
type: 'vivo',
modelNumber: [
{
lable: 'V1731CA',
value: 'vivo Y73t',
},
{
lable: 'V2166BA',
value: 'vivo Y77e',
},
{
lable: 'V2219A',
value: 'vivo Y77',
},
{
lable: 'V2188A',
value: 'vivo T2x',
},
{
lable: 'V2170A',
value: 'vivo X Note',
},
{
lable: 'V2178A',
value: 'vivo X Fold',
},
{
lable: 'V2166A',
value: 'vivo Y33s',
},
{
lable: 'V2168A',
value: 'vivo Y10(t1)',
},
{
lable: 'V2229A',
value: 'vivo X Fold+',
},
{
lable: 'V2183A',
value: 'vivo X80',
},
{
lable: 'V2207A',
value: 'vivo S15 Pro',
},
{
lable: 'V2203A',
value: 'vivo S15',
},
{
lable: 'V2185A',
value: 'vivo X80 Pro',
},
{
lable: 'V2199A',
value: 'vivo S15e',
},
{
lable: 'V2199GA',
value: 'vivo S15 Pro',
},
{
lable: 'V2185A',
value: 'vivo X80 Pro',
},
{
lable: 'V2162A',
value: 'vivo S12',
},
{
lable: 'V2156A',
value: 'vivo Y55s',
},
{
lable: 'V2163A',
value: 'vivo S12 Pro',
},
{
lable: 'V2158A',
value: 'vivo Y32',
},
{
lable: 'V2123A',
value: 'vivo X70',
},
{
lable: 'V2156A',
value: 'vivo Y76s',
},
{
lable: 'V2130A',
value: 'vivo S10e',
},
{
lable: 'V2134A',
value: 'vivo X70 Pro',
},
{
lable: 'V2123A',
value: 'vivo X70',
},
{
lable: 'V2125A',
value: 'vivo X70 Pro+',
},
{
lable: 'V2111A',
value: 'vivo Y53s',
},
{
lable: 'V2121A',
value: 'vivo S10 Pro',
},
{
lable: 'V2121A',
value: 'vivo S10',
},
{
lable: 'V2059A',
value: 'vivo X60',
},
{
lable: 'V2068A',
value: 'vivo Y31s',
},
{
lable: 'V2056A',
value: 'vivo X60t Pro+',
},
{
lable: 'V2057A',
value: 'vivo Y52s',
},
{
lable: 'V2072A',
value: 'vivo S9',
},
{
lable: 'V2048A',
value: 'vivo S9e',
},
{
lable: 'V2034A',
value: 'vivo Y30g',
},
{
lable: 'V2085A',
value: 'vivo X60t',
},
{
lable: 'V2080A',
value: 'vivo S7t',
},
{
lable: 'V2034A',
value: 'vivo Y30',
},
{
lable: 'V2031EA',
value: 'vivo S7e',
},
{
lable: 'V2031A',
value: 'vivo Y73s',
},
{
lable: 'V2020A',
value: 'vivo Y3s',
},
{
lable: 'TAS-AN00',
value: 'vivo S7',
},
],
},
{
type: 'Samsung',
modelNumber: [
{
lable: 'SM-G965U',
value: 'Samsung S9+',
},
{
lable: 'SM-W9023',
value: 'Samsung W23',
},
{
lable: 'SM-W7023',
value: 'Samsung W23 Flip',
},
{
lable: 'SM-S9010',
value: 'Samsung Galaxy S22',
},
{
lable: 'SM-S9060',
value: 'Samsung Galaxy S22 Plus',
},
{
lable: 'SM-S9080',
value: 'Samsung Galaxy S22 Note',
},
{
lable: 'SM-G9900',
value: 'Samsung Galaxy S21 FE',
},
{
lable: 'SM-G998U',
value: 'Samsung Galaxy S21 Ultra',
},
{
lable: 'SM-F7210',
value: 'Samsung Galaxy Z Flip4',
},
{
lable: 'SM-F9360',
value: 'Samsung Galaxy Z Fold4',
},
{
lable: 'SM-W9023',
value: 'Samsung W22',
},
{
lable: 'SM-F7110',
value: 'Samsung Z Flip3',
},
{
lable: 'SM-F9260',
value: 'Samsung Z Fold3',
},
{
lable: 'SM-E5260',
value: 'Samsung F52',
},
{
lable: 'SM-A5260',
value: 'Samsung Galaxy A52',
},
{
lable: 'SM-G998U',
value: 'Samsung Galaxy S21 Ultra',
},
{
lable: 'SM-G9980',
value: 'Samsung Galaxy S21 Ultra',
},
{
lable: 'SM-G9910',
value: 'Samsung S21',
},
{
lable: 'SM-G9960',
value: 'Samsung S21+',
},
{
lable: 'SM-A326B',
value: 'Samsung Galaxy A32',
},
],
},
];
第三步新建index.tsx应用 ：mobile-detect
// 新建index.tsx 文件
import MobileDetect from 'mobile-detect';
import { judgeBrand, arrModal } from './model';
const index =()=>{
useEffect(() => {
onMobilePhone();
}, []);
const onMobilePhone = () => {
console.log(userAgent, '获取userAgent信息');
var md = new MobileDetect(userAgent);
var os = md.os(); //获取系统
// 获取华为
if (userAgent.split(')')[0].includes('HMSCore')) {
HMS = userAgent.split(')')[0].split('HMSCore')[0].split(';');
}
let model = HMS[HMS.length - 2];
let val;
if (os == 'iOS') {
//ios系统的处理
// @ts-ignore
model = md.mobile();
// console.log(md.mobile(), os, '获取系统', os == 'iOS');
if (model == 'iPhone') {
let iphoneArr = [
['430,932,3', 'A15', 'iPhone 14 Pro Max'],
['393,852,3', 'A15', 'iPhone 14 Pro'],
['375,812,3', 'A15', 'iPhone 13(12) min'],
['428,926,3', 'A14', 'iPhone 14(12/13) Plus'],
['390,844,3', 'A14', 'iPhone 14(12/13)'],
['414,896,3', 'A13', 'iPhone 11 Pro Max(Xs Max)'],
['375,812,3', 'A13', 'iPhone 11 Pro(X/Xs)'],
['414,896,2', 'A13', 'iPhone 11(XR)'],
['414,736,3', 'A12', 'iPhone 8(7/6s) Plus'],
['375,667,2', 'A11', 'iPhone 8(7/6)'],
['320,568,2', 'A11', 'iPhone 5(s/se)'],
['320,480,2', 'A10', 'iPhone 4(s)'],
];
// 获取GPU信息
var canvas = document.createElement('canvas'),
gl = canvas.getContext('experimental-webgl'),
// @ts-ignore
debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
// @ts-ignore
let iphoneGPU = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
let width = window.screen.width;
let height = window.screen.height;
let devicePixelRatio = window.devicePixelRatio;
console.log(width, height, devicePixelRatio);
let baseInfo = width + ',' + height + ',' + devicePixelRatio;
iphoneArr.some((item) => {
if (item[0] === baseInfo) {
model = item[2];
console.log('iphoneGPU', iphoneGPU == item[1]);
}
});
let os = +md.version('iPhone');
// console.log(`${md.mobile()} IOS${os}`);
// console.log(model, '鸡鸡', userAgent.toLowerCase());
val = model;
} else {
model = 'iPad';
}
} else if (os == 'AndroidOS') {
//Android系统的处理
var j;
var sss = userAgent.split(';');
for (var i = 0; i < sss.length; i++) {
if (sss[i].indexOf('Build/') > 0) {
j = i;
break;
}
}
// @ts-ignore
if (j > -1) {
// @ts-ignore
model = sss[j].substring(0, sss[j].indexOf('Build/'));
}
arrModal.map((item) => {
if (item.type == judgeBrand(userAgent.toLowerCase())) {
item.modelNumber.map((vm) => {
if (vm.lable == model.trim()) {
val = vm.value;
}
});
}
});
}
// console.log(val);
val = val ? val : '其他型号手机';
localStorage.setItem('model', val);
console.log('我model是', val);
};
}
export default index;
如有帮助请关注点赞，若有问题请留言
本文转载自: https://blog.csdn.net/weixin_46600931/article/details/127764584
版权归原作者 Jim-zf 所有， 如有侵权，请联系我们删除。
版权归原作者 Jim-zf 所有， 如有侵权，请联系我们删除。