微信小程序：屏幕高度（screenHeight）和可使用窗口高度（windowHeight）什么时候相同？什么时候不同？

原创于 2025-10-02 09:39:07 发布 · 372 阅读

CC 4.0 BY-SA版权

文章标签：

app.json中配置"navigationStyle": “custom”

不管渲染引擎使用webview，还是skyline，只要在app.json中配置了"navigationStyle": "custom"，那么在页面中获得的屏幕高度（screenHeight）和可使用窗口高度（windowHeight）是相同的。

例如，app.json中配置如下：
在这里插入图片描述

页面index.wxml：

<!--index.wxml-->
<navigation-bar title="验证" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    Weixin
  </view>
</scroll-view>

index.js文件：

// index.js
Page({
  onReady() {
    console.log(wx.getWindowInfo());
  }
})

页面index.json：

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  }
}

编译小程序，打印的日志：
在这里插入图片描述

在页面中获得的屏幕高度（screenHeight）和可使用窗口高度（windowHeight）是相同的。

app.json中配置"navigationStyle": “default”

在app.json中配置"navigationStyle": "default"，此时只能使用webview渲染引擎，那么在页面中获得的屏幕高度（screenHeight）和可使用窗口高度（windowHeight）是不同的。

例如，app.json配置：
在这里插入图片描述

页面index.wxml：

<!--index.wxml-->
<navigation-bar title="验证" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    Weixin
  </view>
</scroll-view>

页面index.js文件：

// index.js
Page({
  onReady() {
    console.log(wx.getWindowInfo());
  }
})

页面index.json文件：

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  }
}

编译小程序，打印的日志：
在这里插入图片描述

在页面中获得的屏幕高度（screenHeight）和可使用窗口高度（windowHeight）是不同的。