定制左上角返回按钮一般有两个目的：

1. 引导按钮：页面作为小程序启动后第一个页面时，左上角没有操作按钮，用户只能点击在右边胶囊更多回到首页（入口太深）。定制顶部可以引导用户很方便去其他页面。
2. 拦截弹框：比如当用户点击返回时，弹出弹框，挽留用户。

效果：

1. 点击查看没定制顶部录屏，发现没定制时，用户只能点击右边回到首页，考虑入口太深，故在左边做了个很奇怪的返回icon。点击可自己体验效果

2. 点击查看有定制顶部录屏，虽然也是启动后第一个页面，但左上角有按钮返回首页，并当用户抽到红包后，返回会弹框挽留用户。点击可自己体验效果

开发顶部组件知识：
主要知识是组件开发、 wx.getMenuButtonBoundingClientRect()的使用。

代码下载说明：
由于在文章里贴代码导致文章比较乱，所以示例放在代码块里，大家可在开发工具输入链接直接获取，或直接在链接下载文件。

顶部组件代码块：
https://developers.weixin.qq.com/s/A3Ki7Bmi7V9Z。
或点击下载示例代码

备注：
代码里有对应注释，我也不确定大家能不能看懂？虽然是很小的组件，代码量也不多，但如果有超过5位同学留言有必要观看视频来熟悉自定义顶部组件的开发过程，我也可录个视频。

推荐阅读

1. 亲测有效隐藏scroll-view滚动条方法
2. 实现自定义等间隔的tab