清云小程序教程二十：组件概述

原文链接：http://www.0575yun.com/articledetail/id/71.html

清云小程序从本节课开始就要着手实现旧岛这个产品的第一个页面，就是“流行”这个页面。在之前的小程序教程中，当我要实现一个页面的时候，我必然是要给大家去剖析整个页面的结构的，但是我们旧岛这个产品不太一样，因为我之前就说过，我们这个产品是需要用组件的形式来完成整个项目的构建的。所以说，我们有必要首先来学习小程序中的自定义组件。

我们当前的小程序页面有很多的元素组成，比如说左边有日期的元素，右边有一个心形元素和分享按钮的元素；以及我们页面的主题，它是由一张图片和一段文字组成的；还有下方有一个导航的按钮。那么，这个页面元素比较多，咱们先不着急。我们先来挑选一个比较有代表性的元素来实现一下，给大家一个热身的时间。

我这里就选择这个心形元素。在动手写代码之前，我先说一下，当前大家看到的是我已经完成的旧岛小程序小样，我们真正去编写我们的代码还是要去我们之前的文件夹下编写。那么，在这里呢，只是给大家一个案例的演示，方便大家观察以及理解对项目的需求，所以项目还是要在我们之前的文件下面来编写。

我们首先把之前教程里面的classic.wxml代码来清除掉，然后把classic.wxss里面的代码也给清除掉，然后顶部的导航栏在我们旧岛小样里面是白色的，这里也把它给设置成白色的；至于导航栏上面的名字，大家也可以根据喜好改成自己想要的名字，我这里还是叫“清云小程序”。

现在我们来考虑一下这个心形元素应该如何来写？先要考虑一下这个心形元素的代码应该写在哪里？那么，有一定小程序开发经验的同学就会想到，这个心形元素出现在我的“流行”这个首页页面上，那就在这个classic页面里面直接来编写这个心形元素的代码，不就可以了吗？这有什么好想的呢？这个问题我们当然有必要去考虑了，就目前这种情况，你直接把心形元素的代码写在classic这个页面，是没有问题的。但是，如果这个元素在别的地方也用的到呢？我们看完整个小程序项目的设计图之后，会发现其实我们可以看到这个心形元素不只是出现在“流行”这个首页面，在其他的页面都是有出现。比如说，我们的“喜欢”页面，再比如我们可以看一下“书籍”页面，下面也有这个心形元素。

 

这些地方都用到了心形元素，所以，我们打心形元素直接写在classic下面就不合适了，因为你写在classic这个页面下，那其他页面需要用的时候就没有办法复用这个元素了。那不能复用怎么办呢？很多同学采取了一种简单粗暴的方式：先把这个心形元素代码写在classic页面下，然后其他页面要用就把这个代码考下来复制到其他页面使用。这个方式是非常不好的，你可以想一想，就算你可以复制，那复制起来得有多麻烦。如果说只是一小段JavaScript代码是很多页面需要用到的，我确实是可以直接复制了再用，也很简单。虽然说它违反我们小程序中写代码的一些原则，但是还是可行的。但是我们这个心形的组件会只是一小段JavaScript代码吗？不可能的！为什么不可能？大家可以想一想，这个小的心形组件，它除了有这个JS的逻辑之外，还有什么？还包括了wxml骨架，对吧；那么除了wxml骨架之外，还包括了wxss样式。那大家可以想一想，现在如果要复制这个心形的元素，你既要复制它的JS，还要复制它的wxml，同时还要复制它的wxss，这实在是太麻烦了！完全是不可取的。

那么，在小程序里有没有一种很好的办法可以把这个问题解决呢？我们可以先想一想，大家都比较熟悉JS，那么大家想一想JS的函数，函数是不是就是一个可以复用的最小单元。我在一个地方比如“utils”这个页面下写的代码，那其实我在其他的页面要使用这段JS的话，就是可以直接引入这个JS代码来使用的。对于JS来说，我们完全不需要再把这段JS在每个页面重复一遍。我们可以对比一下，JS这种复用的思想我们是很熟悉的，那么换到这个心形元素呢？我们刚刚说了，这2个的区别就在于：JS只是一小段函数，这个我们都知道怎么去调用一个函数；而我们的心形元组件的复杂地方就在于，它是由JS、wxml骨架和wxss样式3个部分所组成的。那么我们的小程序就提供了一种机制，可以解决wxml、wxss以及JS代码的共同的复用。那么小程序提供的这种机制叫做“自定义组件”。

在这节课最后，我们简单的总结一下，这一点也非常重要。其实，“自定义组件”思想上面并不神秘，它也不特殊。它的来源或者说它的思想的起源，就类似于我们熟悉的JavaScript函数的调用。只不过，我刚才也强调过了，JavaScript函数只能实现JS代码的复用，但是对于我们这种带有外观的元素是不能实现的。对于我们这种带有外观的元素来说，它不仅仅要复用JS代码，它还要复用样式以及它自身的骨架。所以说思想上面都是类似的，都是一种复用；同时又是有不同的。

“组件”这个概念并不是小程序所独有的，大家所熟悉的Vue和AngularJS都有这种组件，甚至是在我们服务端编程里也有很多组件的概念，所以说，思想都是通用的，只不过每一个框架或者说每一个技术，它们实现组件的方式不一样，仅此而已。

接下来，清云小程序教程会为大家讲解如何完成在小程序中的组件的编写。