uniapp获取屏幕顶部状态栏高度

要获取uniapp中屏幕顶部状态栏的高度，可以使用以下代码：

uni.getSystemInfo({
  success: function (res) {
    let statusBarHeight = res.statusBarHeight;
    // statusBarHeight 就是状态栏的高度
  }
});

uni.getSystemInfo() 方法可以获取当前设备的系统信息，其中包括状态栏的高度信息。在获取成功后，可以通过 res.statusBarHeight 获取到状态栏的高度。需要注意的是，获取状态栏高度的方法在不同操作系统和设备上的表现可能会有所不同，因此需要进行兼容性处理。

相关问题

uniapp获取胶囊高度和状态栏高度

### 获取 UniApp 中胶囊按钮和状态栏的高度

在 UniApp 开发过程中，为了实现更灵活的页面布局设计，了解并获取设备的状态栏高度以及导航胶囊（右上角菜单按钮）的位置信息是非常重要的。

对于获取 **状态栏高度** ，可以利用 `uni.getSystemInfo` 或者同步方法 `uni.getSystemInfoSync()` 来取得当前系统的状态栏高度。通过调用这些 API 接口可以直接返回包含 statusBarHeight 属性的对象，该属性即代表了状态栏的实际像素高度[^1]。

// 异步方式获取状态栏高度
uni.getSystemInfo({
    success: function (res) {
        console.log(res.statusBarHeight); // 输出状态栏高度
    }
});

// 同步方式获取状态栏高度
const systemInfo = uni.getSystemInfoSync();
console.log(systemInfo.statusBarHeight); // 输出状态栏高度

至于 **胶囊按钮的信息** （包括其宽度、高度及其相对于视窗左边缘的距离），则可以通过调用 `wx.getMenuButtonBoundingClientRect()` 方法来获得。此函数会返回一个矩形对象描述胶囊按钮的具体位置尺寸数据[^2]。

let menuButtonRect = wx.getMenuButtonBoundingClientRect();
console.log(menuButtonRect.top, menuButtonRect.left, menuButtonRect.width, menuButtonRect.height);
// 分别输出胶囊按钮距离顶部距离、左侧距离、宽度、高度

上述代码片段展示了如何分别获取状态栏高度与胶囊按钮的相关几何参数，在实际项目开发中可以根据需求进一步处理这些数值以适应不同屏幕大小下的界面适配问题[^3]。

uniapp 获取顶部导航栏和安全区高度

UniApp 提供了相应的API来获取顶部导航栏和安全区的高度，这通常是在做页面布局或者需要处理状态栏兼容时会用到。以下是获取这两个信息的基本步骤：

1. 获取顶部导航栏高度：
- 使用 UniApp 的 `uni.getSystemInfoSync()` 方法，它返回设备的信息，其中包括 `windowTopHeight` 属性，这个值就是包括导航栏在内的屏幕总高度。

   const sysInfo = uni.getSystemInfoSync();
   const navHeight = sysInfo.windowTopHeight;

2. 获取安全区高度：
- 需要注意的是，在 UniApp 中，"安全区"并不像 iOS 和 Android 上有明确的概念，但它可能会指代预留的操作系统空间，比如iOS的刘海屏区域。目前 UniApp 并没有直接提供获取安全区高度的 API。如果要模拟这种效果，可以结合实际应用场景和设计规范来估算。

如果你确实需要处理这部分布局，并且希望得到类似的安全区高度，可以在项目启动时预估一个固定的值（如iPhone X的刘海屏高度），或者动态计算可能的变化部分。