微信小程序自定义导航栏适配指南

前言

使用自定义导航，产品可以对导航栏进行深度定制，对与场景比较复杂的小程序来说，可以明显的提高用户体验。但是相应的，微信小程序的自定义导航栏并不完美，入坑需谨慎。。。

开启自定义导航栏

全局配置 app.json 设置 window.navigationStyle: 'custom'

自定义导航栏高度计算

1. 通过 wx.getSystemInfo 获取设备信息，screenHeight - windowHeight即导航栏高度。
2. 开启自定义导航栏之后，screenHeight - windowHeight并不等于导航栏高度，所以无法在开启自定义导航栏的同时，动态计算导航栏高度。解决方法是，再未开启自定义时，收集设备信息计算导航栏高度，预定义在代码中。
3. 参考下方［附录：小程序部分真机设备信息采集］，计划为三种机型做适配: iPhone: 64px、iPhone X: 88px、Android: 88px。需要注意的是，部分安卓设备可能没有状态栏高度statusBarHeight，要做好兼容。

胶囊宽度

目前无法直接通过微信接口获取到胶囊的UI参数，但是根据微信官方设计指导中关于胶囊按钮的描述，得知胶囊宽度87pt=116px

开启自定义导航栏后 web-view 组件存在的问题

1. 由于小程序原生web-view组件会默认覆盖全屏，会导致无法在小程序内为 webview 页面适配自定义导航栏。
2. 微信6.7.2之后的版本，使用web-view组件的页面，自定义导航栏失效，相当于navigationStyle: 'default'。
3. 微信6.7.2之后的版本，开启自定义导航之后，使用web-view组件的页面，在部分安卓机型底部会被截断，截断高度为导航栏高度。
4. 目前微信JSSDK没有能获取当前设备信息的接口，所以只能在小程序获取相关设备信息后，通过 url query 的方式通知H5页面，再在H5页面进行自定义导航栏的适配。

Tips

1. 如果自定义导航栏使用fixed布局固定在顶部，页面上通过fixed布局固定在顶部的节点都会受影响。
2. 可以利用权重来比较版本的大小，例如，版本6.7.2的权重值为 6 * 10^4 + 7 * 10^2 + 2 = 60702。
3. 在运行时访问一个内部变量__wxConfig，可以访问到全局配置。可以为设置自定义导航栏提供参考。

---

参考链接

• 高适应性的自定义导航栏开发思路
• 小程序web-view组件、音频播放功能调整说明
• 安卓web-view ，页面下移，还没解决？

附录：小程序部分真机设备信息采集

设备	statusBarHeight	screenHeight	windowHeight	screenHeight - windowHeight
iPhone 5s	20	568	504	64
iPhone 6	20	667	603	64
iPhone 6 Plus	20	736	672	64
iPhone X	44	812	724	88
OPPO R11s	18	672	606	66
HONOR STF-AL00	24	640	568	72
vivo X9i	-	640	568	72
MIX 2S	24	785	713	72