uni-app nvue页面 uni.getSystemInfoSync 无法获取安全区高度

这个api在onread里面调用

在 uni-app 的 nvue 页面中，uni.getSystemInfoSync 方法确实无法直接获取到安全区（Safe Area）的高度。这是因为 nvue 页面是基于原生渲染的，与 vue 页面的渲染方式不同，导致一些 API 的行为有所差异。

要获取安全区的高度，你可以使用以下方法：

方法一：使用 uni.getSystemInfo 异步获取

虽然 uni.getSystemInfoSync 无法直接获取安全区高度，但你可以使用 uni.getSystemInfo 异步获取，并通过 safeAreaInsets 属性来获取安全区的高度。

uni.getSystemInfo({
  success: function (res) {
    console.log('安全区上边距:', res.safeAreaInsets.top);
    console.log('安全区下边距:', res.safeAreaInsets.bottom);
    console.log('安全区左边距:', res.safeAreaInsets.left);
    console.log('安全区右边距:', res.safeAreaInsets.right);
  }
});

方法二：使用 uni.getWindowInfo 获取

uni.getWindowInfo 也可以获取到安全区的高度信息。

const windowInfo = uni.getWindowInfo();
console.log('安全区上边距:', windowInfo.safeAreaInsets.top);
console.log('安全区下边距:', windowInfo.safeAreaInsets.bottom);
console.log('安全区左边距:', windowInfo.safeAreaInsets.left);
console.log('安全区右边距:', windowInfo.safeAreaInsets.right);

方法三：使用 CSS 变量

在 nvue 页面中，你可以通过 CSS 变量来获取安全区的高度。uni-app 会自动在页面中注入一些 CSS 变量，如 --status-bar-height、--window-top、--window-bottom 等。

/* 在 nvue 页面的样式文件中 */
.container {
  padding-top: var(--status-bar-height);
  padding-bottom: var(--window-bottom);
}

方法四：使用 uni.getSystemInfoSync 结合 safeAreaInsets

虽然 uni.getSystemInfoSync 无法直接获取安全区高度，但你可以通过 safeAreaInsets 属性来获取。

const systemInfo = uni.getSystemInfoSync();
console.log('安全区上边距:', systemInfo.safeAreaInsets.top);
console.log('安全区下边距:', systemInfo.safeAreaInsets.bottom);
console.log('安全区左边距:', systemInfo.safeAreaInsets.left);
console.log('安全区右边距:', systemInfo.safeAreaInsets.right);

方法五：使用 uni.getSystemInfoSync 结合 windowHeight 和 screenHeight

你可以通过 windowHeight 和 screenHeight 来计算安全区的高度。

const systemInfo = uni.getSystemInfoSync();
const safeAreaBottom = systemInfo.screenHeight - systemInfo.windowHeight - systemInfo.statusBarHeight;
console.log('安全区下边距:', safeAreaBottom);