清云小程序教程二十二：相对路径与绝对路径

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

清云小程序教程在上节课中提到了一个使用组件后出现了路径的错误，那么，本节课我们就来探讨一下这个问题。这个问题的本质原因在于，我们在“classic.json”中使用的是相对路径，那么如果是相对路径的话，它所标识的这个组件的位置是不正确的。

“相对路径”表示的是一个相对的位置。如果是“components/like/index”的话，那么它表示的是相对于“classic.json”这个文件同级目录“components”下面的“like“下面的”index“文件，；但是很明显，“classic.json”同级是没有“components”这个文件夹目录的，所以说，这个路径是不对的。那我们希望这个路径表示的从整个项目的根目录开始的”components/like/index”，从根目录开始计算的话，这个路径就是正确的了，那么应该怎么正确表示呢？这个时候我们需要使用的是“绝对路径”了。

“绝对路径”表示的是从项目的根目录开始一级一级的去寻找这个文件。那么，绝对路径应该怎么表示呢？非常简单，在这个“components/like/index”前面加上一个“/”。“/”表示的是项目的根目录，根目录下面的“components/like/index”就可以正确地找到这个文件了。

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

当我们把路径修正完成之后，我们的小程序就可以成功的显示这个组件的内容了。

从这个简单的示例我们也可以看到，对于我们的小程序的页面而言，凡是写在页面的“wxml”文件里面的信息都可以直接在我们的小程序页面上显示出来的；但是对于我们的组件来说就不太一样了。对于组件来说，要想成功的显示在我们小程序的页面上，必须有我们的页面首先来引用它，如何再在“wxml”中来使用它，最终才可以在我们的小程序页面中显示出我们的组件的样式来。

本节课主要是给大家讲一下这个“相对路径”和“绝对路径”。那么，假如说，我在引用这个组件的时候不使用这个绝对路径，而是使用相对路径的话，那么应该怎么来表示正确的路径呢？首先，我们当前目录是在“classic.json”这个级别，那么如果我要定位“like”组件的话，首先我要回到根目录去。那么如何返回到根目录去呢？在小程序中，或者是说在绝大多数的编程语言里面，都是通过“..”这样的两个小点来表示返回上一级目录。那么，2个小点表示返回到上一级，到了“Pages”这个目录下；在“Pages”目录下面再用2个小点表示返回到根目录下去。一旦到了根目录下，就可以通过“components”找到“like/index”来定位我们的“like”组件了。

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

此时，我们再到我们的小程序里来看一下， 这里还会报错吗？没有报错了，说明我们的相对路径是同样适用的。

有些同学可能要问，我到底是使用相对路径还是使用绝对路径？这个在小程序中其实是没有一个固定的说法的，没有说一定要使用绝对路径，也没有说一定要使用相对路径。所以说更多的时候在小程序或者其他编程语言中我们要选取一个写起来更加简便的方法。比如在这里就很明显，使用绝对路径要更加方便一点。

在这里随便问大家一个小问题：我们当时在小程序的“app.json”文件里面去注册页面的路径的时候，我们也写了一段路径，那么这个路径大家说是绝对路径还是相对路径？答案是相对路径。因为它没有以这个“/”开头；这里为什么没有出现“..”2个小点呢？“app.json”已经是在根目录下面了的，而它要找的这个页面是在“Pages”目录下面的；而“Pages”和这个“app.json”是同级目录，它不需要返回上一级。

相对路径和绝对路径的知识相对来说是比较简单的，但是，我要说的是，在大多数的技术或者框架里面，相对路径和绝对路径其实都是一种表现形式。

清云小程序教程将会在下节课正式教大家如何实现组件。