uni-app生命周期随记

最新推荐文章于 2024-05-14 20:48:01 发布

原创最新推荐文章于 2024-05-14 20:48:01 发布 · 783 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

uni-app 专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了小程序项目的生命周期，包括项目初始化、启动、显示、隐藏及错误处理等关键阶段，并深入探讨了页面级生命周期，如加载、显示、隐藏、卸载等过程，为开发者提供了全面的生命周期管理指南。

部署运行你感兴趣的模型镜像

项目的生命周期，定义在根组件 App.vue 的 script标签下

<script>
	export default {
		// 1.项目初始化完成, 全局只触发一次
		onLaunch: function() {
			console.log('App Launch')
		},
		// 2.项目启动 或 后台进入前台
		onShow: function() {
			console.log('App Show')
		},
		// 3.前台进入后台
		onHide: function() {
			console.log('App Hide')
		},
		// 4.项目报错时触发
		onError: function(err) {
			console.log('报错', err)
		}
	}
</script>

页面的生命周期，定义在 pages 文件夹下的 .vue文件（页面文件）的 script标签下

<script>
	export default {
		data() {
			return {
			
			}
		},
		// 1.页面加载时， 接收跳转页面时携带的页面参数
		onLoad(options) {
			console.log('页面加载了', options)
		},
		// 2.监听页面显示
		onShow() {
			console.log('页面出现了')
		},
		// 3.页面渲染完成
		onReady() {
			console.log('页面渲染完成')
		},
		// 4.监听页面隐藏
		onHide() {
			console.log('页面隐藏了')
		},
		// 5.页面卸载了
		onUnload() {
			console.log('页面被卸载了')
		},
		methods: {

		}
	}