小程序自定义导航栏，胶囊对齐

最近在做一个小程序项目，要求自定义导航栏，自定义导航栏好说，但是想要胶囊对其就没那么简单了
官方也没有给出具体的做法，然后上百度，最终将实现代码给有类似困扰各位同猿分享

实现效果图

iPhone 5

iPhone 6/7/8

iPhone X

iPad

想要胶囊对齐，就要搞清楚，它是由什么组成的
图片，是在网上找的，自己不会作图，只为说明问题，侵联删，如有打扰，请谅解

它是由状态栏和导航栏两部分组成，所以想要实现对齐，就得拿到状态栏和导航栏的高度

获取状态栏高度

wx.getSystemInfo({
   
	success(res) {
   
		console.log("状态栏：" + res.statusBarHeight)
	}