小程序自定义导航栏

貌似微信目前只提供了获取状态栏高度的 API wx.getSystemInfoSync().statusBarHeight，要自定义导航栏组件的话还需要知道导航栏的高度，否则会导致内容与菜单按钮不对齐。

经过一番折腾，发现了一个比较好的办法就是通过 wx.getMenuButtonBoundingClientRect() API 获取菜单按钮的位置和大小信息，然后通过一点计算得到导航栏的高度，代码如下：

export function getNavbarHeight() {
    const { statusBarHeight } = wx.getSystemInfoSync()
    const { top, height } = wx.getMenuButtonBoundingClientRect()

    return (top - statusBarHeight) * 2 + height
}

如图所示，导航栏组件的高度应该为菜单按钮左上角纵坐标值 (top) 减去状态栏高度值的两倍加上菜单按钮的高度，再设置 margin-top 为状态栏的高度即可。