教程二十:小程序组件概述

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

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

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

我们首先把之前教程里面的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都有这种组件,甚至是在我们服务端编程里也有很多组件的概念,所以说,思想都是通用的,只不过每一个框架或者说每一个技术,它们实现组件的方式不一样,仅此而已。

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



版权保护: 本文由 清云小程序 原创,转载请保留链接: http://www.0575yun.com/articledetail/id/71.html