微信小程序开发之: 获取系统状态栏 & 胶囊高度(兼容 Iphone6)

开篇

获取系统状态栏、右上角胶囊高度,属于小程序开发中高频使用的功能。在此分享一段实现代码,实测在 Iphone6 等机型上也能获取到正确的高度信息。

获取高度

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// 状态栏 & 胶囊高度
try {
  const res = wx.getSystemInfoSync();
  const custom = wx.getMenuButtonBoundingClientRect();
  // 状态栏高度
  this.globalData.statusBarHeight = res.statusBarHeight;
  // 胶囊高度
  this.globalData.customBarHeight = (custom.top - res.statusBarHeight) * 2 + custom.height;
} catch (e) {
  console.error(e);
}

应用实例

index.xml:

1
2
3
4
<!-- 状态栏 -->
<view style="height: {{ statusBarHeight }}px; background-color: red;"></view>
<!-- 胶囊 -->
<view style="height: {{ customBarHeight }}px; background-color: green;"></view>

index.ts:

1
2
3
4
5
6
7
Page({
  data: {
    // 标题栏高度
    statusBarHeight: app.globalData.statusBarHeight,
    customBarHeight: app.globalData.customBarHeight,
  }
});

参考资料

M_SSY: 微信小程序获取顶部状态栏和胶囊的高度