微信小程序自定义导航栏胶囊菜单按钮高度适配问题

在自定义小程序导航栏时，右上角的胶囊（MenuButton）在不同机型测试，会发现很难适配。

实测中 不同的手机，胶囊高度不一样、状态栏高度不一样。与模拟器显示的情况是不一样的。

扫码演示：

为解决这个问题就要搞清楚原理
这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）

而状态栏高度可以通过 wx.getSystemInfo(）获取，现在就只用解决导航栏高度了
观察发现，胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差，是一样的
也就是说 导航栏高度 = 胶囊高度 +（高度差）x 2
而胶囊信息可以通过 wx.getMenuButtonBoundingClientRect() 获取，现在就只用解决高度差了
wx.getMenuButtonBoundingClientRect() 中也返回了胶囊顶部距屏幕顶部距离的信息（top）
所以知 高度差 = 胶囊顶部距屏幕顶部距离 - 状态栏高度

输出wx.getMenuButtonBoundingClientRect和wx.getSystemInfo(）

先看一些小程序顶部导航栏适配的情况

app.js

//app.js
App({
   
  globalData: {
   },
  onLaunch: function() {
   
    //获取系统信息
    wx.getSystemInfo({
   
      success: res => {
   
        this.system = res
      }
    })
    //获取胶囊信息
    this.menu = wx.getMenuButtonBoundingClientRect()
    //打印数据
    console.log('系统信息'