7.1
生命周期介绍
1.uni-app框架的生命周期结合了vue和微信小程序的生命周期
2.全局的app中使用onlaunch表示启动应用时
3.页面中使用onload或者onshow分别表示页面加载完毕时和页面显示时
4.组件中使用mounted组件挂载完毕时

第一步:首先在文件app.vue中键入命令

onLaunch: function() {
	console.log('App Launch 应用启动')
		//其实这里只键入了“应用启动”四个字
		},
		// 应用被触发了

然后在index.vue中的export模块内键入命令

onLoad(){
			console.log("页面加载完毕")
		}

然后在运行过程中可以看到先显示“App Launch 应用启动”之后显示“页面加载完毕”
仍然是如此操作,实验第二个生命周期,onshow,仍然是如此同理
但是在第三个实验的时候,我们可以试一试在插件上挂载生命周期,就会发现能够成功运行

<script>
	export default {
		onLoad(){
			console.log("my-form onLoad");
		},
		mounted() {
			console.log("myform mounted");
		}

	}
</script>

7.2

完整的生命周期
onlaunch 当uni-app初始化完成时触发(全局只触发一次)
onShow 当uni-app启动,从后台进入前台时显示
onHide 当uni-app从前台进入后台时显示
onError 当uni-app报错时触发
onUniNViewMessage 对nuve页面发送的数据进行监听

页面生命周期
onload 监听页面加载,其参数为上个页面传递的数据,参数类型为PObject(用于页面传参)
onShow 监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成,注意如果渲染速度快,会在页面进入动画完成前触发
onHIide 监听页面隐藏
onUnload 监听页面卸载
onResize 监听窗口尺寸变化
onPullDownRefresh 监听用户下拉动作,一般用于下拉刷新
onReachBotton 页面上啦触及事件的处理函数
具体详见 https://uniapp.dcloud.io/tutorial/page.html#lifecycle

生命周期就几个常用的

Logo

前往低代码交流专区

更多推荐