阅读 1867

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

前言

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

开启自定义导航栏

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

自定义导航栏高度计算

  1. 通过 wx.getSystemInfo 获取设备信息,screenHeight - windowHeight即导航栏高度。
  2. 开启自定义导航栏之后,screenHeight - windowHeight并不等于导航栏高度,所以无法在开启自定义导航栏的同时,动态计算导航栏高度。解决方法是,再未开启自定义时,收集设备信息计算导航栏高度,预定义在代码中。
  3. 参考下方[附录:小程序部分真机设备信息采集],计划为三种机型做适配: iPhone: 64pxiPhone X: 88pxAndroid: 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,可以访问到全局配置。可以为设置自定义导航栏提供参考。

参考链接

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

设备 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
关注下面的标签,发现更多相似文章
评论