微信小程序自定义顶部状态栏
因为工作需要，要在微信小程序中自定义顶部导航栏，通过这篇文章来记录一下自己所得~
第一步:
需要在json文件中配置"navigation" : "custom"，完成自定义导航栏，只保留胶囊按钮，效果如下图：
做完以上步骤，基本上就可以自定义导航栏了，但是，从页面上可以看出，页面的内容被挡住了，可以通过样式加上边距解决这一问题。
第二步：
给内容加上样式可以使内容显示出来
这时又有一个问题出现，我们的边距是固定的，但是不同型号的手机头部那条栏目高度可能不一致，所以为了适配更多手机型号，我们需要进一步优化。
第三步：
在上面图中我标出了导航栏的高度、胶囊按钮与顶部的距离、胶囊按钮与右侧的距离。小程序可以通过wx.getMenuButtonBoundingClientRect()l来获取胶按钮的信息，可以通过wx.getSystemInfo获取设备的信息。
通过获取到的信息可以计算出上面所列举到的三个值：
- 导航栏高度 =
statusBarHeight + height + (top-statusBarHeight)*2; - 胶囊按钮与顶部的距离 =
top; - 胶囊按钮与右侧的距离 =
windowWidth - right;
通过以上三步就可以完成导航栏的自定义，并且做到内容不会被遮盖。