uni-app 生命周期、语法
1. 前言
2. 什么是生命周期
2.1 生命周期分类
2.2 生命周期函数
3. 生命周期函数汇总
3.1 应用生命周期
那应用什么时候会被真正销毁呢？
当应用进入后台超过一定时间，或者系统资源占用过高，应用才会被真正的销毁。再次打开就需要重新初始化启动应用。
3.2 页面生命周期
| 函数名 | 说明 | 支持平台 |
|---|---|---|
| onLoad | 页面加载时触发，一个页面只会调用一次。可以传递参数，参数说明查看示例 3.2.1 | 所有 |
| onShow | 页面显示时触发，每次打开页面都会调用一次 | 所有 |
| onReady | 页面初次渲染完成后触发，一个页面只会调用一次 | 所有 |
| onHide | 页面隐藏时触发，每次隐藏页面都会被触发 | 所有 |
| onUnload | 页面卸载时触发 | 所有 |
| onResize | 页面每次窗口尺寸变化时会被触发， | App、微信小程序 |
| onPullDownRefresh | 用户下拉页面时触发，一般用于页面下拉刷新，查看实例 3.2.2 | 所有 |
| onReachBottom | 页面上拉滚动触底时触发 | 所有 |
| onTabItemTap | 点击底部 tab 栏时触发，参数为 Object，参数说明查看实例 3.2.3 | 微信小程序、百度小程序、H5、App |
| onShareAppMessage | 点击右上角分享时触发 | 微信小程序、百度小程序、字节跳动小程序、支付宝小程序 |
| onPageScroll | 页面滚动时触发，只监听页面垂直滚动 | 所有 |
| onNavigationBarButtonTap | 监听原生标题栏按钮点击事件，参数说明查看实例 3.2.4 | App、H5 |
| onBackPress | 页面返回时触发，查看实例 3.2.5 | App、H5 |
| onNavigationBarSearchInputChanged | 监听原生标题栏搜索输入框输入内容变化事件 | App、H5 |
| onNavigationBarSearchInputConfirmed | 监听原生标题栏搜索输入框搜索事件 | App、H5 |
| onNavigationBarSearchInputClicked | 监听原生标题栏搜索输入框点击事件 | App、H5 |
3.2.1 onLoad 参数说明
//index.vue
//跳转语句，并在跳转链接上面加上要传递的数据
uni.relaunch({
url: 'test?name=我是首页的数据'
});
//me.vue
export default {
//options参数就是上个页面传递过来的数据
onLoad: function (options) {
console.log(options.name);
}
}
//打印出来的结果
我是首页的数据
3.2.2 onPullDownRefresh 函数
普通页面下拉不会触发 onPullDownRefresh 函数，要先在 pages.json 里面，找到当前页面的 pages 节点，并在 style 选项中将 enablePullDownRefresh 设置为 true，下拉页面才可以触发 onPullDownRefresh 函数。
下面来看一下实例，比如我们想开启首页（index.vue）的下拉动作。
实例：
//pages.json
{
"path": "pages/index/index.vue",
"style": {
"enablePullDownRefresh": true
}
}
3.2.3 onTabItemTap 参数说明
实例：
export default {
onTabItemTap(options) {
console.log('被点击tabItem的序号index:' + options.index)
console.log('被点击tabItem的页面路径pagePath:' + options.pagePath)
console.log('被点击tabItem的按钮文字text:' + options.text)
}
}
注意以下几点：
3.2.4 onNavigationBarButtonTap 参数说明
实例：
export default {
onNavigationBarButtonTap(options) {
console.log('index:' + options.index)
}
}
3.2.5 onBackPress 参数说明
返回结果的格式是这样的：event = {from:backbutton、 navigateBack}。
其中 backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack 表示来源是 uni.navigateBack。
实例：
export default {
onBackPress(options) {
console.log('from:' + options.from)
}
}
4. 函数执行顺序
4.1 实例
//App.vue
<script>
export default {
onLaunch: function() {
console.log('应用生命周期onLaunch：应用初始化完成');
},
onShow: function() {
console.log('应用生命周期onShow：应用启动完成')
},
onHide: function() {
console.log('应用生命周期onHide：应用进入到后台状态')
}
}
</script>
//首页index.vue
<template></template>
<script>
export default {
onLoad() {
console.log('页面生命周期onLoad：页面加载')
},
onShow() {
console.log('页面生命周期onShow：页面显示')
},
onReady(){
console.log('页面生命周期onReady：页面初次渲染完成')
},
onHide() {
console.log('页面生命周期onHide：页面隐藏')
},
onUnload() {
console.log('页面生命周期onUnload：页面卸载')
},
onBackPress(){
console.log('页面生命周期onBackPress：页面返回')
},
onShareAppMessage() {
console.log('页面生命周期onShareAppMessage：分享页面')
},
onReachBottom() {
console.log('页面生命周期onReachBottom：上拉页面触底')
},
onPageScroll(){
console.log('页面生命周期onPageScroll：页面滚动')
},
onPullDownRefresh() {
console.log('页面生命周期onPullDownRefresh：下拉页面')
uni.stopPullDownRefresh();
},
onNavigationBarButtonTap(){
console.log('页面生命周期onNavigationBarButtonTap：标题栏按钮点击')
}
}
</script>
打印结果如下：
应用生命周期onLaunch：应用初始化完成
应用生命周期onShow：应用启动完成
页面生命周期onLoad：页面加载
页面生命周期onShow：页面显示
页面生命周期onReady：页面初次渲染完成
4.2 执行顺序总结
4.2.1 应用生命周期执行顺序
4.2.2 页面生命周期执行顺序
5. 小结
本节课程我们主要学习了 uni-app 生命周期。本节课程的重点如下：