1. 程式人生 > >小程式 wx.getSystemInfoSync 獲取 windowHeight 不準確的問題

小程式 wx.getSystemInfoSync 獲取 windowHeight 不準確的問題

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