Condition annotation in uni-app realizes cross segment compatibility, navigation jump and parameter transfer, component creation and use, and life cycle function

One 、UNI-APP Realize cross segment compatibility through conditional annotation

1、 The parameters corresponding to the corresponding platform in the condition annotation

		① platform ：5+APP 				 value ：APP-PLUS
		② platform ：H5 					 value ：H5
		③ platform ： Wechat applet  			 value ：MP-WEIXIN
		④ platform ： Alipay applet  			 value ：MP-ALIPAY
		⑤ platform ： Baidu applet  			 value ：MP-BAIDU
		⑥ platform ： Headline widget  			 value ：MP-BAIDU
		⑦ platform ：QQ Applet  				 value ：MP-QQ  At present, only cli Support 
		⑧ platform ： Wechat applet / Alipay applet / Baidu applet / Headline widget /QQ Applet   value ：MP

2、 How to write it ： With #ifdef Add platform logo <!-- #ifdef H5 --> start , With #endif ending <!-- #endif -->

	<!-- #ifdef H5 -->
		<view> I just hope that in H5 The page shows </view>
	<!-- #endif -->
		
		<!-- #ifdef  MP-WEIXIN -->
			<view> I just want to display in the wechat applet page </view>
		<!-- #endif -->
		
		/* H5 Style in  */
		 /* #ifdef H5 */
		view {
    
			color: hotpink;
		}
		 /* #endif */
		
		
		/*  Style in wechat applet  */
		/* #ifdef MP-WEIXIN */
		view {
    
			color: blue;
		}
		/* #endif */
		

Two 、UNI-APP In two ways Navigation jump and The ginseng

1、 Declarative navigation
（1）、 You can return to the previous page after jumping The ginseng ?id=88 ?id=88&age=19 Pass multiple parameters

<navigator url="/pages/detail/detail?id=88&age=19">  Go to the details page </navigator>

（2）、 The previous page was unloaded after jump open-type="switchTab"

<navigator url="/pages/message/message" open-type="switchTab"> switchTab Jump to the information page </navigator>

（3）、 The previous page was unloaded after jump open-type="redirect"

<navigator url="/pages/detail/detail" open-type="redirect"> redirect Go to the details page </navigator>

2、 Programming navigation
（1）、 Set the jump button

<button @click="goDetail"> Go to the details page </button>
<button @click="goMessage"> Jump to the information page </button>
<button type="primary" @click="redirectDetail"> Jump to the information page and close the current page </button>

（2）、 Corresponding jump function

methods: {
    
			//  Go to the details page 
			goDetail() {
    
				uni.navigateTo({
    
					url:"/pages/detail/detail"
				})
			},
						
				//  Jump to the information page , The previous page is unloaded after jump 
				goMessage() {
    
					uni.switchTab({
    
						url:"/pages/message/message"
					})
				},
				
				redirectDetail() {
    
					uni.redirectTo({
    
						url:"/pages/detail/detail"
					})
				}
			}

3、 The ginseng
（1）、 Set the corresponding transfer parameters ?id=88 For transmitting multiple parameters & Connect ?id=88&age=19

<navigator url="/pages/detail/detail?id=88&age=19">  Go to the details page </navigator>

（2）、 Accept the passed parameters on the details page

		//  Accept the parameters 
			onLoad(options) {
    
				console.log(options)
			},

3、 ... and 、 Component's Create and use components Life cycle function

1、 So let's create one Components test, stay index Write in page test Components

		<test v-if="flag"></test>
		// stay test Code in the component page 

(1)、 Called after instance initialization beforeCreate

		//  Called after instance initialization  beforeCreate
			beforeCreate() {
    
				console.log(' The instance is called after initialization ')
				console.log(this.num)
			},

(2)、 Called immediately after the instance is created created It is mainly used to initialize some data
//

		//  Called immediately after the instance is created  created  It is mainly used to initialize some data 
		created() {
    
			console.log(' The instance is called immediately after it is created ')
			console.log(this.num)
			this.intId = setInterval(()=>{
    
				console.log(' Execution timer ')
			},1000)
		},

(3)、 Called before the mount begins beforeMount

//  Called before the mount begins  beforeMount
	beforeMount() {
    
		console.log('beforemount  Called before the mount begins ',document.getElementById('myView'))
		// console.log(this.num)
	},

(4)、 When mounted to an instance, it is called mounted operation DOM

//  When mounted to an instance, it is called  mounted  operation DOM
	mounted() {
    
		console.log('mounted  When mounted to an instance, it is called ',document.getElementById('myView'))
	},

(5)、 When the component is destroyed, execute

	//  When the component is destroyed, execute 
	destroyed() {
    
		console.log(' Component destroyed ')
		//  clear 
		clearInterval(this.intId)
	}

(6)、 Set a button to reverse

checkTest() {
    
			//  Take the opposite 
			this.flag = !this.flag
		}