2.2 小程序的目录结构
小程序的目录结构主要包含项目配置文件、主体文件、页面文件和其他文件。本节将基于2.1节创建的第一个小程序项目对代码文件的构成展开分析。
2.2.1 项目配置文件
每个小程序在新建时都会自动生成一个项目配置文件project.config.json，该文件直接位于项目根目录下，如图2-17所示。其内部代码可用来定义小程序的项目名称、AppID等内容，如图2-18所示。
图2-17 项目配置文件project.config.json的位置
图2-18 项目配置文件project.config.json的代码
2.2.2 主体文件
小程序主体文件同样直接位于项目根目录下，如图2-19所示。
图2-19 app系列文件的位置
由图2-19可见主体文件名称均为app，根据后缀名不同分为3种类型。
• app.json：必填文件，用于描述小程序的公共配置。
• app.js：必填文件，用于描述小程序的整体逻辑。
• app.wxss：可选文件，小程序公共样式表。
1 app.json
app.json文件是小程序的全局配置文件，主要包含了小程序所有页面的路径地址、导航栏样式等。当前该文件的内部代码如图2-20所示。
图2-20 全局配置文件app.json的代码
由图2-20可见，本次小程序项目主要包含了pages和window两个属性。事实上，除了pages和window以外，app.json还可以配置tabBar、networkTimeout及debug等属性，这些属性的具体说明如表2-1所示。
表2-1 全局配置文件app.json的属性
1）pages属性
pages属性对应的值是数组形式，数组的每一项都是以字符串形式记录小程序页面的路径地址。例如之前图2-20中pages属性的相关代码就表示当前共有两个页面，分别是index和log页面，并且其中的index页面被默认为小程序的初始页面。
由于默认数组中的第一个元素就是小程序的初始页面，开发者也可以临时手动调整数组中元素的顺序，以便快速查看不同页面的模拟器预览效果。
如果新建页面，app.json中的pages属性会自动更新代码，将新增页面的路径记录到数组中的最后一行。需要注意的是，如果对页面进行删除或者在硬盘中直接添加新页面，则不会触发代码自动更新效果，而需要手动修改app.json中的pages属性值。
2）window属性
window属性对应的值是对象形式，其中包括了小程序页面顶端导航栏的背景颜色、标题文字内容以及文字颜色等属性，具体可以包含的对象属性如表2-2所示。
表2-2 app.json文件中的window属性值
注意：标记类型为HexColor的属性值只支持十六进制颜色表示方式。例如#ff0000表示红色，也可简写为#f00，并且大小写不限。
这里不妨对app.json进行简单修改，修改后的代码如图2-21所示。
图2-21 小程序全局配置文件app.json的代码
对比原先的代码，对修改内容说明如下。
• 第8行：将导航栏背景颜色从白色改为红色（#f00）。
• 第9行：将导航栏文字内容从“WeChat”改为“测试”。
• 第10行：将导航栏文字颜色从黑色改为白色（white）。
修改后的预览效果如图2-22所示。
图2-22 修改app.json文件中的window属性后的预览图
开发者可以根据实际需要重新修改定义window属性中的各种样式效果。
3）tabBar属性
如果小程序是一个多tab应用（客户端窗口的底部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。
tabBar的属性值如表2-3所示。
表2-3 app.json文件中的tabBar属性值
其中，list接收一个数组，只能配置最少两个、最多5个tab。tab按数组的顺序排序，每项都是一个对象，其属性值如表2-4所示。
表2-4 list属性值
注意：当position属性值为top时iconPath和selectedIconPath属性无效，不显示图标。
图2-23有助于读者更好地理解tabBar和list属性值的作用区域。
图2-23 tabBar属性值的对应关系
iconPath和selectedIconPath属性不是必填内容，例如：
上述代码表示声明了带有两个页面的tabBar效果，tab文字内容分别为首页和例题。
4）networkTimeout属性
app.json中的networkTimeout属性可以用于设置各类网络请求的超时时间，其属性值如表2-5所示。
表2-5 app.json文件中的networkTimeout属性值
例如：
上述代码表示重新规定下载文件wx.downloadFile()方法的超时时间为5s。
5）debug属性
用户可以在微信web开发者工具中开启debug模式。在开发者工具的控制台面板中调试信息以info的形式给出，主要包括Page的注册、页面路由、数据更新、事件触发等内容，可以帮助开发者快速定位一些常见的问题。
2 app.js
app.js文件是小程序的全局逻辑文件，代码片段如图2-24所示。
图2-24 app.js文件的代码片段
省略app.js中具体的函数内容后将得到以下代码框架：
由此可见，所有内容都写在App()函数内部，并且彼此之间用逗号隔开。App()函数的用法详见3.1.1节“注册程序”。
3 app.wxss
app.wxss文件是小程序的全局样式文件，代码如图2-25所示。
图2-25 app.wxss文件的代码
app.wxss文件用于规定所有页面都可用的样式效果，语法格式见3.2.2节“WXSS”。该文件是可选文件，如果没有全局样式规定，可以省略不写。
2.2.3 页面文件
小程序一般会在根目录下创建一个pages文件夹用于保存所有页面文件，每个页面有自己独立的二级目录，如图2-26所示。
图2-26 pages文件夹内容
由图2-26可见，该项目当前由index和logs两个页面组成。每一个单独的页面基本上由4种文件构成，即wxml、wxss、js和json，说明如下。
• wxml文件：用于构建当前页面的结构，包括组件、事件等内容，用户最终看到的页面效果就是由该文件显示出来的。
• wxss文件：可选页面，用于设置当前页面的样式效果，该文件规定的样式会覆盖app.wxss全局样式表中产生冲突的规定，但不会影响其他页面。
• js文件：可选页面，用于设置当前页面的逻辑代码。
• json文件：可选页面，用来重新设置app.json中window属性规定的内容，新设置的选项只会显示在当前页面上，不会影响其他页面。
注意：为了方便开发者减少配置项，建议直接在空白页面文件夹上右击选择“新建”→Page，这样可以一次性创建描述页面的这4种文件，且它们会具有相同的路径与文件名。
json文件的可用属性如表2-6所示。
表2-6 json文件的属性
例如：
上述代码表示设置导航栏背景颜色为白色、导航栏标题颜色为黑色，并将导航栏标题更新为“这是新标题”。
注意：页面的JSON文件只能设置与window相关的配置项，以决定本页面的窗口表现，所以无须像app.json那样专门写window属性。
2.2.4 其他文件
除了前几节介绍的常用文件外，小程序还允许用户自定义路径和文件名创建一些辅助文件。例如在本章创建的第一个小程序项目中utils文件夹就是用来存放公共JS文件的，如图2-27所示。
图2-27 utils文件夹
该文件夹中的util.js保存了一些公共JavaScript代码，可以被其他页面的JS文件引用，具体的引用方式见3.1.4节“模块化”。
除此之外，开发者还可以自定义资源文件夹用于存放其他文件。例如，在根目录中创建images文件夹用于存放图片等，这些文件夹可以根据实际需要自行创建。