《uni-app跨平台开发完全指南》- 13 -获取设备信息

前言

大家好，今天我们聊一个看似简单、实则至关重要的技术话题——如何获取和利用设备信息。在移动应用开发中，许多令人头疼的适配问题，其根源往往就在设备信息的处理上。今天，我们就来一起聊聊这个话题。

一、系统信息

1.1 同步vs异步

很多人都知道用uni.getSystemInfo()，但其实这里有个性能坑：

// 不推荐：每次都调异步API
async function getDeviceInfo() {
   
   
  const info = await uni.getSystemInfo() 
  return info
}

// 推荐：同步获取+缓存
let cachedInfo = null

function getSystemInfo() {
   
   
  if (!cachedInfo) {
   
   
    // 首次使用同步API，避免Promise开销
    cachedInfo = uni.getSystemInfoSync()
  }
  return cachedInfo
}

为什么同步更好？

• 无Promise开销，避免微任务队列调度
• 不用await
• 应用启动时就应该获取

但同步API有个坑：在极少数情况下可能会阻塞UI。建议：

• 应用启动时用同步
• 运行时变化用异步监听

1.2 专业术语解释

const systemInfo = uni.getSystemInfoSync()

// 一下6个字段比较重要：
const essentialFields = {
   
   
  // 1. 设备识别
  platform: systemInfo.platform,    // "android" | "ios" | "web"
  model: systemInfo.model,          // 具体型号，如"iPhone 13 Pro"
  
  // 2. 屏幕信息
  pixelRatio: systemInfo.pixelRatio,   // 设备像素比
  screenWidth: systemInfo.screenWidth, // 物理像素宽度
  windowWidth: systemInfo.windowWidth, // 可用宽度
  
  // 3. 刘海屏-安全区域
  safeArea: systemInfo.safeArea,              // 安全区域坐标
  statusBarHeight: systemInfo.statusBarHeight // 状态栏高度
}

特别说明一下pixelRatio这个字段，很多新手会忽略它：

像素比的意义：

// 根据像素比加载合适图片
function getImageUrl(baseUrl, pixelRatio) {
   
   
  if (pixelRatio >= 3) return `${
     
     baseUrl}@3x.png`
  if (pixelRatio >= 2) return `${
     
     baseUrl}@2x.png`
  return `${
     
     baseUrl}.png`
}

// 计算Canvas绘制尺寸
function getCanvasSize(designSize, pixelRatio) {
   
   
  return {
   
   
    width: designSize.width * pixelRatio,
    height: designSize.height * pixelRatio,
    styleWidth: designSize.width,
    styleHeight: designSize.height
  }
}

1.3 平台差异处理

uni-app号称"一套代码，多端运行"，但现实是不同平台确实存在差异：

// Platform适配工具类
class PlatformAdapter {
   
   
  static getStatusBarHeight() {
   
   
    const info = uni.getSystemInfoSync()
    
    // iOS和Android的状态栏高度
    if (info.platform === 'ios') {
   
   
      // iOS：iPhone X以上有刘海
      const isNotchScreen = this.isNotchScreen(info)
      return isNotchScreen ? 44 : 20
    } else if (info.platform === 'android') {
   
   
      // Android：通常比iOS高，且版本差异大
      const version = parseFloat(info.system.split(' ')[1]) || 0
      return version >= 10 ? 28 : 25
    }
    
    return 20 // Web端默认
  }
  
  static isNotchScreen(info) {
   
   
    // 判断是否为刘海屏
    const notchModels = [
      'iPhone X', 'iPhone 11', 'iPhone 12', 'iPhone 13',
      'iPhone 14', 'iPhone 15'
    ]
    return notchModels.some(model => info.model.includes(model))
  }
}

二、屏幕适配

2.1 rpx单位

rpx是uni-app的核心创新，让我们深入了解一下rpx吧。

// rpx转换原理
function rpx2px(rpx, windowWidth = 375) {
   
   
  // 1rpx = windowWidth / 750
  return (rpx * windowWidth) / 750
}

// 注意事项
const designWidth = 750
const deviceWidth = uni.getSystemInfoSync().windowWidth

// 按钮宽度是200rpx
const buttonDesignWidth = 200

// 在任何设备上，实际宽度都是：
const actualWidth = (buttonDesignWidth / designWidth) * deviceWidth

rpx的好处在于：

• 750rpx对应设计稿750px
• 所有元素按屏幕宽度等比缩放
• 框架自动处理转换

rpx局限性：

• 不适合需要固定尺寸的场景（如1px边框）
• 在大屏设备上可能过度拉伸
• 图片使用rpx需要配合mode="widthFix"

2.2 适配安全区域

随着全面屏普及，安全区域适配成了必修课：