3.1　认识小程序的基本文件结构

我们还是以第2章中新建的官方示例项目HelloLittleApple为参考，来看一下构成一个小程序的基本文件要素，如图3-1所示。

图3-1　官方示例项目的文件及文件结构

不同于其他框架，小程序的目录结构非常简单，也非常易于理解。

首先我们看到根目录下面有3个文件：app.js、app.json和app.wxss。一个小程序项目必须有这3个描述App的文件，它们必须放在应用程序的根目录下，否则小程序会提示找不到app.json文件。表3-1描述了3个文件的意义。

表3-1　app.js、app.json和app.wxss的含义

这3个文件是应用程序级别的文件。

接着是和这3个应用程序级别文件平行的pages文件夹。一个小程序由若干个页面文件构成，比如图3-1中pages文件夹下就有2个页面，分别是index页面和logs页面。每个页面可以由4个文件构成，分别是：.js、.wxml、.wxss和.json文件。表3-2描述了这4个页面文件的意义。

表3-2　.js、.wxml、.wxss和.json文件的含义

其实，这4个文件的作用大家并不陌生。我们可以和熟悉的Web前端开发技术做一个对比。

wxml文件类似于我们熟悉的HTML文件，用来编写页面的标签和骨架，不同的是wxml文件里的标签元素不可以使用HTML标签，只能使用小程序自己封装的一些组件，这些组件也是我们后面要重点学习的知识。

wxss文件的作用类似于我们熟悉的CSS文件，用于编写小程序的样式，实际上小程序的样式编写语言就是CSS，只是把.css文件换成了.wxss文件。

json文件用来配置页面的样式与行为。

js文件类似于我们前端编程中的JavaScript文件，用来编写小程序的页面逻辑。

以上4种类型的页面文件的文件名称必须相同，这是要注意的一个地方。

我们可以看到，小程序的4种页面级别文件同3个应用程序级别文件相比，多出了一个wxml页面标签文件，其他3个的作用基本相似，只不过页面文件作用于页面本身而应用程序文件作用于应用程序整体。

除了pages文件夹外，官方的示例项目中还有一个utils文件夹，这个文件夹用来存放一些公共的js文件，比如utils下面的util.js。我们可以任意定义类似于utils文件夹的目录，并放在小程序的任意位置，小程序对此并没有任何限制。