uniapp生命周期，路由与页面跳转

uni生命周期函数

应用的生命周期

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

示例代码

<script>
export default {
	//只能在App.vue中监听！
	onLaunch: function() {
		console.log('App Launch');
	},
	onShow: function() {
		console.log('App Show');
	},
	onHide: function() {
		console.log('App Hide');
	}
};
</script>

页面生命周期

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
onShow	监听页面显示
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项
onShareAppMessage	用户点击右上角分享

代码示例

export default {
	onLoad() {
		console.log('页面初始化执行一次 onload')
	},
	onReady() {
		console.log('页面加载完毕 执行一次 onReady')
	},
	onShow() {
		console.log('页面进入执行 执行多次 onShow')
	},
	onHide() {
		console.log('页面进入离开 执行多次 onHide')
	},
	onPullDownRefresh() {
		console.log('用户执行了下拉刷新')
	},
	onTabItemTap() {
		console.log('用户点击了tabbar')
	},
	onShareAppMessage() {
		console.log('用户点击了分享')
		//分享页面的设置
		return {
			title:"",
			path:"",
			imageUrl:""
		}
	}
}

下拉刷新
在pages.json中，在globalStyle属性配置enablePullDownRefresh`，即所有页面都能下拉刷新

"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#007AFF",
		"backgroundColor": "#FFFFFF",
		"enablePullDownRefresh": true //所有页面实现下拉刷新
	}

只在某个页面实现下拉刷新，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor":"#4CD964",
				"enablePullDownRefresh":true  //首页页面下拉刷新
			}
		},
		{
            "path" : "pages/about/about",
            "style" : {
				"navigationBarTitleText":"关于",
				"navigationBarBackgroundColor":"#4CD964"
			}
        },
		{
            "path" : "pages/news/news",
            "style" : {
				"navigationBarTitleText":"新闻",
				"navigationBarBackgroundColor":"#4CD964"
			}
        }
    ]

组件生命周期

函数名	说明
beforeCreate	组件初始化，但数据原生观测 、自定义观测(event\watcher)没生成之前。 未完全创建
created	组件创建后，但还未挂载。 完全创建阶段
beforeMount	组件渲染后，挂载前。 渲染后带挂载
mounted	组件挂载到页面，可用vm.$el访问。 挂载OK
beforeUpdate	虚拟 DOM 重新渲染和打补丁之前。 再次渲染前
updated	组件DOM已经更新。 再次渲染后
activated	keep-alive组件激活时调用。 当前组件被激活：显示
deactivated	keep-alive组件停用时调用。 当前组件隐藏
beforeDestroy	实例销毁之前调用。 实例仍然完全可用。销毁前
destroy	Vue实例销毁后调用

补充：挂载阶段，先渲染组件，然后挂载组件。

在components目录下新建页面test.vue，使用组件。

test.vue文件代码

<template>
	<view>
		<text>我是test组件</text>
		<button type="primary" @click="test">按钮</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		beforeMount() {
			console.log("在挂载开始之前被调用")
		},
		mounted() {
			console.log("挂载到实例上去之后调用");
			this.$nextTick(function(){
				//渲染完毕
				console.log("OK")
			})
		},
		methods: {
			test() {
				
			}
		}
	}
</script>

在index.vue使用组件需要引进test文件，进行注册。
index.vue代码

<template>
	<view class="demo">
		<test></test> <!-- 使用注册test页面标签 -->
	</view>
</template>

<script>
import test from '../../components/test.vue'  //引入文件
export default {
	data(){
		return {}
	}, 
	//注册组件
	components:{
		test
	}
}
</script>

uni-app路由与页面跳转

方式	说明
uni.navigateTo	保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
uni.redirectTo	关闭当前页面，跳转到应用内的某个页面
uni.reLaunch	关闭所有页面，打开到应用内的某个页面
uni.switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.navigateBack	关闭当前页面，返回上一页面或多级页面

uni.navgateTo()
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
从index.vue也就是起始页面跳转到one.vue页面并传递参数

index.vue页面

<template>
	<view class="demo">
		<button type="primary" @click="toPath">toOne</button>
	</view>
</template>

<script>
export default {
	data(){
		return {}
	},
	methods: {
		toPath(){
			/*  
				navigateTo
				跳转时保留老页面,一般用于需要返回
			*/
			uni.navigateTo({
				url:"../one/one?name:lisa"
			})
		}
	}
}
</script>

one.vue页面

<template>
	<view>
		<text>我是one页面</text>
		<button type="primary" @click="goBack">返回</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad(option) {
			//路由获取参数
			console.log(option)
		},
		methods: {
			goBack(){
				uni.navigateBack() //直接返回上一级
			}
		}
	}
</script>

uni.redirectTo()
关闭当前页面，跳转到应用内的某个页面
从one.vue页面跳到two.vue页面，再从two.vue页面跳到one.vue页面

<template>
	<view>
		<text>我是one页面</text>
		<button type="primary" @click="toPath">toTwo</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		}
		methods: {
			toPath(){
				//跳转时关闭当前页面，可以任意跳转
				uni.redirectTo({
					url:"../two/two"
				})
			}
		}
	}
</script>

<template>
	<view>
		<test>我是two页面</test>
		<button type="primary" @click="toPath">toOne</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toPath() {
				//跳转时关闭当前页面，可以任意跳转
				uni.redirectTo({
					url:"../one/one"
				})
			}
		}
	}
</script>

uni.switchTab
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
注：使用switchTab只能跳转tabBarlist列表里的页面

"tabBar": {
		"color":"#000000",
		"selectedColor":"#007AFF",  //选中时的文字颜色
		"backgroundColor":"#FFFFFF",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/image/person.png", //图片路径
				"selectedIconPath": "static/image/personH.png", //选中时的图片路径
				"text": "首页"
			},
			{
				"pagePath": "pages/about/about",
				"iconPath": "static/image/person.png",
				"selectedIconPath": "static/image/personH.png",
				"text": "关于"
			},
			{
				"pagePath": "pages/news/news",
				"iconPath": "static/image/person.png",
				"selectedIconPath": "static/image/personH.png",
				"text": "新闻"
			}
		]
	}

<template>
	<view class="demo">
		<button type="primary" @click="toPath">toAbout</button>
	</view>
</template>

<script>
export default {
	data(){
		return {}
	},
	methods: {
		toPath(){
			//只能跳转pages.json中tabBar里的页面
			uni.switchTab({
				url:"../about/about"
			})
		}
	}
}
</script>

uni.navigateBack
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

//注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法不会

// 此处是one页面
uni.navigateTo({
    url: 'two?id=1'
});

// 此处是two页面
uni.navigateTo({
    url: 'three?id=1'
});

// 在three页面内返回one页面
uni.navigateBack({
    delta: 2
});

需注意：

navigateTo, redirectTo 只能打开非 tabBar 页面。
navigateTo 跳转时，调用该方法的页面会被加入堆栈，而redirectTo方法不会。
switchTab 只能打开 tabBar 页面。
不能在 App.vue 里面进行页面跳转。