uni-app Harmony next 环境下 onLoad 中获取的 windowHeight 为 0

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

uni-app Harmony next 环境下 onLoad 中获取的 windowHeight 为 0

开发环境 版本号 项目创建方式
Windows win11 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win11

HBuilderX类型：正式

HBuilderX版本号：4.29

手机系统：HarmonyOS NEXT

手机系统版本号：HarmonyOS NEXT Developer Beta1

手机厂商：模拟器

手机机型：手机模拟器

页面类型：vue

vue版本：vue3

打包方式：云端

示例代码：

onLoad(() => { const { windowHeight, windowWidth } = uni.getSystemInfoSync() console.log(“windowHeight”, windowHeight); // 返回0 console.log(“windowWidth”, windowWidth); // 返回0 })

操作步骤：




onLoad(() => {
const {
windowHeight,
windowWidth
} = uni.getSystemInfoSync()
console.log("windowHeight", windowHeight); // 返回0
console.log("windowWidth", windowWidth); // 返回0
})



预期结果：

输出屏幕高度

实际结果：




输出0

bug描述：




在onload中调用uni.getSystemInfoSync()，其中windowHeight，windowWidth 为 0

Harmonyos Next教程
3 回复

升级到最新alpha再试试看


1

在uni-app Harmony next环境下，如果在onLoad生命周期函数中获取的windowHeight为0，这通常是因为页面的尺寸信息尚未被正确初始化或计算。在uni-app中，页面的尺寸信息（如窗口高度）通常需要在页面布局完成后才能准确获取。为了获取正确的windowHeight，你可以考虑以下几种方法：

方法一：使用onReady生命周期

onReady生命周期函数在页面初次渲染完成时触发，此时页面的布局已经完成，可以尝试在这里获取窗口高度。

export default {
    onLoad() {
        // 这里尝试获取windowHeight可能为0
        console.log('onLoad windowHeight:', uni.getSystemInfoSync().windowHeight);
    },
    onReady() {
        // 页面布局完成后获取windowHeight
        const systemInfo = uni.getSystemInfoSync();
        const windowHeight = systemInfo.windowHeight;
        console.log('onReady windowHeight:', windowHeight);
    }
}

方法二：使用onPageScroll监听页面滚动

如果页面高度是动态变化的（如包含可滚动内容），你可以使用onPageScroll事件监听页面滚动，并在回调中获取窗口或页面内容的高度。但注意，这通常用于获取可视区域的高度或滚动位置。

export default {
    data() {
        return {
            windowHeight: 0
        };
    },
    onLoad() {
        // 初始化尝试获取（可能不准确）
        this.windowHeight = uni.getSystemInfoSync().windowHeight;
    },
    onPageScroll(e) {
        // 这里主要用于处理滚动事件，但也可以尝试重新获取窗口高度（不常用）
        const systemInfo = uni.getSystemInfoSync();
        this.windowHeight = systemInfo.windowHeight;
        console.log('onPageScroll windowHeight:', this.windowHeight);
    },
    mounted() {
        // 可以在mounted生命周期（如果是Vue组件）再次尝试获取，但通常onReady更合适
        this.updateWindowHeight();
    },
    methods: {
        updateWindowHeight() {
            this.windowHeight = uni.getSystemInfoSync().windowHeight;
        }
    }
}

方法三：延迟获取

作为临时解决方案，你可以考虑使用setTimeout来延迟获取窗口高度，但这并不是一个可靠的方法，因为它依赖于不确定的延迟时间。

export default {
    onLoad() {
        setTimeout(() => {
            const windowHeight = uni.getSystemInfoSync().windowHeight;
            console.log('Delayed windowHeight:', windowHeight);
        }, 500); // 延迟500毫秒获取
    }
}

综上所述，推荐使用onReady生命周期来获取窗口高度，因为它确保了页面布局已经完成。如果页面高度是动态变化的，可以考虑结合onPageScroll事件或其他布局更新机制来获取最新的高度信息。

回到顶部