如何使用 uni.getWindowInfo 获取窗口信息？

推荐答案

// www.javascriptcn.com code example
// 获取窗口信息
uni.getWindowInfo({
  success: (res) => {
    console.log('窗口宽度:', res.windowWidth);
    console.log('窗口高度:', res.windowHeight);
    console.log('状态栏高度:', res.statusBarHeight);
    console.log('屏幕宽度:', res.screenWidth);
    console.log('屏幕高度:', res.screenHeight);
    console.log('设备像素比:', res.pixelRatio);
  },
  fail: (err) => {
    console.error('获取窗口信息失败:', err);
  }
});

本题详细解读

1. uni.getWindowInfo 的作用

uni.getWindowInfo 是 uni-app 提供的一个 API，用于获取当前窗口的相关信息，包括窗口的宽度、高度、状态栏高度、屏幕宽度、屏幕高度以及设备像素比等。

2. 参数说明

• success: 成功回调函数，返回的 res 对象包含以下属性：
  • windowWidth: 窗口宽度，单位 px。
  • windowHeight: 窗口高度，单位 px。
  • statusBarHeight: 状态栏高度，单位 px。
  • screenWidth: 屏幕宽度，单位 px。
  • screenHeight: 屏幕高度，单位 px。
  • pixelRatio: 设备像素比。
• fail: 失败回调函数，返回错误信息。

3. 使用场景

• 在需要根据窗口大小动态调整布局时，可以使用 uni.getWindowInfo 获取窗口信息。
• 在需要适配不同设备屏幕时，获取屏幕宽度和高度可以帮助开发者进行响应式设计。
• 在需要处理状态栏高度时，获取状态栏高度可以帮助开发者避免内容被状态栏遮挡。

4. 注意事项

• uni.getWindowInfo 是异步操作，因此需要在回调函数中处理返回的数据。
• 不同设备的屏幕尺寸和像素比可能不同，开发者需要根据实际情况进行适配。

通过 uni.getWindowInfo，开发者可以轻松获取当前窗口的详细信息，从而更好地进行界面布局和适配。