uni生命周期、目录结构、路由跳转的学习

一、生命周期

生命周期分为应用生命周期和页面生命周期和组件生命周期

1、应用生命周期
app.vue

export default {
	onLaunch: function(opation) {
		console.log('初始化完成时触发(全局只触发一次)');
		// console.log(opation)
	},
	onShow: function() {
		console.log('uni-app 启动，或从后台进入前台显示');//监听用户进入小程序
	},
	onHide: function() {
		console.log('uni-app 从前台进入后台显示');//监听用户离开小程序
	},
	onError: function() {
		console.log('uni-app 报错时触发')
	}
}

• oLaunch 初始化完成时触发（全局只触发一次）
• onShow 启动，或从后台进入前台显示
• onHide 从前台进入后台
• onError 报错
• onUniNViewMessage 对nvue 页面发送的数据进行监听’

注意：
应用生命周期仅可在App.vue中监听，在其它页面监听无效

2、页面生命周期

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:"pages/index/index",
			imageUrl:"http://www.baidu.com/img/bd_logo1.png  "
		}
	}
	//其余的可以自己写写试试	
}

• onLoad 监听页面加载，参数可获取上个页面的传参
• onShow 监听页面显示。
• onReady 监听页面初次渲染完成
• onHide 监听页面隐藏
• onUnload 监听页面卸载
• onResize 监听窗口尺寸变化 App、微信小程序
• onPullDownRefresh 监听用户下拉动作
• onReachBottom 监听页面滚动到底部
• onTabItemTap 点击tab时触发
• onShareAppMessage 用户点击右上角分享
• onPageScroll 监听页面滚动，参数为Object
• onNavigationBarButtonTap 监听原生标题栏按钮点击事件
• onBackPress 监听页面返回 安卓的物理返回键
• onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件
• onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的搜索按钮时触发。
• onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件

注意：

• 页面生命周期仅在page页面有效，而单独封装的组件中页面周期无效，但是Vue的生命周期依然有效 Vue的生命周期在任何地方都是有效的
  推荐使用uni-app里面的onReady 代替 vue 里面的 mounted
• 推荐使用uni-app里面的onLoad 代替 vue 里面的 created

3、组件生命周期

uni-app组件支持的生命周期，与vue标准组件的生命周期相同，这里没有页面级的onLoad等生命周期。
先在components里面注册，再在你的页面中引用

<template>
	<view class="content">
		<test />  <!-- 调用 -->
	</view>
</template>

<script>
	import test from "../../components/uni-coms/test.vue" //先引入
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		components:{
			test: '' //在注册
		}
	}
</script>

export default {
	data() {
		return {
			say:"hello"
		};
	},
	props:["msg"],
	beforeMount() {
		console.log("在挂载开始之前被调用")
	},
	mounted() {
		console.log("挂载到实例上去之后被调用");
		this.$nextTick(function(){
			//渲染完毕
			console.log("ok");
		})
	},
	methods:{
		test(){
			uni.$emit("testmit",{name:"luce"})
		}
	}	
}

• beforeCreate 在实例初始化之后被调用
• created 在实例创建完成后被立即调用
• beforeMount 在挂载开始之前被调用
• mounted 挂载到实例上去之后调用
• beforeupdate 数据更新时调用
• updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
• beforeDestory 实例销毁之前调用。在这一步，实例仍然完全可用。
• destoryed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

应用生命周期和页面生命周期的区别：

应用生命周期是用于监听整个app或者说整个页面启动或者某些活动状态改变是会使用到的监听函数
而页面生命周期和Vue生命周期可以合并在一起不用的钩子可以在不同的情况下使用在文档中都有相对应的而结实

二、目录结构解析

（我这里创建的是默认模板，所以目录比较少…）

比较详细的目录结构解析

┌─components         uni-app组件目录
│ └─comp-a.vue         可复用的a组件
├─hybrid             存放本地网页的目录
├─platforms          存放各平台专用页面的目录
├─pages            业务页面文件存放的目录
│ ├─index
│ │ └─index.vue         index页面
│ └─list
│ └─list.vue           list页面
├─static              存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录，详见
├─main.js              Vue初始化入口文件
├─App.vue            应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json            配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json             配置页面路由、导航条、选项卡等页面类信息，详见

三、路由跳转

1、uni.navigateTo，跳转时保留老页面，一般用于返回 （组件：navigator open-type=“navigate”/>）

methods:{
	toPath(){
		uni.navigateTo({   //页面跳转路径有层级限制，不能无限制跳转新页面
			url: '../one/one'
		});
	}
}

2.uni.redirectTo 关闭当前页面，跳转新页面（组件：navigator open-type=“redirectTo”/>）

methods:{
	toPath(){
		uni.redirectTo({
			url: '../one/one'
		});
	}
}

3、uni.reLaunch 关闭所有页面跳转（组件：navigator open-type=“reLaunch”/>）

uni.reLaunch({
 	url: 'test?id=1'
});
export default {
	 onLoad: function (option) { 
	 console.log(option.id);
 }}

4、uni.switchTab，tab切换，跳转page.json>tabBar配置过的页面（组件：navigator open-type=“switchTab”/>）
page.json

"tabBar": {
	"borderStyle": "black",
	"backgroundColor": "#fff",
	"color": "#2c2c2c",
	"selectedColor": "#1AA034", 
	"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/img/wechat.png",
			"selectedIconPath": "static/img/wechatactive.png",
			"text": "首页"
		},
		{
			"pagePath": "pages/news/news",
			"iconPath": "static/img/adress.png",
			"selectedIconPath": "static/img/adressactive.png",
			"text": "新闻"
		}
	]
},

index.vue

uni.switchTab({
 	url: '/pages/index/index'
});

5.关闭当前页面，返回上一页面或多级页面，uni.navigateBack（组件：navigator open-type=“navigateBack”/> ）

redirectTo 和 redirectTo结合使用最好哦

methods: {
	toPath(){
		uni.redirectTo({ //跳转到two页面
			url:'../two/two'
		})
	},
	goBack(){  
		uni.navigateBack()  //返回跳转前页面
	}
}