小程序自定义导航栏（完美适配所有手机）解决上下不居中 左右不对齐 高度不协调问题...

背景

在做小程序时，关于默认导航栏，我们遇到了以下的问题：

• Android、IOS手机对于页面title的展示不一致，安卓title的显示不居中
• 页面的title只支持纯文本级别的样式控制，不能够做更丰富的title效果
• 左上角的事件无法监听、定制
• 路由导航单一，只能够返回上一页，深层级页面的返回不够友好

探索

小程序自定义导航栏已开放许久>>了解一下，相信不少小伙伴已使用过这个功能，同时不少小伙伴也会发现一些坑：

• 机型多如牛毛：自定义导航栏高度在不同机型始终无法达到视觉上的统一
• 导航栏中内容怎么都不垂直居中对齐,更别说适配所有手机
• 调皮的胶囊按钮：导航栏元素（文字，图标等）怎么也对不齐那该死的胶囊按钮
• 各种尺寸的全面屏，奇怪的刘海屏，简直要抓狂

一探究竟

为了搞明白原理，我先去翻了官方文档，>>飞机，点过去是不是很惊喜，很意外，通篇大文尽然只有最下方的一张图片与这个问题有关，并且啥也看不清，汗汗汗...

我特意找了一张图片来 分析上图，我得到如下信息：

• Android跟iOS有差异，表现在顶部到胶囊按钮之间的距离差了6pt
• 胶囊按钮高度为32pt， iOS和Android一致

动手分析

我们写一个状态栏，通过wx.getSystemInfoSync().statusBarHeight设置高度

Android： iOS:

>