微信小程序高度计算

微信小程序布局踩坑：

先来看是设备的各类高度

* 注意:

微信小程序获取设备信息受加载首页影响；
该计算只适用于首页为自定义navbar的情况下；
若首页为微信默认配置的navbar,safeArea.height & windowHeight不包含statusBarHeight；

内容的安全高度

(1)获取设备信息

const { statusBarHeight, windowHeight, windowWidth, screenHeight}=wx.getSystemInfoSync();

(2)获取tabbar高度

const tabBarHeight = screenHeight - windowHeight;
// safeArea.height:在Android与ios中表现不同，不建议使用
// Android 包含statusHeight  ios中不含
// const tabBarHeight = safeArea.height - windowHeight + statusBarHeight;

(3)获取安全高度

// navBarHeight = 42(胶囊高度) || 自定义导航的高度；
const bodyHeight= windowHeight - statusBarHeight -navBarHeight;