在开发跨平台应用时，获取设备的相关信息是至关重要的。UniApp 提供了简单易用的 API，帮助我们获取当前设备的型号、操作系统、屏幕尺寸等信息，进而实现自适应布局和优化用户体验。本文将介绍在 Vue 2 和 Vue 3 中，如何获取当前设备信息，并解析两者的区别。

一、简介

在 UniApp 中，我们可以使用 uni.getSystemInfo() 或 uni.getSystemInfoSync() 来获取设备信息。两者的区别在于：

• uni.getSystemInfo() 是异步方法，返回一个 Promise 对象。
• uni.getSystemInfoSync() 是同步方法，直接返回设备信息对象。

获取设备信息不仅能帮助我们调整页面布局，还能根据平台差异化提供不同的 UI 和功能。

二、Vue 2 获取设备信息

1. 使用异步方法 uni.getSystemInfo()

在 Vue 2 中，通常通过 mounted() 生命周期函数获取设备信息。以下是使用 uni.getSystemInfo() 异步方法的示例代码：

<template>
  <view>
    <text>{
    
    { deviceInfo }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceInfo: ''
    };
  },
  mounted() {
    this.getDeviceInfo();
  },
  methods: {
    // 获取设备信息
    getDeviceInfo() {
      uni.getSystemInfo({
        success: (res) => {
          // 获取成功后的设备信息
          this.deviceInfo = `设备型号：${res.model}, 操作系统：${res.system}, 屏幕尺寸：${res.screenWidth}x${res.screenHeight}`;
        },
        fail: (err) => {
          console.error('获取设备信息失败：', err);
        }
      });
    }
  }
};
</script>

<style scoped>
text {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 20px;
}
</style>

关键点：

• uni.getSystemInfo() 是一个异步方法，在成功获取设备信息后，我们可以在 success 回调函数中处理返回的 res 对象。
• 获取的设备信息包括：设备型号（model）、操作系统（system）、屏幕宽度和高度（screenWidth、screenHeight）等。

2. 使用同步方法 uni.getSystemInfoSync()

如果需要同步获取设备信息，可以使用 uni.getSystemInfoSync()，以下是示例代码：

<template>
  <view>
    <text>{
    
    { deviceInfo }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceInfo: ''
    };
  },
  mounted() {
    this.getDeviceInfoSync();
  },
  methods: {
    // 获取设备信息（同步）
    getDeviceInfoSync() {
      try {
        const res = uni.getSystemInfoSync();
        // 获取成功后的设备信息
        this.deviceInfo = `设备型号：${res.model}, 操作系统：${res.system}, 屏幕尺寸：${res.screenWidth}x${res.screenHeight}`;
      } catch (error) {
        console.error('获取设备信息失败：', error);
      }
    }
  }
};
</script>

<style scoped>
text {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 20px;
}
</style>

关键点：

• uni.getSystemInfoSync() 是同步方法，直接返回设备信息对象。
• 使用 try...catch 语句捕获异常，以防止在获取设备信息时出现错误。

三、Vue 3 获取设备信息

1. 使用异步方法 uni.getSystemInfo()

在 Vue 3 中，采用 Composition API 进行状态管理和生命周期管理。我们可以使用 ref 来定义响应式数据，使用 onMounted() 来代替 mounted() 生命周期钩子。

<template>
  <view>
    <text>{
    
    { deviceInfo }}</text>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const deviceInfo = ref('');

onMounted(() => {
  getDeviceInfo();
});

function getDeviceInfo() {
  uni.getSystemInfo({
    success: (res) => {
      // 获取成功后的设备信息
      deviceInfo.value = `设备型号：${res.model}, 操作系统：${res.system}, 屏幕尺寸：${res.screenWidth}x${res.screenHeight}`;
    },
    fail: (err) => {
      console.error('获取设备信息失败：', err);
    }
  });
}
</script>

<style scoped>
text {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 20px;
}
</style>

关键点：

• 使用 ref 来定义响应式数据。
• 使用 onMounted() 生命周期钩子来获取设备信息。
• deviceInfo.value 用于访问 ref 类型的数据。

2. 使用同步方法 uni.getSystemInfoSync()

Vue 3 同样支持同步方法 uni.getSystemInfoSync()，用法与 Vue 2 中的同步方法类似，只是采用了 Composition API。

---

<template>
  <view>
    <text>{
     
     { deviceInfo }}</text>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const deviceInfo = ref('');

onMounted(() => {
  getDeviceInfoSync();
});

function getDeviceInfoSync() {
  try {
    const res = uni.getSystemInfoSync();
    // 获取成功后的设备信息
    deviceInfo.value = `设备型号：${res.model}, 操作系统：${res.system}, 屏幕尺寸：${res.screenWidth}x${res.screenHeight}`;
  } catch (error) {
    console.error('获取设备信息失败：', error);
  }
}
</script>

<style scoped>
text {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 20px;
}
</style>

四、Vue 2 与 Vue 3 的差异

特性	Vue 2	Vue 3
生命周期钩子	mounted()	onMounted()
响应式数据	使用 data()	使用 ref() 或 reactive()
API 调用	使用 uni.getSystemInfo()	使用 uni.getSystemInfo()
代码结构	使用传统的 export default	使用 script setup 语法

开发建议

• 如果你正在维护 Vue 2 的 UniApp 项目，可以继续使用 mounted() 和 data()。
• 如果你正在开发新的项目或升级到 Vue 3，推荐使用 Vue 3 的 Composition API，这将使代码更加简洁且易于维护。

五、常见的设备信息字段

uni.getSystemInfo() 或 uni.getSystemInfoSync() 返回的设备信息包含许多字段，常见的字段包括：

• model：设备型号，例如 "iPhone 12" 或 "Galaxy S10"。
• system：操作系统及版本，例如 "iOS 14.4.1" 或 "Android 10"。
• screenWidth：设备屏幕的宽度（单位：像素）。
• screenHeight：设备屏幕的高度（单位：像素）。

• platform：设备平台（如 "iOS"、"Android"、"devtools"）。

参考链接

• uniapp官方文档https://zh.uniapp.dcloud.io/api/system/info.html

个人博客已同步分享：
《uniapp 获取当前设备信息》 | 一清三白