uni-app 4.36 运行到鸿蒙真机时 windowHeight 计算错误

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app 4.36 运行到鸿蒙真机时 windowHeight 计算错误

bug描述：

通过 uni.getSystemInfo() 获取到的 windowHeight 值不对，uni 官方文档 中提到：

屏幕高度 = 原生NavigationBar高度（含状态栏高度）+ 可使用窗口高度 + 原生TabBar高度  

windowHeight不包含NavigationBar和TabBar的高度

但实际上在鸿蒙 next 系统上，如果上个页面没有顶部导航栏，下个页面有顶部导航栏，在下个页面获取 windowHeight 的时候，包含了顶部导航栏的高度。

示例代码：

上一个页面没有顶部导航栏，用组件 <a href="https://zh.uniapp.dcloud.io/component/uniui/uni-nav-bar.html" target="_blank">uni-nav-bar</a> 作为替代。进入下级页面，有顶部导航栏的情况下，在页面 onReady 的时候调用 uni.getSystemInfo, 使用 HBuilderX 4.36 运行到鸿蒙真机基座，打印一下系统相关的信息

```javascript
  uni.getSystemInfo({  
    success: (res) => {  
      console.log(`systeminfo: ${JSON.stringify(res)}`)  
   }  
}

使用 uni.getWindowInfo() 也是一样的


### 操作步骤：

```html
上一个页面没有顶部导航栏，用组件 <a href="https://zh.uniapp.dcloud.io/component/uniui/uni-nav-bar.html" target="_blank">uni-nav-bar</a> 作为替代。进入下级页面，有顶部导航栏的情况下，在页面 onReady 的时候调用 uni.getSystemInfo, 打印一下系统相关的信息

```javascript
  uni.getSystemInfo({  
    success: (res) => {  
      console.log(`systeminfo: ${JSON.stringify(res)}`)  
   }  
}

使用 uni.getWindowInfo() 也是一样的


### 预期结果：

有顶部导航栏时，windowHeight 不包含顶部导航栏高度

### 实际结果：

```json
{
  "appId": "__UNI__XXXXXX",
  "appLanguage": "zh-Hans-CN",
  "appName": "XXXXX",
  "appTheme": "light",
  "appVersion": "1.0.1022",
  "appVersionCode": "1001022",
  "appWgtVersion": "1.0.1022",
  "uniCompilerVersion": "4.36",
  "uniCompilerVersionCode": 4.36,
  "uniRuntimeVersion": "4.33",
  "uniRuntimeVersionCode": 4.33,
  "uniPlatform": "app",
  "deviceBrand": "huawei",
  "deviceId": "xxx",
  "deviceModel": "CLS-AL00",
  "deviceOrientation": "portrait",
  "devicePixelRatio": 3.25,
  "deviceType": "phone",
  "osLanguage": "zh-Hans",
  "osTheme": "light",
  "osVersion": "5.0.1.110",
  "osName": "harmonyos",
  "romName": "",
  "romVersion": "5.0.0",
  "system": "OpenHarmony-5.0.1.110",
  "pixelRatio": 3.25,
  "safeArea": {
    "top": 33,
    "bottom": 799,
    "left": 0,
    "right": 374,
    "width": 374,
    "height": 766
  },
  "safeAreaInsets": { "top": 33, "bottom": 0, "left": 0, "right": 0 },
  "screenHeight": 827,
  "screenWidth": 374,
  "statusBarHeight": 33,
  "windowBottom": 0,
  "windowHeight": 799,
  "windowTop": 0,
  "windowWidth": 374,
  "SDKVersion": "",
  "browserName": "",
  "browserVersion": "",
  "ua": "",
  "language": "zh-Hans-CN",
  "brand": "HUAWEI",
  "model": "",
  "platform": "harmonyos",
  "uniCompileVersion": "4.36",
  "uniCompileVersionCode": 4.36,
  "version": "",
  "errMsg": "getSystemInfo:ok",
  "errSubject": "getSystemInfo"
}

更多关于uni-app 4.36 运行到鸿蒙真机时 windowHeight 计算错误的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

感谢反馈，确认 onready 中执行 getWindowInfo 有问题

更多关于uni-app 4.36 运行到鸿蒙真机时 windowHeight 计算错误的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app 4.36版本运行到鸿蒙真机时遇到windowHeight计算错误的问题，这通常与设备的屏幕适配或框架在不同操作系统上的行为差异有关。以下是一些可能的解决方案和代码示例，用于帮助你在鸿蒙设备上正确获取窗口高度。

1. 使用uni-app提供的系统信息API

首先，确保你使用的是最新的uni-app API来获取系统信息，特别是屏幕高度。可以通过uni.getSystemInfoSync()或uni.getSystemInfo()来获取当前设备的信息。

// 同步获取系统信息
const systemInfo = uni.getSystemInfoSync();
const windowHeight = systemInfo.windowHeight;
console.log('Window Height:', windowHeight);

// 异步获取系统信息（可选）
uni.getSystemInfo({
    success: (res) => {
        const windowHeightAsync = res.windowHeight;
        console.log('Async Window Height:', windowHeightAsync);
    }
});

2. 监听窗口大小变化

如果你的应用界面可能会因为软键盘的弹出或收起而改变窗口大小，可以监听windowResize事件来获取最新的窗口高度。

uni.onWindowResize((res) => {
    const newWindowHeight = res.windowHeight;
    console.log('New Window Height:', newWindowHeight);
    // 根据新的窗口高度调整布局
});

3. 自定义适配逻辑

如果上述方法仍然无法正确获取鸿蒙设备上的窗口高度，可能需要考虑自定义适配逻辑。例如，你可以根据设备的特定型号或系统版本来调整窗口高度的计算方式。

function getCustomWindowHeight() {
    const systemInfo = uni.getSystemInfoSync();
    let windowHeight = systemInfo.windowHeight;

    // 假设鸿蒙设备有特定的系统标识，这里仅为示例
    if (systemInfo.platform === 'harmonyos') {
        // 针对鸿蒙设备的特殊适配逻辑
        // 例如，根据屏幕分辨率或其他参数调整windowHeight
        windowHeight -= 50; // 假设需要减去50px的误差
    }

    return windowHeight;
}

const customWindowHeight = getCustomWindowHeight();
console.log('Custom Window Height:', customWindowHeight);

注意事项

  • 确保你的uni-app和HBuilderX（如果使用）都更新到最新版本，以利用最新的框架功能和修复。
  • 在鸿蒙真机上测试时，注意设备的分辨率、屏幕比例等可能对窗口高度计算产生影响。
  • 如果问题依旧存在，可以考虑在uni-app社区或官方GitHub仓库提交issue，寻求官方支持。
回到顶部