清云小程序教程二十一：定义引用和使用组件

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

清云小程序教程本节课就来教你实现一个一个的组件。之前我们说过，旧岛这个小程序是要用组件来构建的，所以我们所要编写的组件数量是非常多的，所以我们先来为我们所有的小程序组件新建一个文件夹。

新建一个盛放所有组件的文件夹叫做“components”，新建在与“Pages”同级目录下，再在“components”文件夹下给我们第一个要编写的组件，也就是我们的心形组件新建一个目录，这个目录的名字可以叫做“like”，这个2级目录我们先新建好。

编写组建的第一步就相当于我们编写“Page”页面一样，我们先为小程序的组件新建几个文件，同样我们不需要一个一个来新建，在我们的微信小程序开发工具中可以一次性新建4个文件。之前我们新建的是“page”页面，这次我们来新建的是组件，选择这个“component”，这个时候有一个小的技巧，之前在新建页面的时候，我们是让页面的文件名和它所在的目录名保持一致。比如说这里目录名叫做“classic”，你在新建这个页面的时候文件名通常也叫做“classic”，但其实文件名和目录名是可以不一样的。所以说我们在命名新建的这个组件的时候，可以把它命名为与目录名“like”不一样的任何名字，但是这个名字命名也是要有一定的规则的，不能胡乱命名，还是要参考编写规范的。我们在新建这个小程序组件的文件的时候可以把它叫成“index”。这里我要说的是，这几个“index”它只是组件文件的名字，并不是真正的组件的名字，这个一定要区分开。等会儿我们会看到组件的名字命名是十分灵活的。那么，这个名字叫“index”有什么好处呢？我们到时候去使用这个组件的时候就明白了。

在这里我们会发现刚才新建的小程序组件有四个文件，并且文件的类型和我们页面的文件类型是一摸一样的。

“like”这个组件我们已经新建完成了，那么，现在的问题是这个组件我们如何来使用？我们新建了它，似乎在我们的小程序模拟器上是没有任何的变化。这和我们之前在写页面的时候还是不同的。之前比如说在我们的“classic.wxml”这里随便加入一段文本，然后在我们小程序上就可以直接看到我们打的文本的效果；但是组件不同，组件你新建完成之后是不会有任何效果的。那么，怎么来用这个组件呢？

下面这句话非常重要：我们必须在页面上来引用这个组件。那么，如何在页面里引用这个组件呢？关键点就在于，页面里有一个“classic.json”配置文件。要注意的是，之前我们的配置是“app.json”，这个我们在之前的小程序教程中讲过它是全局配置文件；但是每一个页面也有它自己的配置文件，就是这个“classic.json”文件。

我们可以打开“classic.json”文件，是“json”文件我们就可以加入一些配置，我们现在为这个文件加入一些配置。

{
   "usingComponents"
}

通过这个配置项的名字我们已经可以大致推测出这个配置项“usingComponents”，它就是来指定当前这个页面需要使用哪些组件的。那么配置选项的名字我们已经确定了，只是这个“usingComponents”到底该接受一个怎么样的值呢？这里它同样需要接受一个“json”对象，所以还是以“{  }”包起来，在这个“{  }”中我们就可以填入当前这个页面我们要使用的组件。使用哪个组件是通过键值对来实现的，也就是：“key”:"value"。

这里我说一下小程序中这个“key”是什么呢？这个“key”就是你要使用的组件的名字；而“value”是什么呢？“value”就是你要是用的这个组件的路径。

我们首先来把我们的“value”写成我们需要使用的组件的路径，我们要使用我们的“like”组件，那么它的路径就是：

{
   "usingComponents":{
      "like-cmp":"compontents/like/index"
   }
}

然后这个“key”有些同学会直接写成“like”，那其实“like”其实是目录名字，我们的组件一开始是没有名字的，你可以叫成“like1”、“like2”等等都可以；但是有时候我们尽量规范命名这个组件。所以通常建议是在“like”后面加上“-cmp”，这样我们一看就知道这是一个组件。之前清云小程序教程中说过每个团队有每个团队命名的规范，这个名字也是可以根据你自己团队的规范来命名的。这里我是特别鼓励大家自己去写组件的，如果你的组件写得足够好的话，完全可以开源。即使你不能够开源，也可以至少打造一个你自己的组件库，这一点我觉得都是可以实现的，这个真的没有什么了不起的，但是前提条件是：第一。你要有足够的自信；第二，你要付出足够多的时间，也就是说你要足够努力。

现在这一小段代码我们就已经完成了组件的引用。现在只是在我们的“classic.json”里面引用了组件，但是在我们的“classic.wxml”中还没有使用。注意，一个是“引用”；一个是“使用”。下面我们就要来使用我们刚刚引用的“like”组件了。那么，组件如何使用呢？组建的名字我们已经知道是“like-cmp”，所以这里我们就像之前使用“view”和“image”组件一样，只是“view”和“image”组件是小程序给我们内置的。我们来看看如何使用吧！

所以说你在这个“classic.json”中如何来定义在这个组件的名字的，在“classic.wxml”中就如何来使用这个名字。从这一点大家也可以看出，组件它叫什么名字其实和我们在创建这个组件的时候所使用的目录名字是没有关系的，组件的名字只取决于你在引入这个组件的时候所命名的名字。

这个组件引入和使用后，我们再到小程序模拟器来看一下，这个页面上面没有显示任何的信息，怎么回事呢？这时候打开调试器，小程序给我们报了一个错误，仔细阅读这个错误提示，我么可以发现，这个错误提示告诉我们，我们给组件设置的这个路径是不对的，小程序没有找到当前路径下的组件。那么我们就要来看一下这个路径是什么了？这个路劲居然是“Pages/classic/components/like/index”，这显然是不对的。我们的“components”不是在“Pages”下面的，这是怎么回事呢？那么，清云小程序教程下节课就来教你如何正确填写这个路径。