自定义顶部标题和左上角按钮方法解析及实践

前言

之前有兄台发过设置custom的方法 但是没有具体的实现方法 以至于很多不了解小程序的开发者不能循序渐进的理解制作自定义标题的方法
在这里详细总结了计算各参数的方法 我也写了一个自定义标题组件 只需要引用 直接在页面中调用即可 但因为掺杂了业务代码 需要整理过后会放出来

具体方法

首先在app.json中 将window.navigateionStyle 设置为custom

使用 wx.getSystemInfoSync 获取系统的属性 其中有顶部状态栏的高度
使用 wx.getMenuButtonBoundingClientRect 获取右上角胶囊菜单的相关属性 包括胶囊菜单的高度、相距上下左右屏幕的绝对位置

如上图 我们需要获取四个参数 来确定整个标题栏的各项参数和左侧自定义胶囊的位置
获取顶部状态栏高度sys.statusBarHeight

具体代码

var sys= wx.getSystemInfoSync() 
var menu = wx.getMenuButtonBoundingClientRect() 

var statusHeight = menu.statusBarHeight
var titleHeight = menu.height
var titleRowWidth = sys.right - menu.right
var titleColumnHeight = menu.top - menu.statusBarHeight

注意

小程序原生组件会遮挡自定义头部组件 如 canvas组件 input textarea的提示信息placeholder
该问题可以使用cover-view将头部定义为原生组件 设置层级解决

20191125后续更新

wx.getMenuButtonBoundingClientRect()返回undefined的情况

wx.getMenuButtonBoundingClientRect()在安卓和IOS端均会出现获取不到值的情况（返回undefined）
官方给出的答案是已经修复了该问题 但实际测试还是会出现类似问题
该问题与 平台 和 微信基础库 （随微信版本更新）无关
导致我们无法获取胶囊按钮的属性 进而无法计算header的高度

该问题极难复现 我在自己的真机上遇到过2次 在我的应用中出现概率不到1%

应对方法1:
官方建议延迟100MS 或 在返回undefined的情况下 重新获取一次

应对方法2: 判断平台 给与预估的默认值 IOS端和不同安卓端
IOS各机型的高度为44px 安卓端我测试最多的情况是48px
但安卓端实际情况需要具体测试 做进一步兼容

代码如下

这里wx.getMenuButtonBoundingClientRect()方法在低版本微信中是不能用的
而且低版本的微信中不能使用wx.canIUse方法判断该方法是否存在
因此用捕获错误的方式兼容
在menu的属性返回undefined时 用我们预估的值去兼容

另外github.com有一个通过手机型号 返回手机各项参数的库 其中一项就是头部状态栏的高度 如果你想更准确的适配更多机型 可以使用这个库

无论哪种方法都不是最优的解决方案 大家酌情按照场景进行适配