评论

【类知乎小房子】自定义返回键 自定义标题 自定义主页按钮

【类知乎小房子】自定义返回键 自定义标题 自定义主页按钮

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

前言

之前有兄台发过设置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

注意

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

20191125后续更新

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

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

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

代码如下

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

最后一次编辑于  2019-11-25  
点赞 4
收藏
评论

4 个评论

  • L
    L
    2019-11-25

    感谢分享

    2019-11-25
    赞同
    回复
  • 騁爲
    騁爲
    2019-08-17

    目前也是采用 statusBarHeight + 胶囊按钮位置 来自定义导航栏,现在有个难点是如何能够获取到在 app.json 中定义的页面标题并设置到自定义的导航栏上,如果要手动一个一个修改,工作量有点大了

    2019-08-17
    赞同
    回复 2
    • 张有釜
      张有釜
      2019-08-17
      如果页面名称是固定不变的 可以写一个全局的映射表 如果是动态的 可以写一个全局的方法 在需要的情况下调用 还要看具体的情况
      2019-08-17
      回复
    • 騁爲
      騁爲
      2019-08-19回复张有釜
      部分页面是固定的,部分页面需要动态设置,现在的做法是提供一个全局的方法,只能一个一个页面去设置标题了(本来是想着直接从page对象找出这个标题,但是把page打印出来,找遍了属性都找不到哪里会携带这个标题)
      2019-08-19
      回复
  • Jinker🔅
    Jinker🔅
    2019-08-05

    感谢分享

    2019-08-05
    赞同
    回复
  • 惠嘉伟-Javey
    惠嘉伟-Javey
    2019-07-31

    感谢分享

    2019-07-31
    赞同
    回复
登录 后发表内容