uni-app导航跳转初始

uni-app导航跳转

导航（navigator）是个标签

标签跳转

<navigator url="路径"></navigator> //普通跳转只能调到普通页面
<navigator url="/" open-type="switchTab"></navigator> //加上open-type="switchTab" 跳转到tabbar页面
<navigator url="/" open-type="redirect"></navigator> //加上open-type="redirect" 不能跳转到tabbar页面把页面关闭在重新加载没有返回箭头的，而普通跳转有返回箭头

事件方法跳转

<button @click="goDetail">跳转至详情页</button>
methods:{
goDetail(){
	//uni.navigateTo({})普通跳转
	//uni.switchTab({})跳转tabbar页面关闭其他所有非tabbar页面
	//uni.redirectTo({})只关闭当前页面并跳转
	uni.navigateTo({
		url:"../detail/detail"
	})
}
}

路由跳转传参

传值页面

<navigator url="路径后面加上'?id=80&age=19'" open-type="switchTab"></navigator>

接收值页面

//通过onLoad勾子函数里面的第一个形参接收
onLoad(options){
	console.log(options) //options={id:80,age:19}
}

事件方法的方式跳转也是直接在地址后面加就可以

uni-app条件注释实现跨端兼容

在标签中的跨端兼容

<!-- #ifdef MP-WEIXIN --> 只在微信小程序显示
<view>1111</view>
<!-- #endif -->
<!-- #ifdef H5 -->   只在H5显示
<view>222</view>
<!-- #endif -->

在js中的跨段兼容

methods:{
	onLoad(){
		// #ifdef H5
		console.log('111')
		// #endif
		// #ifdef MP-WEIXIN
		console.log('121')
		// #endif
	}
}

在style中的写法

<style>
	/* #ifdef MP-WEIXIN */
	view{
		color: white;
	}
	/* #endif */
</style>

其实三种写法都是一样的都是先写注释在加上#ifdef 设备，#endif