微信小程序开发图解案例教程第2章 微信小程序框架分析

图2.2 app.js小程序逻辑
2．APP.JSON小程序公共设置文件 APP.JSON文件可以对5个功能进行设
置：配置页面路径、配置窗口表现、配 置标签导航、配置网络超时、配置DEBUG 模式。具体如图2.3所示。
图2.3 app.json的5个功能
（1）配置页面路径。页面路径定义了一个数组，存放多个页面的访 问路径，它是进行页面访问的必要条件。如果在这里没有配置页面访 问路径，页面被访问时就会报错；在这里定义了页面访问路径，微信 小程序框架就可以在页面文件夹下建立相应名称的文件夹以及文件， 免去用户手动添加文件夹和文件的痛苦，如图2.4所示。
表2.1 框架全局文件
1．APP.JS小程序逻辑文件 APP.JS文件用来定义全局数据和函数的使用，它可以指定微信小程序
的生命周期函数。 生命周期函数可以理解为微信小程序自己定义的函数，例如ONLAUNCH
（监听小程序初始化）、ONSHOW（监听小程序显示）、ONHIDE（监听小程 序隐藏）等，在不同阶段不同场景可以使用不同的生命周期函数。此外， APP.JS中还可以定义一些全局的函数和数据，其他页面引用APP.JS文件后 就可以直接使用，如图2.2所示。
TABBAR是一个对象，它可以配置标签导航文字的默认颜色、选中 颜色，标签导航背景色以及上边框颜色。
上边框颜色可以配置两种颜色：BLACK/WHITE。 标签导航存放到LIST数组里面，LIST里的每个对象对应一个标签 导航，每个对象里可以配置标签导航的路径、导航名称、默认图标以 及选中图标，如图2.7所示。
微信小程序开发图解案例教程 （附精讲视频）（第2版）
刘刚 著
第2章 微信小程序框架分析
微信小程序目录结构介绍 ■ 微信小程序注册程序应用 ■ 微信小程序注册页面的使用 ■ 微信小程序如何绑定数据 ■ 微信小程序条件渲染 ■ 微信小程序列表渲染 ■ 微信小程序定义模板 ■ 微信小程序的引用功能 ■ WXS小程序脚本语言 ■ 沙场大练兵：仿香哈菜谱微信小程序 ■ 小结 ■
2.1 微信小程序目录结构介绍
微信小程序目录结构可以分为3 个部分——框架全局文件、工具类 文件和框架页面文件，如图2.1所示。
图2.1 微信小程序框架目录
2.1.1 框架全局文件
框架全局文件必须放在项目的根目录中。 框架全局文件包括4个文件：APP.JS小程序逻 辑文件（定义全局数据以及定义函数文件）、 APP.JSON小程序公共设置文件、APP.WXSS小程 序公共样式表、PROJECT.CONFIG.JSON小程序 项目个性化配置文件。它们对所有页面都有效， 如表2.1所示。
图2.7 猫眼电影微信小程序标签导航配置
（4）配置网络超时。可以配置网络请求、文件上传、文件下载时最 大的请求时间，超过这个时间，则不再请求。 （5）配置DEBUG模式。配置DEBUG模式可方便微信小程序开发者调试 开发程序，如图2.8和图2.9所示为没有开启DEBUG模式和开启DEBUG模 式的调试信息对比。
定义完这些函数后，要通过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.8 没有开启debug模式
图2.9 开启debug模式
从图2.8和图2.9可以看出，开启DEBUG模式后，可以看到每一步 的调用情况、访问路径以及错误信息，这样更加方便开发者进行调试 工作。
APP.JSON作为全局配置文件就是提供配置页面路径、配置窗口的 表现、配置底部标签导航、配置网络连接超时、配置DEBUG模式这些 功能，配置也比较容易。
重新安装工具当时开发项目时的个性化配置， 其中包括编辑器的颜色、代码上传时自动压缩等一系列选项。
2.1.2 工具类文件
在微信小程序框架目录里有一个UTILS文件夹，它用来存放工具 栏的JS函数，例如可以放置一些日期格式化的函数、时间格式化的函 数等一些常用的函数。
图2.10 小程序公共样式表
4．PROJECT.CONFIG.JSON小程序项目个性化配置文件 在使用微信小程序开发者工具时，开发者都会针对各自喜好做一
些个性化配置，例如界面颜色、编译配置等。当换了另外一台计算机 重新安装工具的时候，用户还要重新配置。因此，小程序开发者工具 在每个项目的根目录都会生成一个PROJECT.CONFIG.JSON文件，用户 在工具上做的任何配置都会写入这个文件。
图2.4 自动创建页面
（2）配置窗口表现。如图2.5所示。
图2.5 窗口表现
（3）配置标签导航。标签导航是很多移 动APP都会采用的一种导航方式，微信小 程序同样可以实现这样的效果，如图2.6 所示。
图2.6 猫眼电影App标签导航
怎么制作标签导航呢？我们需要在APP.JSON文件里配置TABBAR属 性。
3．APP.WXSS小程序公共样式表 APP.WXSS文件对CSS样式进行了扩展，和CSS的使用方式一样，类
选择器和行内样式的写法兼容大部分CSS样式，有一些CSS样式在这里 是不起作用的。APP.WXSS还形成了自己的风格，是对所有页面定义的 一个全局样式。
只要页面有全局样式里的CLASS，就可以渲染全局样式里的效果； 但如果页面又重新定义了这个CLASS样式，则会把全局的覆盖掉，使 用自己的样式，如图2.10所示。