uniapp 生命周期

应用生命周期函数
监听整个应用,在App.vue中

onLaunch 	当uni-app 初始化完成时触发(全局只触发一次)
onShow 	    当 uni-app 启动,只要应用消失就会触发(如切换其他应用、按了home键等)
onHide 	    当 uni-app ,只要应用消失就会触发(如切换其他应用、按了home键等)
onError 	当 uni-app 报错时触发

页面生命周期函数

onLoad 	监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),触发一次
onShow 	监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 		
onReady 	监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发 	,触发一次	
onHide 	监听页面隐藏 		
onUnload 	监听页面卸载 		
onResize 	监听窗口尺寸变化   App和小程序

应用生命周期和页面生命周期

代码示例:
App.vue:

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		onError:function(err){
			console.log(err);
		}
	}
</script>

<style>
	/*每个页面公共css */
	@import url("./static/iconfont/iconfont.css");
	
</style>

其他页面:

<template>
	<view>
		<view class='box'>
			{{msg}}
		</view>
		<text class='iconfont icon-shipin '></text>
		<text class='iconfont'>&#xe650;</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>

你可能感兴趣的:(uniapp)