 |
 |
?需求： H5頁(yè)面獲取手機(jī)具體機(jī)型在提交照片時(shí)傳給服務(wù)端，并在pc端展示
分析實(shí)現(xiàn)：因?yàn)镠5 是運(yùn)行在瀏覽器上的，只能獲取window上給的信息也就是瀏覽器信息。如下圖所示，這是安卓機(jī)（華為）的拿取到的信息。重這個(gè)信息中我們可以獲取到手機(jī)的入網(wǎng)機(jī)型代碼，這個(gè)也是唯一，是由工信部批準(zhǔn)的，是唯一不會(huì)變的。
?蘋果的我們是拿不到這個(gè)信息的，不過(guò)蘋果我們可以根據(jù)邏輯分辨率來(lái)時(shí)區(qū)分機(jī)型（此方法無(wú)法區(qū)分具體機(jī)型比如xr與11都是414,896,2）那就做折中方案蘋果機(jī)型做或的處理iPhone 11(XR)
下面是代碼實(shí)現(xiàn)
第一步? 安裝mobile-detect? ?
yarn add?mobile-detect -s
?到package.json中查看
"mobile-detect": "^1.4.5",第二步新建model.ts? ?存放數(shù)據(jù)
// 判斷業(yè)務(wù)是否是 iphone、華為、小米、oppo、view、三星 打開(kāi)
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 '其他型號(hào)手機(jī)';
}
}
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應(yīng)用 ：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(); //獲取系統(tǒng)
// 獲取華為
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系統(tǒng)的處理
// @ts-ignore
model = md.mobile();
// console.log(md.mobile(), os, '獲取系統(tǒng)', 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系統(tǒng)的處理
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 : '其他型號(hào)手機(jī)';
localStorage.setItem('model', val);
console.log('我model是', val);
};
}
export default index;
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-506481.html
?如有幫助請(qǐng)關(guān)注點(diǎn)贊，若有問(wèn)題請(qǐng)留言文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-506481.html
到了這里，關(guān)于H5獲取手機(jī)型號(hào)，獲取具體手機(jī)型號(hào)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
