/**
 * 获取微信小程序菜单栏(胶囊)信息
 * 菜单按键宽度：width
 * 菜单按键高度：height
 * 菜单按键上边界坐标：top
 * 菜单按键右边界坐标：right
 * 菜单按键下边界坐标：bottom
 * 菜单按键左边界坐标：left
 */
wx.getMenuButtonBoundingClientRect();

> 重点: 此api返回的是胶囊按钮在页面中的的上下左右坐标的绝对位置
> 注意：在模拟器使用时记得把视图百分比调为100%，否则可能会导致获取数据不准确

// 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏到胶囊的间距（胶囊上坐标位置-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
    this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
    // 状态栏和菜单按钮(标题栏)之间的间距
    // 等同于菜单按钮(标题栏)到正文之间的间距（胶囊上坐标位置-状态栏高度）
    this.globalData.menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight;
    // 菜单按钮栏(标题栏)的高度
    this.globalData.menuHeight = menuButtonInfo.height;

onLaunch() {
  this.getToken()

  // 获取系统信息
  const systemInfo = wx.getSystemInfoSync();
  // 胶囊按钮位置信息
  const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
  console.log(333, systemInfo, menuButtonInfo);
  // 导航栏高度 = 状态栏到胶囊的间距（胶囊上坐标位置-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
  this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
  // 状态栏和菜单按钮(标题栏)之间的间距
  // 等同于菜单按钮(标题栏)到正文之间的间距（胶囊上坐标位置-状态栏高度）
  this.globalData.menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight;
  // 菜单按钮栏(标题栏)的高度
  this.globalData.menuHeight = menuButtonInfo.height;
  this.globalData.top = menuButtonInfo.top;
  this.globalData.leftWidth = systemInfo.screenWidth - menuButtonInfo.width - (systemInfo.screenWidth - menuButtonInfo.right) * 2;
},
// 数据都是根据当前机型进行计算，这样的方式兼容大部分机器
globalData: {
  top: 0,
  leftWidth: 0,
  //全局数据管理
  navBarHeight: 0, // 导航栏高度
  menuBottom: 0, // 胶囊距底部间距（顶部间距也是这个）
  menuHeight: 0, // 胶囊高度
},

将viewport设置为cover，env和constant才能生效
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

同时设置env和constant代码，同样env()和constant()需要同时存在，而且顺序不能换

/* 可以通过增加padding-bottom来适配 */
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

/* 可以通过margin-bottom来适配 */
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);

/* 或者改变高度*/
height: calc(55px +  constant(safe-area-inset-bottom));
height: calc(55px +  env(safe-area-inset-bottom));