uni的生命周期

目录

一 点睛

1 应用生命周期

2 页面声明周期

二 应用生命周期实战

1 修改 App.vue

2 观察控制台打印

三 页面声明周期实战

1 修改 index.vue

2 修改路由 pages.json

3 效果

---

一 点睛

1 应用生命周期

生命周期的概念：一个对象从创建、运行、销毁的整个过程被称为称为生命周期。

生命周期函数：在生命周期中每个阶段会伴随着某个函数的触发，这些函数被称为生命周期函数。

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onUniNViewMessage	当 uni-app 报错时触发

2 页面声明周期

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），不会多次触发。
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面，会被触发多次。
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发，不会多次触发。
onHide	监听页面隐藏
onUnload	监听页面卸载

二 应用生命周期实战

1 修改 App.vue

<script>
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            // 构造出现了异常
            // consol.log('App Show')
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        },
        onError: function(err) {
            console.log('出现异常了', err)
        }
    }
</script>

<style>
    /*每个页面公共css，它是全局样式 */
    .box1 {
        background: pink;
    }
</style>

2 观察控制台打印

三 页面声明周期实战

1 修改 index.vue

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			console.log('页面加载了')
		},
		onShow() {
			console.log('页面显示了')
		},
		onReady() {
			console.log('页面初次渲染完成了')
		},
		onHide(){
			console.log('页面隐藏了')
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

2 修改路由 pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index"
		},
		{
			"path":"pages/home/home"
		},
		{
			"path": "pages/uni-style/uni-style"
		},
		{
			"path": "pages/message/message",
			"style":{
				"navigationBarTitleText":"信息页",
				"navigationBarBackgroundColor":"#007AFF",
				"h5":{
					"pullToRefresh":{
						"color":"#7D26CD"
					}
				}
			}
		},
		{
			"path": "pages/contact/contact"
		},
		{
			"path": "pages/detail/detail"
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "绿帽子",
		"navigationBarBackgroundColor": "#7FFF00",
		"backgroundColor": "#7CCD7C",
		"enablePullDownRefresh": true,
		"backgroundTextStyle":"light"
	},
	"tabBar":{
		"color":"#F0AD4E",
		"selectedColor":"#4CD964",
		"backgroundColor":"#007AFF",
		"borderStyle":"black",
		"list":[
			{
				"text":"首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/tabs/1237644.png",
				"selectedIconPath":"static/tabs/1237719.png"
			},
			{
				"text":"信息页",
				"pagePath":"pages/message/message",
				"iconPath":"static/tabs/1246271.png",
				"selectedIconPath":"static/tabs/1262419.png"
			},
			{
				"text":"我们",
				"pagePath":"pages/contact/contact",
				"iconPath":"static/tabs/1262419.png",
				"selectedIconPath":"static/tabs/1289167.png"
			}
		]
	},
	"condition":{
		"current":0,
		"list":[
			{
				"name":"详情页",
				"path":"pages/detail/detail",
				"query":"id=80"
			}
		]
	}
}

3 效果