一 应用生命周期
| 函数名 | 说明 | 应用场景 |
|---|---|---|
| onLaunch | 当 uni-app 应用初始化完成时触发，全局只触发一次 | 一般用于查看用户是否授权、获取用户的设备信息等 |
| onShow | 当应用启动，或从后台进入前台显示时触发，可以触发多次 | 一般用于重新进入应用的消息提示或者数据刷新 |
| onHide | 监听应用从前台进入后台 | 一般用于退出应用时的消息提示 |
| onError | 应用报错时被触发 | 用于监测并处理错误 |
前台、后台定义：
当我们离开应用时，应用不会被直接销毁，而是进入了后台。当我们再次进入到应用时，应用就会从后台进入前台。
那应用什么时候会被真正销毁呢？
当应用进入后台超过一定时间，或者系统资源占用过高，应用才会被真正的销毁。再次打开就需要重新初始化启动应用。
二 页面生命周期
| 函数名 | 说明 | 支持平台 |
|---|---|---|
| onLoad | 页面加载时触发，一个页面只会调用一次。可以传递参数 | 所有 |
| onShow | 页面显示时触发，每次打开页面都会调用一次 | 所有 |
| onReady | 页面初次渲染完成后触发，一个页面只会调用一次 | 所有 |
| onHide | 页面隐藏时触发，每次隐藏页面都会被触发 | 所有 |
| onUnload | 页面卸载时触发 | 所有 |
| onResize | 页面每次窗口尺寸变化时会被触发 | App、微信小程序 |
| onPullDownRefresh | 用户下拉页面时触发，一般用于页面下拉刷新 | 所有 |
| onReachBottom | 页面上拉滚动触底时触发 | 所有 |
| onTabItemTap | 点击底部 tab 栏时触发，参数为 Object | 微信小程序、百度小程序、H5、App |
| onShareAppMessage | 点击右上角分享时触发 | 微信小程序、百度小程序、字节跳动小程序、支付宝小程序 |
| onPageScroll | 页面滚动时触发，只监听页面垂直滚动 | 所有 |
| onNavigationBarButtonTap | 监听原生标题栏按钮点击事件 | App、H5 |
| onBackPress | 页面返回时触发 | App、H5 |
| onNavigationBarSearchInputChanged | 监听原生标题栏搜索输入框输入内容变化事件 | App、H5 |
| onNavigationBarSearchInputConfirmed | 监听原生标题栏搜索输入框搜索事件 | App、H5 |
| onNavigationBarSearchInputClicked | 监听原生标题栏搜索输入框点击事件 | App、H5 |
说明
1 onLoad 参数说明
页面生命周期函数 onLoad，是页面最先执行的生命周期函数，如果从上个页面跳转到本页面，可以通过参数option 传递上个页面的数据。
//index.vue
//跳转语句，并在跳转链接上面加上要传递的数据
uni.reLaunch({
url: 'test?name=我是首页的数据'
});
//me.vue
export default {
//options参数就是上个页面传递过来的数据
onLoad: function (options) {
console.log(options.name);
}
}
//打印出来的结果
我是首页的数据
2 onPullDownRefresh 函数 用于监听该页面用户下拉页面的动作。
普通页面下拉不会触发 onPullDownRefresh 函数，要先在 pages.json 里面，找到当前页面的 pages 节点，并在style 选项中将 enablePullDownRefresh 设置为 true，下拉页面才可以触发 onPullDownRefresh 函数。
调用完成 onPullDownRefresh 函数后，用 stopPullDownRefresh 函数可以停止当前页面的下拉状态。
//pages.json
{
"path": "pages/index/index.vue",
"style": {
"enablePullDownRefresh": true
}
}
//页面，隐藏下拉状态
export default{
onPullDownRefresh(){
console.log('用户下拉页面时触发')
uni.stopPullDownRefresh()
}
}
3 onTabItemTap 参数说明
| 属性 | 类型 | 说明 |
|---|---|---|
| index | String | 被点击 tabItem 的序号，从 0 开始 |
| pagePath | String | 被点击 tabItem 的页面路径 |
| text | String | 被点击 tabItem 的按钮文字 |
export default {
onTabItemTap(options) {
console.log('被点击tabItem的序号index:' + options.index)
console.log('被点击tabItem的页面路径pagePath:' + options.pagePath)
console.log('被点击tabItem的按钮文字text:' + options.text)
}
}
注意以下几点：
onTabItemTap 常用于点击当前 tabitem，滚动或刷新当前页面。如果是点击不同的 tabitem，一定会触发页面切换。
如果想在 App 端实现点击某个 tabitem 不跳转页面，不能使用 onTabItemTap，可以使用plus.nativeObj.view 放一个区块盖住原先的 tabitem，并拦截点击事件。 在 App 端，从 HBuilderX 1.9 的自定义组件编译模式才开始支持 onTabItemTap。
4 onNavigationBarButtonTap 参数说明
| 属性 | 类型 | 说明 |
|---|---|---|
| index | Number | 原生标题栏按钮数组的下标 |
export default {
onNavigationBarButtonTap(options) {
console.log('index:' + options.index)
}
}
5 onBackPress 参数说明
返回结果的格式是这样的：event = {from:backbutton、 navigateBack}。
其中 backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack 表示来源是 uni.navigateBack。
export default {
onBackPress(options) {
console.log('from:' + options.from)
}
}
三 组件生命周期
| 函数名 | 应用 |
|---|---|
| beforeCreate | 实例初始化之后调用 |
| created | 实例创建完成后调用 |
| beforeMount | 模板编译之前调用 |
| mounted | 模板编译完成调用 |
| beforeUpdate | 数据更新时调用，发生在虚拟 DOM 打补丁之前 |
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子 |
| beforeDestroy | 实例销毁之前调用 |
| destroyed | 实例销毁后调用 |
四 页面生命周期和组件生命周期的执行顺序
页面生命周期函数 onLoad：页面加载
页面生命周期函数 onShow：页面显示
beforeCreate：实例初始化
created：实例创建完成
beforeMount：模板编译之前
mounted：模板编译完成
页面生命周期函数 onReady：页面初次显示
页面生命周期函数 onLoad、onShow 会先运行，接着 Login 组件中的 beforeCreate、created
等组件生命周期函数开始运行。组件加载完成后，页面生命周期函数 onReady 开始运行。
页面生命周期函数 onLoad、onShow 会先运行，接着组件中的 beforeCreate、created 等组件生命周期函数开始运行。组件加载完成后，页面生命周期函数 onReady 开始运行。
像这样比较重复的生命周期函数，我们推荐使用页面生命周期函数，比如：
组件生命周期函数 created 可以替换为页面生命周期中的 onLoad；
组件生命周期函数 mouted 可以替换为页面生命周期中的 onReady。