前言
使用自定义导航,产品可以对导航栏进行深度定制,对与场景比较复杂的小程序来说,可以明显的提高用户体验。但是相应的,微信小程序的自定义导航栏并不完美,入坑需谨慎。。。
开启自定义导航栏
全局配置 app.json
设置 window.navigationStyle: 'custom'
自定义导航栏高度计算
- 通过
wx.getSystemInfo
获取设备信息,screenHeight - windowHeight
即导航栏高度。 - 开启自定义导航栏之后,
screenHeight - windowHeight
并不等于导航栏高度,所以无法在开启自定义导航栏的同时,动态计算导航栏高度。解决方法是,再未开启自定义时,收集设备信息计算导航栏高度,预定义在代码中。 - 参考下方[附录:小程序部分真机设备信息采集],计划为三种机型做适配:
iPhone: 64px
、iPhone X: 88px
、Android: 88px
。需要注意的是,部分安卓设备可能没有状态栏高度statusBarHeight
,要做好兼容。
胶囊宽度
目前无法直接通过微信接口获取到胶囊的UI参数,但是根据微信官方设计指导中关于胶囊按钮的描述,得知胶囊宽度87pt=116px
开启自定义导航栏后 web-view 组件存在的问题
- 由于小程序原生
web-view
组件会默认覆盖全屏,会导致无法在小程序内为 webview 页面适配自定义导航栏。 - 微信6.7.2之后的版本,使用
web-view
组件的页面,自定义导航栏失效,相当于navigationStyle: 'default'
。 - 微信6.7.2之后的版本,开启自定义导航之后,使用
web-view
组件的页面,在部分安卓机型底部会被截断,截断高度为导航栏高度。 - 目前微信JSSDK没有能获取当前设备信息的接口,所以只能在小程序获取相关设备信息后,通过 url query 的方式通知H5页面,再在H5页面进行自定义导航栏的适配。
Tips
- 如果自定义导航栏使用
fixed
布局固定在顶部,页面上通过fixed
布局固定在顶部的节点都会受影响。 - 可以利用权重来比较版本的大小,例如,版本6.7.2的权重值为
6 * 10^4 + 7 * 10^2 + 2 = 60702
。 - 在运行时访问一个内部变量
__wxConfig
,可以访问到全局配置。可以为设置自定义导航栏提供参考。
参考链接
附录:小程序部分真机设备信息采集
设备 | 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 |