自定义组件

大部分人写小程序肯定要涉及修改navigationBar的title，微信小程序开发内置了这个组件，可以直接在app.json中配置。但是，自带的navigationBar的样子是固定的，你肯定见过长成下面这样的navigationBar：

相比平时常见的navigationBar，它左上角多了一个返回主页的按钮，这对于有多级页面的小程序来说是非常必要的，不然访问的层级太深用户不知道怎么返回主页。然而，小程序开发自带并没有这个样子的，好在可以自定义，接下来我们就来自定义一个。

navigationBar

首先，我们构建一下页面的结构：

这就是一个很普通的页面结构，值得注意的是，它的高度是根据获取的设备的高度来确定的。
接下来又到了切图仔上线的时候了(误)：

京东优选小程序这里的两个按钮都是返回首页，我在开发的时候觉得不对劲，所以我改过来了。
在这里还去取了一下全局定义的变量，也就是获取的设备顶部窗口的高度(不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度)，在app.js中要定义一下：

记得自定组件的时候一定要在json中写成自定义组件

接下来就是调用该组件了

别忘了在要引用页面的json中引入该组件

Toast

Toast同样也是小程序开发已经做好给你用的了，虽然它可以支持替换里面的图标，但是你会发现很鸡肋的一点是，如果你想显示两行文字你就没办法做到了。我在开发过程中也搜索过相关的实现方法，找到了大部分是说在要换行的文字后背加上rn就能实现了，但是我自己亲测无效，所以实在忍不住也自己做了一个。

这里给组件定义了两个方法，是用来显示和隐藏Toast的。这里要注意一下，调用给自定义组件定义方法要先在页面上获取该组件

然后在需要触发Toast的事件中写上这两句：

功能实现

导航

所谓导航，也是很常见了，就是根据选择栏目的不同，显示不同的类别内容。例如：

功能要求：

1. 点击导航栏目，显示对应的栏目数据。
2. 如果栏目中没有东西，要显示对应的提示信息。

实现它的功能并不难，直接sroll-view往上怼。个人觉得，京东优选在这里有一点不足的地方就是，如果点击了偏右侧的导航栏目的话，导航条不会跟着右移显示后面的项目，可能它的开发者有不一样的想法吧。

通过js可以实现动态的填放数据，这里设置的current就是当前选择的栏目，可以根据这个改变样式等。

如果是要实现点击之后自动向点击的方法滑出显示更多的内容，可以通过动态改变navScrollLeft的值去实现，这里我就不细说了，不过我在实现的时候还是花了一番功夫，实现的不是很好所以就没有放在代码里，如果你以后想做出这种效果的导航栏建议去网上搜一搜demo看懂了之后借过来用一用，毕竟传说程序猿最高的境界是复制粘贴，狗头(误)

上拉菜单和筛选框

这两个比较相似，只是拉出的位置不一样，这里我就举一个筛选框的例子，我们先看看它长啥样：

我们先看看结构，这里我省略了中间的一些内容：

购物车逻辑

要实现这样的效果并不困难，需要自己思路清晰，不能被绕进去了。实现加入购物车并不难，细节是购物车图标右上角的数字要根据加入购物车的数量进行动态的改变，还要注意如果是同一件商品就不需要添加新的，只需要修改原来的数量。

在这里我使用的是小程序的wx.setStorage()实现的：

这里你可以根据自己的开发来决定方式，如果你使用的是云开发的话，可以选择把数据存进云数据库里。

回到顶部

这也是一个老生常谈的功能，当你滑到页面比较后的位置的时候需要快速回顶。这里要记住，用swiper实现。首先是在页面上撸一个回到顶部的图标出来：

{{scrollTop}}用来表示滑动的时候距离顶部的位置。它的样式也很简单，使用固定定位把它定在屏幕上，这里一定要注意页面的层级，不然它可能会被其他组件给遮挡掉！

你肯定也注意到了，当滑到了一定距离的时候它才显示出来，这就要靠swiper绑定的滚动事件了：

功能大致先说这么一点，可能在大牛看起来都是些很容易不起眼的功能，但是对应我这个初学者来说还是有点困难的，希望如果有大牛看了我的一些功能的实现之后我不会被骂死。

值得注意的一点

做过小程序开发或者是vue等开发的人一定听过事件冒泡这个名词：子元素的事件触发了父元素的事件，例如点击事件。我就是那个幸运鹅，我在开发的时候就遇到了这个情况。
在购物车中点击商品可以跳转商品详情，但是我一开始把跳转事件绑定在了每个商品卡片上，这样就导致了点击修改商品数量的时候修改了数字但是也会直接跳转商品详情，比如下面这样...

这就很不友好了，用户体验很差，关于事件冒泡，微信小程序的解决方法是把bindtap替换成catchtap，这样可以阻止子元素事件向上冒泡。

然而巧的是，我就是那个最幸运的鹅，步进器我用的是有赞Vant Weapp组件库里的，我搜索了很多资料都没有找到有效的解决方案，差点就放弃使用组件库了，好在最后发现京东优选小程序购物车绑定的跳转事件是在商品的图片和标题上。

这一点还是比较重要的，所以大家在开发的时候一定要考虑事件的冒泡，这也是我把它放在最后来写的原因。

写在后面

最后，我想说的是小程序开发真的不容易，开发一个好的小程序更是需要考虑性能和用户体验的方方面面。当我觉得自己第一个小程序差不多要完工的时候真的要跳起来唱joyful了(误)。作为一个程序猿真的不容易，难怪是个容易掉发的群体。但好在愿意分享技术的人很多，在这次开发的过程中我也查阅了很多的资料、社区和文档。小程序的学习我也不会停下脚步，这个项目还有非常多做的不好的地方，我发出来也是希望大家和我进行交流分享，后期我也会继续完善优化这个小程序项目。希望我的作品可以对那些初学小程序的人有所帮助。