微信小程序顶部标题栏与胶囊对齐

介绍

        最近在做微信小程序时，顶部标题栏总是与胶囊对不齐。往往是在这款手机上对齐了，在另外一款手机差很多。我在查阅资料后，提出了一种方法解决这个问题，即：在页面onLoad或组件created时，利用微信小程序提供的API，获取系统状态栏高度和胶囊信息，进而动态调整顶部标题栏样式。在苹果、小米、荣耀手机做验证，能做到精准对齐。

理论

        胶囊样式应该是垂直居中，有1px的border，border-radius为18px 。

        若要使顶部标题栏与胶囊对齐，则其高度必须是导航栏高度，标题栏内容也要垂直居中，顶部标题栏的外边距或内边距必须是状态栏高度。

        如果顶部标题栏内是一个输入框，为美观，输入框可以采用与胶囊相同的高、border。（注意这里不能使用rpx，因为胶囊border是写死的1px，不会变化）

        示意如下：

计算方法

        状态栏高度：wx.getSystemInfoSync()，使用statusBarHeight。

        胶囊高度：wx.getMenuButtonBoundingClientRect()，使用返回的height。

        导航栏高度：(胶囊top-状态栏高度)*2 + 胶囊高度。

        注意：导航栏高度可能要考虑胶囊border（1像素），我这里没有仔细验证。

示意代码       

	//获取系统信息， 状态栏高度为 sysInfo['statusBarHeight'];
	let sysInfo = wx.getSystemInfoSync();

    // 胶囊信息
	let menu = wx.getMenuButtonBoundingClientRect();

    // 导航栏高度
	let navBarHeight = (menu.top - sysInfo.statusBarHeight) * 2 + menu.height;

一些错误的处理方式

        导航栏高度错以为是屏幕高度-窗口高度-状态栏高度，经过验证是错误的。

        标题栏border采用了相对像素值，如rpx\upx等。这是错误的，应用px。

参考资料        微信小程序自定义导航栏 胶囊菜单按钮高度适配 原理简单 赛过一些大厂的完美适配 妈妈再也不用担心我强迫症啦-物联网技术文章-傲云电气网傲云电气网最新文章：微信小程序自定义导航栏 胶囊菜单按钮高度适配 原理简单 赛过一些大厂的完美适配 妈妈再也不用担心我强迫症啦，在自定义小程序导航栏时，右上角的胶囊（MenuButton）在不同机型测试，会发现很难适配。不同的手机，胶囊高度也不一样，完全需要动态的计算高度。先看一些小程序顶部导航栏适配的情况图一 某团 图二 某乎 图三 某东 图四 某拉上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。为解决这个问题就要搞清楚原理这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）而状态栏高度可...https://www.weixiuzhan.cn/news/show-28971.html小程序全屏页面及自定义顶部标题栏（附getMenuButtonBoundingClientRect实现）_laishaojiang的博客-CSDN博客前段时间UI同学拿着知乎热榜小程序来问我，说现在小程序怎么这么牛皮了，居然可以把搜索栏放在顶部标题栏上面去了，然后质问我怎么不告诉她这个功能，因为她说要是早发现可以这样，她的设计就可以有很多方便的地方了。 我有种不好的预感，接下来刚上线不久的项目可以要大改- -！这是知乎热榜小程序，其实这并不是把搜索栏放在了顶部标题栏里面，而是把小程序把设置为全屏模式，只保留右上角的胶囊...https://blog.csdn.net/laishaojiang/article/details/103742078