微信小程序自定义导航栏定位及胶囊按钮图解

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

实测中 不同的手机，胶囊高度不一样、状态栏高度不一样。与模拟器显示的情况是不一样的。
由于小程序在不同的手机上顶部布局会发生变化，不能正确避开胶囊位置，所以通过官方给出的胶囊信息，可以计算出胶囊位置，完全需要根据手机，动态的计算高度。

演示：

图解胶囊按钮位置：

这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）
而状态栏高度可以通过 wx.getSystemInfo(）获取，现在就只用解决导航栏高度了

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

重要事情说三遍
计算出来的值一定要用px，不要用rpx！
计算出来的值一定要用px，不要用rpx！！
计算出来的值一定要用px，不要用rpx！！！

计算相关值

因为在不同的手机型号头部那条栏目高度可能不一致，所以为了我们适配更多型号，我们需要计算3个值：

如下图：

1. 整个导航栏的高度；

2. 胶囊按钮与顶部的距离；

3. 胶囊按钮与右侧的距离。

小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息  和 wx.getSystemInfo() 获取设备信息。

通过这些信息我们可以计算出上面说的3个值：

1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2；

2. 胶囊按钮与顶部的距离 = top；

3.胶囊按钮与右侧的距离 = windowWidth - right。

这样我们可以定义一些全局变量

app.js代码：

App({
    onLaunch: function () {
      const systemInfo = wx.getSystemInfoSync(); //获取系统信息
      const menuInfo = wx.getMenuButtonBoundingClientRect(); // 获取胶囊按钮的信息
      this.globalData.menuHeight = menuInfo.height; // 获取胶囊按钮的高
      this.globalData.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏的高
      this.globalData.menuRight = menuInfo.right; // 获取胶囊按钮的距离屏幕最右边的距离（此处用于设置导航栏左侧距离屏幕的距离）
      this.globalData.navBarHeight = (menuInfo.top - systemInfo.statusBarHeight) * 2 + menuInfo.height; // 计算出导航栏的高度
      this.globalData.navBarBottom = this.globalData.navBarHeight + systemInfo.statusBarHeight;
      this.globalData.winHeight = systemInfo.windowHeight;
      this.autoUpdate();
    },
    globalData: {
      navBarHeight:0,// 导航栏高度
      navBarBottom: 0,//胶囊按钮底部位置
      menuHeight:0,//胶囊按钮 高度
      statusBarHeight:0,//状态栏高度
      menuRight:0,//胶囊按钮 距离屏幕右边的距离
      winHeight:0
    },
})