1.3　小程序目录结构

小程序的目录结构主要包含项目配置文件、主体文件、页面文件和其他文件。本节将基于1.1.3节创建的Hello World小程序对目录结构进行分析，并对Hello World小程序进行简单修改。

1.3.1　项目配置文件

新建小程序时，都会自动生成一个项目配置文件，即项目根目录下的project.config.json文件，如图1-42所示。项目配置文件主要通过定义项目名称、AppID等内容来对项目进行配置。

1.3.2　主体文件

一个小程序项目的主体文件由三个文件组成，且必须放在项目的根目录下，如图1-43所示。

主体文件均以app为前缀，分别是app.js、app.json和app.wxss，其作用如图1-44所示。

1．app.js

app.js使用系统的方法处理全局文件，在整个小程序中，每一个框架页面和文件都可以使用this获取app.js文件中规定的函数和数据。每个小程序都会有一个app.js文件，有且只有一个，位于项目的根目录。

该文件中的App（）函数用于注册一个小程序，如图1-45所示；接收一个object参数，指定小程序的生命周期函数等。详见https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html/。

2．app.json

app.json文件用于对微信小程序进行全局配置，决定页面文件的路径、窗口表现，设置网络超时时间，设置多tab等，详见表1-1。

在上述app.json配置列表中，app.json的属性相对较多，本小节简单介绍比较常用的几个属性。

注意：app.json文件内不可包含注释，否则不可运行。

1）pages

pages属性主要用于指定小程序由哪些页面组成，每一项都对应一个页面的路径地址。通俗来讲，就是如果开发者的小程序需要显示一个页面，就需要在该文件中注册。此外需要注意一点，pages配置项中第一条记录为最先呈献给用户的界面。除此之外尽量按照呈现给用户界面的顺序进行排序。以Hello World小程序为例，如图1-46所示，小程序中有index页面和logs页面，其中index页面为该项目的初始页面。开发者如果想将logs页面变为初始页面，只需将logs页面路径移到pages配置项的第一行即可。

2）window

window属性主要用于设置小程序的状态栏、导航栏、标题与窗口背景颜色等，如表1-2所示。

注意：HexColor的属性值只支持十六进制颜色值，如#ff00ff，大小写不限。

window属性中各属性值的作用区域如图1-47所示。

3）tabBar

如果小程序是一个多tab应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。tabBar属性如表1-3所示。

其中，list接收一个数组，只能配置最少2个、最多5个tab。tab按数组的顺序排序，每个项都是一个对象，其属性如表1-4所示。

tabBar属性值的作用区域如图1-48所示。

app.json文件中的其他属性在后续案例中再仔细讲解，本节就不赘述了。

3．app.wxss

app.wxss文件是小程序的全局样式文件，作用于每一个页面。其中，WXSS是一种样式语言，用于描述WXML的组件样式。该文件是可选文件，如果没有全局样式规定，可以省略不写。app.wxss文件中的代码如图1-49所示。

1.3.3　页面文件

一个小程序页面由4个文件组成，如表1-5所示。

1．js文件

对于小程序中的每个页面，都需要在页面对应的js文件中调用page（）方法注册页面示例，指定页面初始数据、生命周期回调、事件处理函数等。

2．wxml文件

WXML（WeiXin Markup Language）是框架设计的一种标签语言，结合基础组件、事件系统，可以构建出页面的结构。wxml文件主要具有数据绑定、列表渲染、条件渲染、模板和引用的功能。具体的功能如何使用会在后面章节中进行介绍。

3．json文件

每一个小程序页面也可以使用同名的json文件来对本页面的窗口表现进行配置，页面中配置项会覆盖app.json的window属性中相同的配置项。新设置的选项只会显示在当前页面上，不会影响其他页面。

4．wxss文件

WXSS（WeiXin Style Sheets）是一种样式语言，用于描述WXML的组件样式。在页面文件中主要用于设置当前的样式效果，该文件中规定的样式会覆盖app.wxss全局样式中产生冲突的样式，但不会影响其他页面。

1.3.4　其他文件

除了前几节介绍的常用文件外，小程序还允许用户自定义路径和文件名，用于创建一些辅助文件。如本章新建的Hello World小程序中utils文件夹就是用来存放公共js文件，如图1-50所示。

全局调用自定义的js文件前需要在被调用的js文件中使用module.exports={可被调用的函数}进行声明，如图1-51所示。

在调用时只需在文件中加入“const https=require（'文件目录'）；”即可调用，如图1-52所示。