uni-halo/.agents/skills/uniapp-project/examples/api/device/get-system-info.md

uni.getSystemInfo - 获取系统信息示例

官方文档

参考官方文档：https://uniapp.dcloud.net.cn/api/system/info.html#getsysteminfo

概述

uni.getSystemInfo 用于获取系统信息，包括设备信息、屏幕信息等。

基础用法

uni.getSystemInfo({
  success: (res) => {
    console.log('系统信息', res)
  }
})

完整示例

示例 1: 获取系统信息

uni.getSystemInfo({
  success: (res) => {
    console.log('手机品牌', res.brand)
    console.log('手机型号', res.model)
    console.log('系统版本', res.system)
    console.log('平台', res.platform)
    console.log('屏幕宽度', res.windowWidth)
    console.log('屏幕高度', res.windowHeight)
  }
})

示例 2: 同步获取系统信息

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

示例 3: 在页面中使用

<template>
  <view class="container">
    <button @click="getSystemInfo">获取系统信息</button>
    <view v-if="systemInfo" class="info-list">
      <view class="info-item">
        <text class="label">手机品牌：</text>
        <text>{{ systemInfo.brand }}</text>
      </view>
      <view class="info-item">
        <text class="label">手机型号：</text>
        <text>{{ systemInfo.model }}</text>
      </view>
      <view class="info-item">
        <text class="label">系统版本：</text>
        <text>{{ systemInfo.system }}</text>
      </view>
      <view class="info-item">
        <text class="label">平台：</text>
        <text>{{ systemInfo.platform }}</text>
      </view>
      <view class="info-item">
        <text class="label">屏幕宽度：</text>
        <text>{{ systemInfo.windowWidth }}px</text>
      </view>
      <view class="info-item">
        <text class="label">屏幕高度：</text>
        <text>{{ systemInfo.windowHeight }}px</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      systemInfo: null
    }
  },
  onLoad() {
    this.getSystemInfo()
  },
  methods: {
    getSystemInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.systemInfo = res
        }
      })
    }
  }
}
</script>

<style>
.info-list {
  margin-top: 20px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}
.info-item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.label {
  font-weight: bold;
  color: #333;
}
</style>

示例 4: 适配不同屏幕

<template>
  <view class="container" :style="containerStyle">
    <text>自适应内容</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      containerStyle: {}
    }
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync()
    this.containerStyle = {
      width: systemInfo.windowWidth + 'px',
      height: systemInfo.windowHeight + 'px'
    }
  }
}
</script>

示例 5: 判断平台

const systemInfo = uni.getSystemInfoSync()

// 判断平台
if (systemInfo.platform === 'ios') {
  console.log('iOS 平台')
} else if (systemInfo.platform === 'android') {
  console.log('Android 平台')
}

// 判断是否为 App
if (systemInfo.platform !== 'devtools') {
  console.log('非开发工具环境')
}

返回值说明

参数名	类型	说明
brand	String	手机品牌
model	String	手机型号
system	String	操作系统版本
platform	String	客户端平台
windowWidth	Number	窗口宽度
windowHeight	Number	窗口高度
pixelRatio	Number	设备像素比
screenWidth	Number	屏幕宽度
screenHeight	Number	屏幕高度
statusBarHeight	Number	状态栏高度
safeArea	Object	安全区域

平台兼容性

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ 小程序	✅
快手小程序	✅
App	✅
快应用	✅

注意事项

1. 建议在 onLoad 中获取系统信息
2. 同步版本 getSystemInfoSync 性能更好
3. 不同平台返回的信息可能不同
4. 使用 windowWidth 和 windowHeight 进行屏幕适配

参考资源

• 官方文档: https://uniapp.dcloud.net.cn/api/system/info.html#getsysteminfo
• 同步版本: https://uniapp.dcloud.net.cn/api/system/info.html#getsysteminfosync