uniapp nvue中如何使用uni.getsysteminfo获取系统信息

在uniapp的nvue页面中，调用uni.getSystemInfo获取系统信息时无法正常返回数据，请问应该如何正确使用？代码按照官方文档编写但获取不到屏幕宽度、高度等参数，是否需要特殊配置或引入模块？

2 回复

在nvue页面，使用uni.getSystemInfo获取系统信息：

uni.getSystemInfo({
  success: (res) => {
    console.log(res.platform) // 平台
    console.log(res.screenWidth) // 屏幕宽度
  }
})

或使用异步方式：

const systemInfo = await uni.getSystemInfo()
console.log(systemInfo.model) // 设备型号

注意：nvue中用法与vue页面一致。


在 uni-app 的 nvue 页面中，使用 uni.getSystemInfo 获取系统信息的方法与普通 vue 页面相同。以下是具体步骤和示例代码：

使用方法

  1. 引入并调用 API：在 nvue 页面的 <script> 部分直接调用 uni.getSystemInfo。
  2. 处理异步结果：通过 Promise 或回调函数获取系统信息数据。

示例代码

<template>
  <div class="container">
    <text>系统平台: {{ systemInfo.platform }}</text>
    <text>屏幕宽度: {{ systemInfo.screenWidth }}</text>
    <text>屏幕高度: {{ systemInfo.screenHeight }}</text>
    <!-- 可根据需要显示更多字段 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      systemInfo: {}
    }
  },
  onLoad() {
    this.getSystemInfo();
  },
  methods: {
    // 方法1: 使用 Promise 语法
    async getSystemInfo() {
      try {
        const res = await uni.getSystemInfo();
        this.systemInfo = res;
        console.log('系统信息:', res);
      } catch (err) {
        console.error('获取系统信息失败:', err);
      }
    }

    // 方法2: 使用回调函数语法
    // getSystemInfo() {
    //   uni.getSystemInfo({
    //     success: (res) => {
    //       this.systemInfo = res;
    //       console.log('系统信息:', res);
    //     },
    //     fail: (err) => {
    //       console.error('获取系统信息失败:', err);
    //     }
    //   });
    // }
  }
}
</script>

关键说明

  • 兼容性：uni.getSystemInfo 在 nvue 中完全支持，用法与 vue 页面一致。
  • 常用字段：
    • platform：平台类型（如 ‘android’, ‘ios’）
    • screenWidth / screenHeight：屏幕尺寸
    • windowWidth / windowHeight：窗口尺寸
    • statusBarHeight：状态栏高度
    • system：操作系统版本
  • 注意事项：
    • 部分设备信息可能因平台差异而不同
    • 建议在页面加载时（如 onLoad）调用此 API

通过以上代码即可在 nvue 中成功获取并显示系统信息。

回到顶部