背景
在微信小程序的开发中，自定义顶部导航栏是非常常见的需求了，简单记录下自定义导航栏的开发过程；
就拿最简单的一种，只是替换掉默认的左上角的小图标，在微信小程序中，左上角的小图标跟我们页面的跳转方式有关；
比如 navigateTo：显示的就是个返回的小箭头；像reLaunch显示的就是小房子的图标，那如果UI给我们提供的是下图，一个叉号，关闭的样式，如果我们说服不了UI，就只能自己来动手了；
实现过程
首先我们对这个导航栏的布局浅浅分析一波；
-
用红色框圈出来的地方，是我们手机的状态栏的区域，因为每个手机的状态栏的高度都不一致，所以我们可以通过微信给我们提供的API来获取：
Taro.getSystemInfoSync() ---> statusBarHeight(状态栏的高度，单位px)
-
用蓝色框圈出来的地方，就是我们根据UI来操作的区域，但是这里是非常关键的地方；首先就是红色箭头指的地方，我们需要知道胶囊按钮和状态栏之间的缝隙，这块区域的高度，每个手机也不一样；
- 我们通过第一步，可以知道状态栏的高度statusBarHeight；
- 通过API Taro.getMenuButtonBoundingClientRect()可以知道胶囊按钮的布局信息，主要用到胶囊按钮的高度height，以及top上边界坐标；
-
现在自定义导航栏的高度就已经出来了： 导航栏的高度 = 状态栏的高度 + 胶囊按钮的高度 + （胶囊按钮与状态栏的缝隙）* 2；
直接贴代码：
const { height, top } = Taro.getMenuButtonBoundingClientRect()
const { statusBarHeight } = Taro.getSystemInfoSync();
const navbarH = (top - statusBarHeight) * 2 + height + statusBarHeight
中间的内容区域，就看你们的UI怎么设计了！
这种只是简单的，等有时间封装一个通用性更强的组件！
