小程序 wx.getSystemInfoSync 获取 windowHeight 不准确的问题

时间：2024-03-12 15:29:11

如果本文对你有用，请爱心点个赞，提高排名，帮助更多的人。谢谢大家！❤

如果解决不了，可以在文末进群交流。

wx.getSystemInfo(OBJECT)

获取系统信息。

OBJECT参数说明：

参数类型必填说明
success Function 是 接口调用成功的回调
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

success回调参数说明：

参数说明最低版本
brand 手机品牌 1.5.0
model 手机型号  
pixelRatio 设备像素比  
screenWidth 屏幕宽度 1.1.0
screenHeight 屏幕高度 1.1.0
windowWidth 可使用窗口宽度  
windowHeight 可使用窗口高度  
statusBarHeight 状态栏的高度 1.9.0
language 微信设置的语言  
version 微信版本号  
system 操作系统版本  
platform 客户端平台  
fontSizeSetting 用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准，单位：px 1.5.0
SDKVersion 客户端基础库版本 1.1.0

示例代码：

wx.getSystemInfo({
  success: function(res) {
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
    console.log(res.platform)
  }
})

 

1. windowHeight 概念

可使用窗口高度，即：屏幕高度(screenHeight) - 导航(tabbar)高度。

2. 存在问题

安卓设备下获取windowHeight不能准确得到对应的高度，总是拿到屏幕高度。

3. 原因

（1）同步接口 wx.getSystemInfoSync 并不同步（猜测）

wx.getSystemInfoSync 只是在页面初始化时提前计算。所以对于 windowHeight 这种需要进行功能判断的属性，应该使用异步接口，实时获取。

（2）wx.getSystemInfo 调用的时机不当

上面讲了 windowHeight 的定义，所以这个值取决于tabbar是否存在。

为了保证 tabbar 显示后再进行取值，建议在生命周期的 onReady 钩子中调用接口wx.getSystemInfo。

4. 最终方案
在需要获取可使用窗口高度的对应js中， onReady 中调用wx.getSystemInfo；

 

相关文章