uniapp 生命周期

谁借莪１个温暖的怀抱￠ 2021-07-24 23:36 510阅读 0赞

应用生命周期函数
    监听整个应用,在App.vue中
    
    onLaunch 	当uni-app 初始化完成时触发（全局只触发一次）
    onShow 	    当 uni-app 启动，只要应用消失就会触发(如切换其他应用、按了home键等)
    onHide 	    当 uni-app ，只要应用消失就会触发(如切换其他应用、按了home键等)
    onError 	当 uni-app 报错时触发
    
    页面生命周期函数
    
    onLoad 	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）,触发一次
    onShow 	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 		
    onReady 	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 	，触发一次	
    onHide 	监听页面隐藏 		
    onUnload 	监听页面卸载 		
    onResize 	监听窗口尺寸变化   App和小程序

[应用生命周期和页面生命周期][Link 1]

代码示例:  
**App.vue:**

**其他页面：**

<template>
    	<view>
    		<view class='box'>
    			{ { msg}}
    		</view>
    		<text class='iconfont icon-shipin '></text>
    		<text class='iconfont'></text>
    		<text v-if="true" v-html="hhh">wwww</text>
    		<button type="primary" @click="get">按钮</button>
    	</view>
    </template>
    
    <script>
    export default{ 
    	data()
    	{ 
    		return{ 
    			msg:'数据',
    			hhh:'ww'
    		}
    	},
    	methods:{ 
    		get()
    		{ 
    			console.log('gg')
    		}
    	},
    	onLoad(option)
    	{ 
    		console.log('页面加载')
    	},
    	onShow()
    	{ 
    		console.log('页面显示')
    	},
    	onReady()
    	{ 
    		console.log('页面初次渲染完成')
    	},
    	onHide()
    	{ 
    		console.log('页面隐藏');
    	},
    	onUnload()
    	{ 
    		console.log('页面销毁')
    	}
    }
    </script>
    
    <style scoped>
    	@import url("../css/a.css");
    	.box{ 
    		height: 375rpx;
    		width: 375rpx;
    		background-color: #4CD964;
    	}
    	.box1{ 
    		background-color: #007AFF;
    	}
    </style>

[Link 1]: https://uniapp.dcloud.io/frame?id=%E5%BA%94%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F