2.1 微信小程序目录结构介绍
微信小程序目录结构介绍
微信小程序目录结构可以分为3个部分——框架全局文件、工具类文件和框架页面文件，如图2.1所示。
图2.1 微信小程序框架目录
2.1.1 框架全局文件
框架全局文件必须放在项目的根目录中。框架全局文件包括4个文件：app.js小程序逻辑文件（定义全局数据以及定义函数文件）、app.json小程序公共设置文件、app.wxss小程序公共样式表、project.config. json小程序项目个性化配置文件。它们对所有页面都有效，如表2.1所示。
表2.1 框架全局文件
1.app.js小程序逻辑文件
app.js文件用来定义全局数据和函数的使用，它可以指定微信小程序的生命周期函数。生命周期函数可以理解为微信小程序自己定义的函数，例如onLaunch（监听小程序初始化）、onShow（监听小程序显示）、onHide（监听小程序隐藏）等，在不同阶段不同场景可以使用不同的生命周期函数。此外，app.js中还可以定义一些全局的函数和数据，其他页面引用app.js文件后就可以直接使用，如图2.2所示。
2.app.json小程序公共设置文件
app.json文件可以对5个功能进行设置：配置页面路径、配置窗口表现、配置标签导航、配置网络超时、配置debug模式。具体如图2.3所示。
（1）配置页面路径。页面路径定义了一个数组，存放多个页面的访问路径，它是进行页面访问的必要条件。如果在这里没有配置页面访问路径，页面被访问时就会报错；在这里定义了页面访问路径，微信小程序框架就可以在页面文件夹下建立相应名称的文件夹以及文件，免去用户手动添加文件夹和文件的痛苦，如图2.4所示。
图2.2 app.js小程序逻辑
图2.3 app.json的5个功能
图2.4 自动创建页面
（2）配置窗口表现。窗口表现用于配置小程序的状态栏、导航条、标题和窗口背景色，可以设置导航条背景色（navigationBarBackgroundColor）、导航条文字（navigationBarTitleText）以及导航条文字颜色（navigationBarTextStyle）；还可以设置窗口是否可以下拉刷新（enablePullDownRefresh）（默认值是不可以下拉刷新的），设置窗口的背景色（backgroundColor）和下拉背景字体或者loading样式（backgroundTextStyle），如图2.5所示。
图2.5 窗口表现
（3）配置标签导航。标签导航是很多移动App都会采用的一种导航方式，微信小程序同样可以实现这样的效果，如图2.6所示。
怎么制作标签导航呢？我们需要在app.json文件里配置tabBar属性。tabBar是一个对象，它可以配置标签导航文字的默认颜色、选中颜色，标签导航背景色以及上边框颜色。上边框颜色可以配置两种颜色：black/white。标签导航存放到list数组里面，list里的每个对象对应一个标签导航，每个对象里可以配置标签导航的路径、导航名称、默认图标以及选中图标，如图2.7所示。
（4）配置网络超时。可以配置网络请求、文件上传、文件下载时最大的请求时间，超过这个时间，则不再请求。
图2.6 猫眼电影App标签导航
图2.7 猫眼电影微信小程序标签导航配置
（5）配置debug模式。配置debug模式可方便微信小程序开发者调试开发程序，如图2.8和图2.9所示为没有开启debug模式和开启debug模式的调试信息对比。
图2.8 没有开启debug模式
从图2.8和图2.9可以看出，开启debug模式后，可以看到每一步的调用情况、访问路径以及错误信息，这样更加方便开发者进行调试工作。
app.json作为全局配置文件就是提供配置页面路径、配置窗口的表现、配置底部标签导航、配置网络连接超时、配置debug模式这些功能，配置也比较容易。
3.app.wxss小程序公共样式表
app.wxss文件对CSS样式进行了扩展，和CSS的使用方式一样，类选择器和行内样式的写法兼容大部分CSS样式，有一些CSS样式在这里是不起作用的。app.wxss还形成了自己的风格，是对所有页面定义的一个全局样式。只要页面有全局样式里的class，就可以渲染全局样式里的效果；但如果页面又重新定义了这个class样式，则会把全局的覆盖掉，使用自己的样式，如图2.10所示。
图2.9 开启debug模式
除了app.wxss提供的默认全局样式，用户自己也可以定义一些全局样式，这样方便每个页面的使用，又不用在每个页面都写一次，达到一次定义，其他页面直接引用的复用效果。
4.project.config.json小程序项目个性化配置文件
在使用微信小程序开发者工具时，开发者都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等。当换了另外一台计算机重新安装工具的时候，用户还要重新配置。因此，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json文件，用户在工具上做的任何配置都会写入这个文件。重新安装工具或者换计算机工作时，用户只要载入同一个项目的代码包，开发者工具就会自动恢复到当时开发项目时的个性化配置，其中包括编辑器的颜色、代码上传时自动压缩等一系列选项。
图2.10 小程序公共样式表
2.1.2 工具类文件
在微信小程序框架目录里有一个utils文件夹，它用来存放工具栏的js函数，例如可以放置一些日期格式化的函数、时间格式化的函数等一些常用的函数。定义完这些函数后，要通过module.exports将定义的函数名称注册进来，在其他的页面才可以使用，图2.11所示为时间格式化工具类文件。
图2.11 utils.js工具类文件
2.1.3 框架页面文件
一个小程序框架页面文件由5个文件组成，分别是js页面逻辑、json页面配置、wxml页面结构、wxs小程序脚本语言、wxss页面样式表，如表2.2所示。
表2.2 框架页面文件
微信小程序的框架页面文件，都放置在pages文件夹下面，如图2.12所示。
图2.12 页面文件
每个页面都有一个独立的文件夹，比如日志页面logs文件夹，它的下面放置5个文件：logs.js进行业务路径处理；logs.json进行页面配置，可以覆盖全局App.json配置；logs.wxml配置页面结构，负责渲染页面；WXS（WeiXin Script）是小程序的一套脚本语言，logs.wxs结合wxml文件，可以构建出页面的结构；logs.wxss是针对logs.wxml页面的样式文件。
2.1.4 小试牛刀：制作猫眼电影底部标签导航
猫眼电影底部标签导航有4个标签：电影、影院、发现、我的，如图2.13所示。
（1）新建一个movie项目，如图2.14所示。
图2.13 猫眼电影底部标签导航
图2.14 添加项目
（2）将准备好的底部标签导航图标拷贝到movie项目下面。
（3）打开App.json配置文件，在pages数组里添加4个页面路径——电影“pages/movie/movie”、影院“pages/cinema/cinema”、发现“pages/find/find”、我的“pages/me/me”，保存后会自动生成相应的页面文件夹；删除“pages/index/index”“pages/logs/logs”页面路径以及对应的文件夹，如图2.15所示。
（4）在window数组里配置窗口导航背景颜色为红色（#D53E37），导航栏文字为电影，字体颜色设置为白色（white），具体配置如图2.16所示。
（5）在tabBar对象里配置底部标签导航背景色为灰色（#f5f5f5），文字默认颜色为白色（white），文字选中时为红色（#D53E37），在list数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时图标，具体配置如图2.17所示。
这样就完成了猫眼电影底部标签导航的配置，单击不同的导航标签，可以切换显示不同的页面，同时导航图标和导航文字会呈现为选中状态，如图2.18所示。
图2.15 配置页面路径
图2.16 窗口及导航栏配置
图2.17 底部标签导航配置
图2.18 电影界面