这篇文章讲什么

怎么自定义微信小程序的顶部(导航栏)
因为网上有很多具体的实现方式,这篇文就是简单写下我们是怎么做的。会很短。

介绍

微信小程序的顶部只有2种选择,
要么用微信默认提供的,
要么就每个页面完全自己写。
没有第三种选择。

为什么要定制导航栏?

  1. 手机本来就小,页面那一块位置还被占住了。不爽。
  2. 有些业务场景需要定制顶部,比如用户扫码或者分享后进入小程序某个指定页面。如果用的是默认小程序导航,那么就只能被迫先跳到首页,然后再跳到具体页面。这样是为了用户能从右上角返回到小程序首页。存留用户。如果能定制顶部,就能直接在左上角加一个 "返回首页"

正文

如何定制?
写一个导航栏组件,然后在每个页面的顶部加上这个组件。

我在网上搜了一圈决定用 https://github.com/mulook/weapp-navigation-bar
这是别人写的组件
然后我在此基础上做了定制。
首页需要长得不一样。
其他页面和原来长得一样,能返回上一层就行。

我们小程序有42个页面,复制黏贴了42次,要改 wxml 和 js。
听起来有点蠢,但没有更好的选择。


2019-1-6 更新。注意事项

使用了自定义顶部导航栏后。
任何用了 bind:tap 然后获取 event.detail.y 的代码要修改。
因为现在 event.detail.y 会是错的。

举例:
我们有一个功能是给图片上面加纯文字标签。
用户直接在图片上点击,点击后会有一个弹窗出来,可以输入文字。

比如用户选了一张时尚穿搭图,然后可以点击帽子的位置,写帽子的名字。
点击上衣,写上衣的品牌。

实现方法:
图片 position:relative。
然后给图片 image 标签加一个 bind:tap 事件监听
在 event 里拿到 event.detail.x 和 event.detail.y
把标签推入数组(标签文字+x+y三项数据)然后显示
注意这里依赖了 event.detail.y 来获取用户到底点击了图片上的哪个位置。

伪代码示例:

实际发现的问题是,
最早我们使用微信原生导航栏时
一切都没有问题。点击图片左上角,拿到的坐标是 x:0 y:0
点击图片右上角是 x:(图片宽度) y:0

y 是正确的。

用了自定义顶部导航栏之后,(我们拿微信开发者工具的 iPhone X 举例)
此时点击左上角返回 x:0 y:88
y:88 是因为顶部导航栏的高度就是 88

y 此时是错误的。

所以 y 要减去 88 才是正确的值。
你以为只要写死 event.detail.y-88 就完事了?
顶部导航栏组件会根据机型决定高度,如果我在开发者工具换成 iPhone 7,
此时 y 坐标最少是 65。

所以正确的姿势是:
动态获取 image 的 top 距离。
setData 先存起来。
要用到 event.detail.y 时,减去这个 top 距离即可。

全文完

感谢阅读