微信小程序详解004——小程序目录结构及文件构成（下）

回顾

上一章，我们对开发者工具的界面和微信小程序的目录树进行了介绍，讲解了app.js和app.json文件，这一章我们将介绍其他的目录文件。

小程序的目录树，除了app.js和app.json文件外，还包含app.wxss、project.config.json文件，和pages目录（utils目录为工具目录，暂时不讲，后续用到再做介绍），下面我们就对剩余的几个文件和目录做详细介绍。

1.app.wxss

我们在第一篇文章中就介绍：.wxss文件就是对.css的封装（笔者自己认为），从而实现对页面布局的装饰。如图1所示：

图1 .wxss文件代码

代码实现对class=container的标签制定一些属性。看到这里，可能会有读者问，app.wxss是全局属性，万一，我其中一个页面的属性想跟其他的不一样，怎么办？没关系，因为每一个页面中私有的.wxss会覆盖app.wxss中相同属性的参数，这里就涉及到一个优先级的问题，私有文件的.wxss的优先级更高。（所谓私有的.wxss文件，就是在pages目录下，每一个页面文件夹下的.wxss文件）

2.project.config.json

project.config.json文件是小程序开发时工具的配置信息。如果将项目拷贝到另一台电脑，那么这个文件能让开发工具恢复到相应的设置，如果还不理解，看下面这幅图：

图2 project.config.json文件

通过与详情页对比，我们发现，project.config.json文件中很多信息都是详情页中的，而详情页中的配置是可以根据需求改动的。

3. pages目录

在后续的开发过程中，我们做的最多的工作就是对pages目录下的文件进行处理。下面对pages目录下的文件进行详细介绍。

图3 pages目录文件

可以看到pages文件夹下有很多的子文件夹（可以有很多个，文件夹的名字也可以随意，但是必须在app.json中注册），每一个子文件夹代表一个页面（所谓的页面，就是微信小程序展现出来的一页布局，类似APP开发中的Activity），不同的页面之间如何跳转，我们将在后续的文章中详细分析。

如图3所示，可以发现，每一个页面文件夹（比如index文件夹）中的文件类似，都包含四类文件（.js/.json/.wxml/.wxss），这里我们只分析一个页面中的这四个文件，其他的子文件夹下的文件情况类似。

已index文件夹为例，对文件夹下的四种文件进行介绍：

page.json

这里的page.json是指在pages文件夹的子文件夹下的一系列.json结尾的配置文件。这一类文件是对app.json文件的一种补充，优先级比app.json高。

如果，开发的小程序的配置是一样的，我们就可以在app.json中设置，如果需要对其中一个页面的布局进行设置，就可以通过这个页面的.json文件来实现。

例：如图4所示：

图4-1 app.json

图4-2 index.json

图4-3 logs.json

app.json中属性navigationBarTitleText（页面标题）设置为"wechart"；index.json没有任何设置；logs.json设置为"查看启动日志"，所以就得到了如下效果图：

图5-1 index页面标题

图5-2 logs页面标题

index.json文件中没有设置属性值，所以用的是app.json的全局属性值，而logs.json设置了navigationBarTitleText的属性值，由于页面的优先级更高，所以将全局的app.json中的属性值覆盖了。

page.js/page.wxss/page.wxml

再看页面文件夹中的.js/.wxss/.wxml文件。我们知道，在web前端设计中，网页编程采用的是 HTML + CSS + JS 这样的组合。相对应的，小程序wxml对应html文件、wxss对应css文件，后续的章节，我们对详细探讨这三个文件如何配套使用，从而实现小程序的开发。

小结

本篇文章介绍了小程序目录树中的其他文件，从而使读者对小程序的结构框架，文件功能有所了解。下面的章节，我们会陆续展开对page.js/page.wxss/page.wxml文件的编写。