UNI-APP中条件注释 实现跨段兼容、导航跳转 和 传参、组件创建使用和生命周期函数

一、UNI-APP中条件注释实现跨段兼容

1、条件注释中相应平台所对应的参数

		①平台：5+APP 				值：APP-PLUS
		②平台：H5 					值：H5
		③平台：微信小程序 			值：MP-WEIXIN
		④平台：支付宝小程序 			值：MP-ALIPAY
		⑤平台：百度小程序 			值：MP-BAIDU
		⑥平台：头条小程序 			值：MP-BAIDU
		⑦平台：QQ小程序 				值：MP-QQ 目前仅cli支持
		⑧平台：微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序 值：MP

2、写法：以 #ifdef 加平台标识<!-- #ifdef H5 --> 开头，以 #endif 结尾 <!-- #endif -->

	<!-- #ifdef H5 -->
		<view>我只希望在H5页面中显示</view>
	<!-- #endif -->
		
		<!-- #ifdef  MP-WEIXIN -->
			<view>我只希望在微信小程序页面中显示</view>
		<!-- #endif -->
		
		/* H5中的样式 */
		 /* #ifdef H5 */
		view {
    
			color: hotpink;
		}
		 /* #endif */
		
		
		/* 微信小程序中的样式 */
		/* #ifdef MP-WEIXIN */
		view {
    
			color: blue;
		}
		/* #endif */
		

二、UNI-APP中两种方式 导航跳转 和 传参

1、声明式导航
（1）、跳转后可以返回上一页面 传参 ?id=88 ?id=88&age=19 传多个参数

<navigator url="/pages/detail/detail?id=88&age=19"> 跳转至详情页</navigator>

（2）、跳转后上一页面被卸载了open-type="switchTab"

<navigator url="/pages/message/message" open-type="switchTab"> switchTab跳转至信息页</navigator>

（3）、跳转后上一页面被卸载了open-type="redirect"

<navigator url="/pages/detail/detail" open-type="redirect"> redirect跳转至详情页</navigator>

2、编程式导航
（1）、设置跳转按钮

<button @click="goDetail">跳转至详情页</button>
<button @click="goMessage">跳转至信息页</button>
<button type="primary" @click="redirectDetail">跳转至信息页并关闭当前页面</button>

（2）、对应的跳转函数

methods: {
    
			// 跳转至详情页
			goDetail() {
    
				uni.navigateTo({
    
					url:"/pages/detail/detail"
				})
			},
						
				// 跳转至信息页，跳转后上一页面被卸载
				goMessage() {
    
					uni.switchTab({
    
						url:"/pages/message/message"
					})
				},
				
				redirectDetail() {
    
					uni.redirectTo({
    
						url:"/pages/detail/detail"
					})
				}
			}

3、传参
（1）、设置相应的传参 ?id=88 传多个参数用&连接 ?id=88&age=19

<navigator url="/pages/detail/detail?id=88&age=19"> 跳转至详情页</navigator>

（2）、在详情页接受传过来的参数

		// 接受传过来的参数
			onLoad(options) {
    
				console.log(options)
			},

三、组件的 创建使用和组件的 生命周期函数

1、先创建一个 组件test，在index页面中写入 test组件

		<test v-if="flag"></test>
		//在test组件页面中的代码

(1)、在实例初始化之后被调用 beforeCreate

		// 在实例初始化之后被调用 beforeCreate
			beforeCreate() {
    
				console.log('实例初始化之后被调用')
				console.log(this.num)
			},

(2)、在实例创建完成后被立即调用 created 主要用于初始化一些数据
//

		// 在实例创建完成后被立即调用 created 主要用于初始化一些数据
		created() {
    
			console.log('实例创建完成后被立即调用')
			console.log(this.num)
			this.intId = setInterval(()=>{
    
				console.log('执行定时器')
			},1000)
		},

(3)、在挂载开始之前被调用 beforeMount

// 在挂载开始之前被调用 beforeMount
	beforeMount() {
    
		console.log('beforemount 在挂载开始之前被调用',document.getElementById('myView'))
		// console.log(this.num)
	},

(4)、挂载到实例上去之后调用 mounted 操作DOM

// 挂载到实例上去之后调用 mounted 操作DOM
	mounted() {
    
		console.log('mounted 挂载到实例上去之后调用',document.getElementById('myView'))
	},

(5)、组件销毁了就执行

	// 组件销毁了就执行
	destroyed() {
    
		console.log('组件销毁了')
		// 清楚
		clearInterval(this.intId)
	}

(6)、设置一个按钮取反

checkTest() {
    
			// 取反
			this.flag = !this.flag
		}