微信小程序获取导航栏内容区域以及底部安全区域代码

test.json

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

test.wxml

<!-- 状态栏高度 -->
<view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
<!-- 标题栏高度 -->
<view class="nav-bar" style="height: {{navBarHeight}}px;"></view>
<!-- 内容区域高度 -->
<view class="content" style="height: {{safeHeight - navBarHeight}}px"></view>
<!-- 底部安全区域高度(隔绝ios底部小横条) -->
<view class="bottom-safe" style="height: {{bottomSafeHeight}}px;"></view>

test.wxss

page {
  background-color: red;
}

view {
  width: 100%;
}

.status-bar {
  background-color: rgb(55, 150, 187);
}

.nav-bar {
  background-color: bisque;
}

.safe {
  background-color: burlywood;
}

.content {
  background-color: rgb(243, 86, 222);
}

.bottom-safe {
  background-color: rgb(59, 112, 209);
}

test.js

Page({
  data: {
    statusBarHeight: 0,
    navBarHeight: 0,
    safeHeight: 0,
    bottomSafeHeight: 0,
  },
  onLoad() {
    // 获取的数值单位是px
    const windowInfo = wx.getWindowInfo();
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    console.log(windowInfo);
    console.log(menuButtonInfo);

    let statusBarHeight = windowInfo.statusBarHeight;
    let navBarHeight =
      menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
    let safeHeight = windowInfo.safeArea.height;
    let bottomSafeHeight =
      windowInfo.screenHeight - windowInfo.safeArea.height - statusBarHeight;
    this.setData({
      statusBarHeight,
      navBarHeight,
      safeHeight,
      bottomSafeHeight,
    });
    console.log("statusBarHeight", statusBarHeight);
    console.log("navBarHeight", navBarHeight);
    console.log("safeHeight", safeHeight);
    console.log("bottomSafeHeight", bottomSafeHeight);
  },
});