1.3 微信小程序框架文件
视频课程
微信小程序框架文件
微信小程序框架文件分为三部分：框架全局配置文件、工具类文件和框架页面文件。框架全局配置文件是从项目全局的角度对项目进行配置管理，工具类文件对应的是一些常用的．js工具处理，框架页面文件对应的是微信小程序各个页面。
1.3.1 框架全局配置文件
一个小程序框架配置文件由app.js、app.json和app.wxss 3个文件组成。它们作为全局文件，必须放在项目的根目录。
1．app.js小程序逻辑文件
app.js文件作为定义全局数据和函数使用，可以指定微信小程序的生命周期函数，生命周期函数可理解为微信小程序自定义的函数，例如onLaunch（监听小程序初始化）、onShow（监听小程序显示）、onHide（监听小程序隐藏）等，在不同阶段不同场景可使用不同的生命周期函数；除了这些生命周期函数，还可以定义一些全局的函数和数据，其他页面引用app.js文件后就可以直接使用全局函数和数据，如图1.30所示。
图1.30 app.js小程序逻辑文件
2．app.json小程序公共设置文件
app.json作为全局配置文件，可以设置5个功能：配置页面路径、配置窗口表现、配置标签导航、配置网络超时和配置debug模式，如图1.31所示。
图1.31 app.json功能
① 配置页面路径，app.json定义一个数组存放多个页面的访问路径，这是进行页面访问的必要条件，如果没有配置页面访问路径，页面被访问时就会报错；在这里定义页面访问路径后，微信小程序可以在页面文件夹下创建相应名称的文件夹及文件，免去手动添加文件夹和文件的烦琐，如图1.32所示。
图1.32 自动创建页面
② 配置窗口表现，用于配置小程序的状态栏、导航条、标题、窗口背景色，可以设置导航条背景色（navigationBarBackgroundColor）、导航条文字（navigationBarTitleText）及导航条文字颜色（navigationBarTextStyle），还可以设置窗口是否支持下拉刷新（enablePullDownRefresh），默认值是不支持下拉刷新的，设置窗口的背景色（backgroundColor）、下拉背景字体或文本样式（backgroundTextStyle），如图1.33所示。
图1.33 窗口表现
③ 配置标签导航，标签导航是众多移动App软件均会采用的一种导航方式，微信小程序同样可以实现这样的效果，如图1.34所示。
图1.34 猫眼电影App标签导航
那么，怎么制作标签导航呢？需要在app.json中配置tabBar属性。tabBar是一个对象，可以配置标签导航文字默认颜色、选中颜色、标签导航背景色及上边框颜色，上边框颜色可以配置black、white两种颜色。标签导航存放到list数组中，有一个标签导航就在list中配置标签导航，list中的每个对象对应一个标签导航，每个对象中可以配置标签导航的路径、导航名称、默认图标及选中图标，如图1.35所示。
图1.35 猫眼电影微信小程序标签导航配置
④ 配置网络超时，可以配置网络请求、文件上传及文件下载时最长的请求时间，超过这个时间，不再允许请求。
⑤ 配置debug模式，用于方便微信小程序开发者调试开发程序，如图1.36和图1.37所示对比没有开启debug和开启debug模式的调试信息。
图1.36 没有开启debug模式
图1.37 开启debug模式
从图1.36和图1.37可以看出，开启debug模式，可以看到每一步的调用情况和访问哪些路径及错误信息，这样更加方便开发者进行调试工作。
3．app.wxss小程序公共样式文件
app.wxss文件对CSS样式进行了扩展。它的使用方式与CSS的使用方式一样，类选择器和行内样式的写法兼容大部分CSS样式，有一些CSS样式在这里是不起作用的，同时它还扩展了CSS样式，形成独立风格的样式文件，是针对所有页面定义的一个全局样式。只要页面有全局样式中的类，就可以渲染全局样式中的效果，但如果页面又重新定义了这个类样式，则会把全局样式的覆盖掉，使用自己的样式，如图1.38所示全局样式。
图1.38 app.wxss 小程序公共样式文件
除了app.wxs提供的默认全局样式，用户还可以自行定义一些全局样式。这样既方便每个页面的使用，又不用在每个页面都定义一次，达到一次定义，其他页面直接引用的效果。
1.3.2 工具类文件
在微信小程序框架目录中有一个utils文件夹，用来存放工具类的函数，例如日期格式化函数、时间格式化函数等常用函数。定义完这些函数后，要通过module.exports将定义的函数名称进行注册，这样在其他的页面才可以使用，如图1.39所示时间格式化工具类文件。
图1.39 utils.js工具类文件
1.3.3 框架页面文件
一个小程序框架页面文件由4个文件组成，分别是．js页面逻辑、.json页面配置、.wxml页面结构、.wxss页面样式表文件。微信小程序的框架页面文件都是放置在pages文件夹下的，如图1.40所示。
图1.40 页面文件
每个页面都有一个独立的文件夹。就像logs文件夹，它的下面又放置4个文件：logs.js负责进行业务路径处理；logs.json负责进行页面的配置，可覆盖全局app.json配置；logs.wxml是页面结构，负责渲染页面；logs.wxss是针对logs.wxml页面的样式文件。