使用全局配置文件app.json
app.json 配置文件
小程序根目录下的
app.json文件用来对微信小程序进行全局配置，它决定了页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
在 app.json 配置文件中，最主要的配置节点是：
-
pages数组：配置小程序的页面路径 -
window对象：用于设置小程序的状态栏、导航条、标题、窗口背景色 -
tabBar对象：配置小程序的tab栏效果
注：全局配置详细文档
一.pages数组的用法
app.json中的pages数组，用来配置小程序的页面路径
- pages 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名 信息。
-
文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json、 .js、 .wxml 和 .wxss 四个文件进行处理。
image.png
自动创建新页面
- 需要新建页面目录 -> 新建页面文件 -> 修改pages数组
- 打开 app.json -> pages 数组节点 -> 新增页面路径并保存 -> 自动创建路径对应的页面
设置默认首页
- 打开 app.json -> pages 数组节点
- 按需调整数组中路径的顺序，即可修改默认首页
注意：
① 数组的第一项代表小程序的初始页面（首页）。
② 小程序中新增/减少页面，都需要对 pages 数组进行修改。
二。window对象
小程序窗口的组成部分
image.png
window节点常用的配置项
image.png
常见的属性配置： 常见的属性配置
1.设置导航栏标题文字内容
-
app.json-->window-->navigationBarTitleText - 将属性值修改即可
2.设置导航栏背景色
-
app.json-->window-->navigationBarBackgroundColor - 将属性值修改为指定的颜色就可以
3.设置导航栏标题颜色
-
app.json-->window-->navigationBarTextStyle - 将属性值修改为指定的颜色就可以
black/white
4.全局开启下拉刷新功能
通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为
-
app.json-->window--> 把enablePullDownRefresh的值设置为 true
5.设置下拉刷新窗口的背景色
当全局开启下拉刷新功能之后，默认的窗口背景为白色
-
app.json->window->backgroundColor
当全局开启下拉刷新功能之后，默认的窗口背景为白色；如果自定义下拉刷新窗口背景色，设置步骤为 :
app.json -> window -> 为 backgroundColor 指定16进制颜色值 #eee
6.设置下拉loading的样式
当全局开启下拉刷新功能之后，默认窗口的loading样式为白色
-
app.json-->window-->backgroundTextStyle
当全局开启下拉刷新功能之后，默认窗口的loading样式为白色，如果要更改loading样式的效果，设置步骤为
7.设置上拉触底的距离
手指在屏幕上的上拉滑动操作，从而加载更多数据的行为
-
app.json-->window-->onReachBottomDistance
注意： 默认距离为50px，如果没有特殊需求，建议使用默认值即可
三 .tabBar - 配置Tab栏
tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换；小程序中通常将其分为底部tabBar和顶部tabBar
注意：tabBar 中，只能配置最少2个、最多5个 tab 页签，当渲染顶部 tabBar 的时候，不显示 icon，只显示文本
注： tabbar 详细文档
image.png
tabBar的组成部分
-
backgroundColor：导航条背景色 -
selectedIconPath：选中时的图片路径 -
borderStyle：tabBar上边框的颜色 -
iconPath：未选中时的图片路径 -
selectedColor：tab上的文字选中时的颜色 -
color：tab上的文字默认（未选中）颜色
image.png
tabBar节点的配置项
1. tabBar 节点的配置项
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| color | HexColor | 是 | . | tab 上的文字默认颜色，仅支持十六进制颜色 |
| selectedColor | HexColor | 是 | . | tab 上的文字选中时的颜色，仅支持十六进制颜色 |
| backgroundColor | HexColor | 是 | . | tab 的背景色，仅支持十六进制颜色 |
| borderStyle | string | 否 | black | tabBar 上边框的颜色， 仅支持 black / white
|
| list | Array | 是 | . | tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab |
| position | string | 否 | bottom | tabBar 的位置，仅支持 bottom/ top
|
| custom | boolean | 否 | false | 自定义 tabBar |
2.list 节点的配置项
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| pagePath | string | 是 | 页面路径，必须在 pages 中先定义 |
| text | string | 是 | tab 上按钮文字 |
| iconPath | string | 否 | 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px |
| selectedIconPath | string | 否 | 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px |
注意：
- 都不支持网络图片
- 当 position 为 top 时，不显示 icon。
使用页面配置文件page.json
页面级别和全局级别配置的关系
小程序中，app.json 中的 window节点，可以全局配置小程序中每个页面的窗口表现；
如果某些小程序页面，想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求；
总结：页面级别配置优先于全局配置生效。
页面配置文件中可选的配置项列表
image.png
注意：页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现。
页面配置文件中可选的配置项列表
image.png
注意：页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现；
小程序的生命周期
生命周期（Life Cycle）是指一个对象从 创建 -> 运行 -> 销毁 的整个阶段，强调的是一个时间段。
生命周期的两种类型
小程序的生命周期
- 小程序的启动，表示生命周期的开始
- 小程序的关闭，表示生命周期的结束
- 中间小程序运行的过程，就是小程序的生命周期
在小程序中，包含两种类型的生命周期：
- 应用生命周期：特指小程序从启动 -> 运行 -> 销毁的过程；
-
页面生命周期：特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程；
其中，页面的生命周期范围较小，应用程序的生命周期范围较大，如图所示:
image.png
什么是生命周期函数
小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行
允许程序员在特定的生命周期时间点上，执行某些特定的操作。例如，页面刚加载的时候，在生命周期函数中自动发起数据请求，获取当前页面的数据；
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。
应用生命周期函数
-
app.js是小程序执行的入口文件，在app.js中必须调用App()函数，且只能调用一次。其中，App()函数是用来注册并执行小程序的。 -
App(Object)函数接收一个Object参数，可以通过这个Object参数，指定小程序的生命周期函数。
app.js代码:
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
// console.log('小程序启动了')
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
// console.log('小程序显示出来了')
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
// console.log('小程序被隐藏到后台了')
},
/**
* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})
image.png
页面生命周期函数
- 每个小程序页面，必须拥有自己的
.js文件，且必须调用Page()函数，否则报错。其中Page()函数用来注册小程序页面。 -
Page(Object)函数接收一个Object参数，可以通过这个Object参数，指定页面的生命周期函数。
页面生命周期.js:
//index.js
//获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: { },
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { },
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { },
/**
* 生命周期函数--监听页面显示
*/
onShow: function () { },
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { },
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { },
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { },
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { },
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
image.png
