Uniapp 获取系统信息：uni.getSystemInfo 与 uni.getSystemInfoSync

在 Uniapp 开发中，uni.getSystemInfo 和 uni.getSystemInfoSync 都是用于获取设备系统信息的 API，但它们的调用方式和适用场景有所不同。

一、基本区别

二、uni.getSystemInfo (异步获取)

基本用法

uni.getSystemInfo({
  success: (res) => {
    console.log(res);
  },
  fail: (err) => {
    console.error('获取系统信息失败', err);
  },
  complete: () => {
    console.log('获取系统信息完成');
  }
});

Promise 封装

function getSystemInfoAsync() {
  return new Promise((resolve, reject) => {
    uni.getSystemInfo({
      success: resolve,
      fail: reject
    });
  });
}

// 使用
async function useSystemInfo() {
  try {
    const systemInfo = await getSystemInfoAsync();
    console.log(systemInfo);
  } catch (err) {
    console.error('获取系统信息失败', err);
  }
}

三、uni.getSystemInfoSync (同步获取)

基本用法

try {
  const systemInfo = uni.getSystemInfoSync();
  console.log(systemInfo);
} catch (err) {
  console.error('获取系统信息失败', err);
}

四、返回的系统信息对象

两种方法返回的对象结构相同，包含以下常用属性：

五、使用场景对比

1. 适合使用 uni.getSystemInfo 的场景

• 不需要立即获取系统信息
• 在异步函数或Promise链中使用
• 需要处理可能的错误情况

onLoad() {
  uni.getSystemInfo({
    success: (res) => {
      this.setData({
        isIPhoneX: res.model.includes('iPhone X')
      });
    }
  });
}

2. 适合使用 uni.getSystemInfoSync 的场景

• 需要立即获取系统信息
• 在同步代码流程中
• 简单的条件判断

onLoad() {
  const systemInfo = uni.getSystemInfoSync();
  this.isIPhoneX = systemInfo.model.includes('iPhone X');
  
  // 根据平台设置样式
  if (systemInfo.platform === 'ios') {
    this.setData({ paddingTop: '44px' });
  } else {
    this.setData({ paddingTop: '48px' });
  }
}

六、实际应用示例

1. 适配全面屏

// 在页面或组件中
data() {
  return {
    isFullScreen: false,
    statusBarHeight: 0,
    safeAreaInsets: { top: 0, bottom: 0 }
  };
},

created() {
  const systemInfo = uni.getSystemInfoSync();
  
  // 判断是否是全面屏设备
  this.isFullScreen = systemInfo.screenHeight / systemInfo.screenWidth > 1.8;
  
  // 获取状态栏高度
  this.statusBarHeight = systemInfo.statusBarHeight || 0;
  
  // 获取安全区域（App端）
  if (systemInfo.safeArea) {
    this.safeAreaInsets = {
      top: systemInfo.safeArea.top,
      bottom: systemInfo.screenHeight - systemInfo.safeArea.bottom
    };
  }
}

2. 平台特定样式

<template>
  <view :style="{ paddingTop: paddingTop + 'px' }">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      paddingTop: 0
    };
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync();
    this.paddingTop = systemInfo.statusBarHeight + (systemInfo.platform === 'ios' ? 44 : 48);
  }
};
</script>

3. 设备判断

// 判断是否是iOS设备
function isIOS() {
  const systemInfo = uni.getSystemInfoSync();
  return systemInfo.platform === 'ios';
}

// 判断是否是Android设备
function isAndroid() {
  const systemInfo = uni.getSystemInfoSync();
  return systemInfo.platform === 'android';
}

// 判断是否是iPhone X及以上机型
function isIPhoneX() {
  const systemInfo = uni.getSystemInfoSync();
  return /iPhone X|iPhone 1[1-9]|iPhone [1-9][0-9]/.test(systemInfo.model);
}

七、注意事项

1. 平台差异：

   • 某些属性只在特定平台有效（如 safeArea 主要在App端有效）
   • 小程序端和H5端返回的信息可能比App端少

2. 性能考虑：

   • 频繁调用同步API可能会影响性能
   • 对于不常变化的信息，可以考虑缓存结果

3. 错误处理：

   • 同步方法需要用 try-catch 包裹
   • 异步方法需要处理 fail 回调

4. 时机问题：

   • 在应用启动时，某些信息可能还未准备好
   • 对于关键信息，建议在 onReady 或 mounted 生命周期中获取

5. 单位转换：

   • 返回的尺寸单位是 px，需要根据需要进行 rpx 转换

通过合理使用这两个API，可以更好地实现多端适配和设备特性检测，提升应用的用户体验。