2.1 小程序的基本目录结构

我们以第1章新建的系统默认示例项目为参考，了解微信小程序项目的基本目录结构。如图2-1所示，在微信小程序的基本目录结构中，项目主目录下有2个子目录（pages和utils）和4个文件（app. js、app. json、app. wxss和project. config. json）。

在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。

project. config. json文件是项目配置文件，包含项目名称、AppID等相关信息，如图2-2（a）所示。图2-2（b）是开发工具项目详情的可视文件，其目的和功能与project. config. json文件的目的和功能是一样的。

pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同扩展名（. wxml、. wxss、. js和．json）的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。按照规定，同一个页面的4个文件必须具有相同的路径与文件名。

utils目录用来存放一些公共的．js文件，当某个页面需要用到utils. js函数时，可以将其引入后直接使用。在微信小程序中，可以为一些图片、音频等资源类文件单独创建子目录用来存放。

2.1.1 主体文件

微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的。

■ app. js小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app. js文件会和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。

■ app. json小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。

■ app. wxss小程序主样式表文件，类似HTML的．css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

2.1.2 页面文件

小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app. json设置的路径找到相对应的资源进行数据绑定。

■. js文件 页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。

■. wxml文件 页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的．html文件。该文件在页面中不可缺少。

■. wxss文件 页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app. wxss中的样式规则；否则，直接使用app. wxss中指定的样式规则。该文件在页面中不可缺少。

■. json文件 页面配置文件。该文件在页面中不可缺少。