如何在React中识别移动设备的CPU架构？

核心实现思路 #

通过解析浏览器的navigator.userAgent字符串识别Android设备的CPU架构，匹配预定义的APK下载链接，点击按钮时自动触发对应架构安装包的下载。由于部分设备的UserAgent信息可能不完整，需设置兜底方案。

具体实现步骤 #

1. 定义架构与下载链接的映射表

先把5种架构对应的APK下载链接整理成对象，方便后续匹配：

const apkDownloadLinks = {
  'arm64-v8a': 'https://your-domain.com/apk/app-arm64-v8a.apk',
  'armeabi-v7a': 'https://your-domain.com/apk/app-armeabi-v7a.apk',
  'x86': 'https://your-domain.com/apk/app-x86.apk',
  'x86_64': 'https://your-domain.com/apk/app-x86_64.apk',
  'mips': 'https://your-domain.com/apk/app-mips.apk' // 若仍需支持该架构
};

2. 编写CPU架构识别函数

通过分析UserAgent字符串匹配对应架构，同时设置兜底选项：

const getDeviceCpuArch = () => {
  const userAgent = navigator.userAgent.toLowerCase();
  
  if (userAgent.includes('arm64') || userAgent.includes('aarch64')) {
    return 'arm64-v8a';
  } else if (userAgent.includes('armeabi-v7a') || userAgent.includes('armv7')) {
    return 'armeabi-v7a';
  } else if (userAgent.includes('x86_64') || userAgent.includes('amd64')) {
    return 'x86_64';
  } else if (userAgent.includes('x86')) {
    return 'x86';
  } else if (userAgent.includes('mips')) {
    return 'mips';
  }
  
  // 兜底：默认返回多数设备使用的armeabi-v7a
  return 'armeabi-v7a';
};

3. 在React组件中实现下载按钮逻辑

以函数组件为例，点击按钮时自动识别架构并触发下载：

import React from 'react';

const ApkDownloadButton = () => {
  const handleDownload = () => {
    if (!navigator.userAgent.toLowerCase().includes('android')) {
      alert('此下载仅支持Android设备');
      return;
    }
    
    const arch = getDeviceCpuArch();
    const downloadUrl = apkDownloadLinks[arch];
    
    // 创建临时a标签触发下载
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = `app-${arch}.apk`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <button onClick={handleDownload} style={{ padding: '12px 24px', fontSize: '16px' }}>
      下载APP
    </button>
  );
};

// 导出映射表和识别函数（若需在其他组件复用）
export { apkDownloadLinks, getDeviceCpuArch };
export default ApkDownloadButton;

注意事项 #

• 兼容性：部分小众设备或浏览器的UserAgent可能未包含明确的架构信息，兜底方案能保证用户至少能下载兼容多数设备的安装包。
• 测试验证：需在不同架构的Android设备上测试识别逻辑的准确性，避免匹配错误。

内容的提问来源于stack exchange，提问作者Mahdi Alavitabar