胶囊按钮是小程序固定在屏幕右上角的菜单按钮，uni.getMenuButtonBoundingClientRect()方法是uniapp用于返回该胶囊菜单按钮的宽度、高度、上边界坐标、右边界坐标、下边界坐标和左边界坐标共六个布局信息。在开发小程序页面的自定义导航栏时，经常需要把自定义内容的高度和胶囊按钮的高度保持一致，便于和胶囊按钮垂直对齐，就需要通过该方法获取返回的布局信息来调整自定义导航的布局。

使用示例：

const rect = uni.getMenuButtonBoundingClientRect();
console.log(rect.width); // 胶囊按钮的宽度

返回的对象属性：

{
      width: number,     // 宽度，单位：px
      height: number,    // 高度，单位：px  
      top: number,       // 上边界坐标，单位：px
      right: number,     // 右边界坐标，单位：px
      bottom: number,    // 下边界坐标，单位：px
      left: number       // 左边界坐标，单位：px
}

UniApp使用实例：

export default {        
    data() {
        return {
            menuWidth:0,
            menuHeight:0,
            menuTop:0,
            menuRight:0,
            menuBottom:0,
            menuLeft:0
        };
    },
    methods: {
        setNavigationCss: function(){
            const menuButtonInfo = uni.getMenuButtonBoundingClientRect(); //获取胶囊按钮的布局信息
            this.menuWidth = menuButtonInfo.width + 'px';
            this.menuHeight = menuButtonInfo.height + 'px';
            this.menuTop = menuButtonInfo.top + 'px';
            this.menuRight = menuButtonInfo.right + 'px';
            this.menuBottom = menuButtonInfo.bottom + 'px';
            this.menuLeft = menuButtonInfo.left + 'px';
        }
    },
    mounted() {
        this.setNavigationCss();
    }
}

提示：需要在页面渲染完成后调用，建议在 onReady 或 mounted 生命周期中调用

注意：该方法兼容性：微信小程序、支付宝小程序、抖音小程序等，H5 端返回空对象，App 端可能不支持或返回模拟数据，但不同端可能实现有差异，建议在使用时进行测试。