uniapp自定义导航栏与微信胶囊按钮对齐

要实现自定义导航栏与微信胶囊按钮对齐，可以按照以下步骤进行：

1. 首先在 `App.vue` 中设置导航栏的高度为微信胶囊按钮的高度，即44px。可以使用 `uni.getSystemInfoSync()` 获取系统信息，再根据 `statusBarHeight` 和 `menuButtonBoundingClientRect.height` 计算出导航栏的高度。

<template>
  <view class="navigation-bar" :style="{ height: navigationBarHeight + 'px' }">
    <!-- 自定义导航栏内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      navigationBarHeight: 0
    }
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync()
    const { statusBarHeight, menuButtonBoundingClientRect } = systemInfo
    this.navigationBarHeight = statusBarHeight + menuButtonBoundingClientRect.height
  }
}
</script>

<style>
.navigation-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
}
</style>

2. 接下来，在页面中使用 `uni.getMenuButtonBoundingClientRect()` 获取微信胶囊按钮的位置信息，然后根据位置信息计算出导航栏左侧和右侧的边距。

<template>
  <view class="navigation-bar" :style="{ height: navigationBarHeight + 'px', paddingLeft: paddingLeft + 'px', paddingRight: paddingRight + 'px' }">
    <!-- 自定义导航栏内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      navigationBarHeight: 0,
      paddingLeft: 0,
      paddingRight: 0
    }
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync()
    const { statusBarHeight, menuButtonBoundingClientRect } = systemInfo
    this.navigationBarHeight = statusBarHeight + menuButtonBoundingClientRect.height
    const { left, right } = uni.getMenuButtonBoundingClientRect()
    this.paddingLeft = left
    this.paddingRight = systemInfo.windowWidth - right
  }
}
</script>

<style>
.navigation-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
}
</style>

通过以上步骤，就可以实现自定义导航栏与微信胶囊按钮对齐了。需要注意的是，如果页面中使用了 `uni.setNavigationBarTitle()` 等原生导航栏相关方法，需要自行计算出对应的边距。