最早开始做小程序开发的时候 印象里顶部的导航栏还不能自定义 每次设计那边无论多好看的UI设计 都只能忍痛牺牲顶部导航栏那一块 当时好像每个小程序的'头头'都一个样 像带了个帽子 也阔能是为了统一风格吧

不过那时有那时的好 毕竟每次进小程序看导航栏标题都知道这是哪个公司的什么产品 这几年很多组件都放开了自定义 有的时候程序进多了 看不到顶部导航栏的品牌文字 都会分不清楚进了什么公司的产品 还得退回看看图标或者在界面和产品里找找公司线索

顶部导航栏可以自定义以后 我们的设计小姐姐也彻底放飞了自我 各种满屏的大海报首图设计 玩得不亦乐乎 许多甲方也被带着走 比较关注自己产品的甲方都反馈希望能改这种顶部没有导航栏 可以自由发挥品牌宣传的UI

然后呢 重点来了 前几年的某一天 设计小姐姐提交过来了新的甲方设计图 是个电商项目 写到商品详情内页的时候 也是顶部导航栏自定义的设计

[顺手还是贴一下导航栏自定义的代码 项目里的页面文件夹里 有个.json文件 在里面加段代码导航栏就不见了]

加上这一段代码 -> {"navigationStyle":"custom"}

接着上面说 把详情页导航栏自定义之后 发现了个问题 没有了返回按钮 之前没有自定义的时候 官方会有个返回的小箭头

自定义之后 就只会保留右上角的悬浮胶囊了

当时想想也没什么困难的 就加个基础按钮可以让客户回退到上个页面就OK 然后 噩梦就开始了 做出来的按钮各种一眼丑 开发的同事当时想 在不麻烦设计的前提下 至少看着和右边胶囊大小和位置 都要稍微和谐一些 结果做出来 因为没法确定右边胶囊的位置和大小 就导致自己写的返回按钮 不是大小问题 就是位置问题 加上各种机型的适配 当时这个还劳神费力了很久

后来查了当时线上的许多资料[那个时候GPT都还没出来] 在官方文档里发现了个信息 wx.getMenuButtonBoundingClientRect()

大概意思就是你在页面渲染好的时候调这个方法 可以获取到不同机型里 右上角那个胶囊按钮的位置信息

然后当时在不引入其他第三方UI组件库的前提下 我们研究了下 搞了个邪修

在每次页面onShow()的方法里 先获取到右边胶囊按钮的尺寸[试了好几个机型 胶囊按钮的高度差不多是固定在32px这样] 然后返回按钮给了个安全长宽 就32px[如果你需要做的不是正圆形返回按钮 长度就需要自己控制下 高度固定设置32px目前看各机型还算OK] 获取到尺寸之后 动态设置给返回按钮 保证返回按钮的高度数值和位置 相对右边的胶囊按钮齐平

这样设置之后 就得到了一个比较简单 只满足返回到上一页面功能的按钮 样式类似这样

视觉上看着大小 位置 和右边的胶囊按钮就比较统一一些 至少不丑 然后样式也贴一下 样式的话 就可以自由发挥 我们加了点阴影 然后view里面放了个返回的箭头图标 给了点透明度

记得设置一下最高层级 否则页面滑动的时候可能会出现组件遮盖到按钮的情况

现在好像已经有第三方的组件库可以提供功能比较全 样式也漂亮的返回按钮 偷懒一直没引入试过 晚点试了可以用再单独发一篇文章记录下

保持好奇 不断进步 下期见~