第2次课 · 第1章 · 3课时
小程序项目结构与全局配置
1
教学目标
- 掌握小程序项目的目录结构与文件组成
- 理解 app.json 全局配置文件的作用与配置项
- 掌握页面生命周期的各个阶段与回调函数
- 能够创建包含多个页面的项目
2
重点、难点与课时分配
教学重点
项目目录结构、app.json配置、页面生命周期
教学难点
生命周期函数执行时机
课时分配（共 3 学时）
目录结构与配置讲解后立即动手配置多页面项目
3
课件要点
小程序项目目录结构
app.js — 小程序入口逻辑
app.json — 全局配置文件
app.wxss — 全局样式文件
project.config.json — 项目配置
pages/ — 页面目录(每个页面4个文件: js/json/wxml/wxss)
app.json 全局配置
pages — 页面路径列表(第一个为首页)
window — 全局默认窗口表现
tabBar — 底部导航栏配置
networkTimeout — 网络超时时间
debug — 是否开启调试模式
页面生命周期
onLoad — 页面加载时触发(只触发一次)
onShow — 页面显示时触发(每次都触发)
onReady — 页面初次渲染完成(只触发一次)
onHide — 页面隐藏时触发
onUnload — 页面卸载时触发
页面配置 page.json
navigationBarTitleText — 导航栏标题
navigationBarBackgroundColor — 导航栏背景色
enablePullDownRefresh — 是否开启下拉刷新
backgroundColor — 窗口背景色
usingComponents — 自定义组件声明
4
代码示例与讲解
项目目录结构详解
目录结构
目录结构图示
1// 小程序完整项目目录结构
2myproject/
3├── app.js // 小程序入口文件
4├── app.json // 全局配置（页面/窗口/导航）
5├── app.wxss // 全局样式（所有页面共享）
6├── project.config.json // 工具项目配置
7├── sitemap.json // 小程序搜索索引配置
8├── pages/ // 页面目录
9│ ├── index/ // 首页
10│ │ ├── index.wxml // 页面结构模板
11│ │ ├── index.wxss // 页面私有样式
12│ │ ├── index.js // 页面逻辑脚本
13│ │ └── index.json // 页面局部配置
14│ └── logs/ // 日志页
15│ ├── logs.wxml
16│ ├── logs.wxss
17│ ├── logs.js
18│ └── logs.json
19├── utils/ // 工具函数目录
20│ └── util.js // 通用工具方法
21└── images/ // 静态图片资源
22
23// ⚠️ 关键规则
24app.json 的 pages 数组第一个路径 = 首页
小程序项目有三个全局文件：app.js是入口逻辑，app.json是全局配置，app.wxss是全局样式。pages目录下每个页面由4个文件组成：.wxml结构、.wxss样式、.js逻辑、.json配置。注意app.json中pages数组第一个路径就是首页。
app.json 全局配置详解
app.json
配置效果预览
1{
2 "pages": [
3 "pages/index/index",
4 "pages/logs/logs"
5 ],
6
7 "window": {
8 "navigationBarBackgroundColor": "#ffffff",
9 "navigationBarTitleText": "我的小程序",
10 "navigationBarTextStyle": "black",
11 "backgroundColor": "#eeeeee",
12 "backgroundTextStyle": "light",
13 "enablePullDownRefresh": false
14 },
15
16 "tabBar": {
17 "color": "#999",
18 "selectedColor": "#07c160",
19 "backgroundColor": "#fff",
20 "list": [
21 {
22 "pagePath": "pages/index/index",
23 "text": "首页",
24 "iconPath": "images/home.png",
25 "selectedIconPath": "images/home-active.png"
26 },
27 {
28 "pagePath": "pages/logs/logs",
29 "text": "日志",
30 "iconPath": "images/log.png",
31 "selectedIconPath": "images/log-active.png"
32 }
33 ]
34 },
35
36 "style": "v2"
37}
app.json有三个核心配置节点：pages定义页面路径列表，第一个元素就是首页；window配置导航栏颜色、标题文字、窗口背景等全局窗口样式；tabBar配置底部导航栏，list数组最少2项最多5项，每项需要pagePath、text和iconPath。tabBar的icon图片建议尺寸81×81px，不支持网络图片。
页面生命周期函数
index.js
生命周期流程图
1// 页面生命周期函数执行顺序
2
3Page({
4
5 // ① 页面加载时触发（只触发一次）
6 onLoad(options) {
7 console.log('onLoad 页面加载')
8 console.log('接收参数:', options)
9 // 适合：初始化数据、接收页面参数
10 },
11
12 // ② 页面显示时触发（每次都触发）
13 onShow() {
14 console.log('onShow 页面显示')
15 // 适合：刷新数据、恢复状态
16 },
17
18 // ③ 页面初次渲染完成（只触发一次）
19 onReady() {
20 console.log('onReady 页面就绪')
21 // 适合：获取节点信息
22 },
23
24 // ④ 页面隐藏时触发
25 onHide() {
26 console.log('onHide 页面隐藏')
27 // 触发场景：navigateTo跳转、切后台
28 },
29
30 // ⑤ 页面卸载时触发
31 onUnload() {
32 console.log('onUnload 页面卸载')
33 // 触发场景：redirectTo跳转、navigateBack
34 }
35
36})
37
38// 执行顺序：onLoad → onShow → onReady
39// 退出顺序：onHide（隐藏）或 onUnload（卸载）
页面有5个核心生命周期函数，执行顺序是onLoad → onShow → onReady。onLoad页面加载时触发一次，可接收路由参数；onShow每次页面显示都触发，适合刷新数据；onReady初次渲染完成触发一次。页面退出时，onHide在页面隐藏时触发（如navigateTo跳转），onUnload在页面卸载时触发（如redirectTo跳转）。
页面配置 page.json
index.json
配置覆盖效果
1// app.json 中的 window 全局配置
2{
3 "window": {
4 "navigationBarTitleText": "全局标题",
5 "navigationBarBackgroundColor": "#ffffff",
6 "navigationBarTextStyle": "black",
7 "enablePullDownRefresh": false
8 }
9}
10
11// pages/index/index.json 页面级配置
12{
13 "navigationBarTitleText": "首页",
14 "navigationBarBackgroundColor": "#07c160",
15 "enablePullDownRefresh": true,
16 "backgroundColor": "#f5f5f5",
17 "usingComponents": {}
18}
19
20// ⚠️ 覆盖规则
21页面配置 会覆盖 app.json window 中的同名配置
22页面json无需写window层级，直接写属性即可
23
24// 常用页面配置项
25navigationBarTitleText // 导航栏标题
26navigationBarBackgroundColor // 导航栏背景色
27enablePullDownRefresh // 是否开启下拉刷新
28usingComponents // 页面自定义组件
页面配置index.json会覆盖app.json中window的同名配置。注意页面json中不需要写window这一层，直接写属性即可。比如app.json全局标题是"全局标题"，但index.json设置了"首页"，那首页导航栏显示的就是"首页"。同样导航栏背景色从白色变为绿色，下拉刷新从false变为true。
app.json 全局配置详解
app.json
配置效果
1// app.json 完整配置示例
2{
3 "pages": [
4 "pages/index/index",
5 "pages/logs/logs"
6 ],
7 "window": {
8 "navigationBarBackgroundColor": "#07C160",
9 "navigationBarTitleText": "我的小程序",
10 "navigationBarTextStyle": "white",
11 "backgroundColor": "#f5f5f5"
12 },
13 "tabBar": {
14 "color": "#999",
15 "selectedColor": "#07C160",
16 "list": [...]
17 }
18}
app.json是小程序最重要的配置文件。pages定义页面路径列表，第一个为首页；window配置导航栏颜色、标题文字等全局样式；tabBar配置底部导航栏。修改app.json后保存，开发者工具会自动编译生效。
页面级配置与优先级
页面配置
配置优先级
1// 页面级配置 index.json
2{
3 "navigationBarTitleText": "首页",
4 "enablePullDownRefresh": true
5}
6
7// 配置优先级规则
8页面.json > app.json 的 window 配置
9页面级配置会覆盖全局配置
10
11// 常用页面配置项
12navigationBarTitleText // 导航栏标题
13enablePullDownRefresh // 下拉刷新
14disableScroll // 禁止页面滚动
15usingComponents // 自定义组件
页面级配置的优先级高于全局配置。在页面的.json文件中设置的navigationTitleText等属性，会覆盖app.json中window的对应配置。常用配置项包括导航栏标题、下拉刷新开关、自定义组件声明等。
app.json 全局配置详解
app.json
配置效果
1// app.json 完整配置示例
2{
3 "pages": [
4 "pages/index/index",
5 "pages/logs/logs"
6 ],
7 "window": {
8 "navigationBarBackgroundColor": "#07C160",
9 "navigationBarTitleText": "我的小程序",
10 "navigationBarTextStyle": "white"
11 },
12 "tabBar": {
13 "color": "#999",
14 "selectedColor": "#07C160"
15 }
16}
app.json是小程序最重要的配置文件。pages定义页面路径列表，第一个为首页；window配置导航栏颜色、标题等全局样式；tabBar配置底部导航栏。修改app.json后保存，开发者工具会自动编译生效。
页面级配置与优先级
页面配置
配置优先级
1// 页面级配置 index.json
2{
3 "navigationBarTitleText": "首页",
4 "enablePullDownRefresh": true
5}
6
7// 配置优先级规则
8页面.json > app.json 的 window 配置
9页面级配置会覆盖全局配置
10
11// 常用页面配置项
12navigationBarTitleText // 导航栏标题
13enablePullDownRefresh // 下拉刷新
14disableScroll // 禁止页面滚动
15usingComponents // 自定义组件
页面级配置的优先级高于全局配置。在页面的.json文件中设置的navigationTitleText等属性，会覆盖app.json中window的对应配置。常用配置项包括导航栏标题、下拉刷新开关、自定义组件声明等。
6
课堂视频
第2次课 · 小程序项目结构与全局配置
本次课教学视频请在课堂现场观看
视频文件较大未随本站发布；如需回看，请向任课教师索取或在课程群下载。
7
课后实践
基础
创建3页面项目
创建包含首页、关于页、设置页的小程序项目，配置 app.json 的 pages 和 window
进阶
生命周期调试
在每个生命周期函数中添加 console.log，观察页面跳转时各函数的执行顺序
挑战
自定义导航栏
通过 navigationStyle:"custom" 关闭原生导航栏，用 WXSS 自行实现带渐变背景的导航栏，并处理不同机型的状态栏高度适配
8
本课小结
项目目录结构详解
app.json 全局配置详解
页面生命周期函数
页面配置 page.json
页面级配置与优先级