uniapp4条件编译，导航跳转

温温-温

已于 2023-05-08 09:30:31 修改

阅读量194

点赞数

分类专栏： uniapp 文章标签：前端

于 2022-06-20 15:55:35 首次发布

本文链接：https://blog.csdn.net/kxz_0204/article/details/125369745

版权

uniapp 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

条件编译，跨端兼容

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台，其它平台均存在的代码
#ifdef H5 \|\| MP-WEIXIN 需条件编译的代码 #endif	在 H5 平台或微信小程序平台存在的代码（这里只有\|\|，不可能出现&&，因为没有交集）

在组件、api、样式各个的条件编译

<template>
	<view>
		<text>在组件中测试条件编译</text>
		<view>
			<!-- #ifdef MP-WEIXIN -->
			<view>
				只在微信小程序页面出现
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view>
				只在浏览器页面出现
			</view>
			<!-- #endif -->
			<!-- #ifdef H5|| MP-WEIXIN -->
			<view>
				h5也出现 微信小程序也出现
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		// 在页面加载时打印
		// api测试条件编译
		onLoad() {
			// #ifdef H5
			console.log('在h5端打印')
			// #endif
			// #ifdef MP-WEIXIN
			console.log('在微信小程序中打印')
			// #endif
		},
		methods: {}
	}
</script>

<style>
	/* h5出现 */
	/* #ifdef H5 */
	view {
		color: #F3A73F;
		border: 1rpx solid #000000;
		padding: 10rpx;
		margin: 5rpx 20rpx 0;
	}
	/* #endif */
	/* 微信小程序出现 */
	/* #ifdef MP-WEIXIN */
	view {
		color: #87b58b;
		border: 1rpx solid #8f8fd6;
		padding: 10rpx;
		margin: 5rpx 20rpx 0;
	}
	/* #endif */
</style>

导航跳转传参

声明式跳转

navigator页面跳转。

该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。

该组件的功能有API方式，另见：https://uniapp.dcloud.io/api/router?id=navigateto(opens new window)

属性说明

属性名	类型	默认值	说明	平台差异说明
url	String		应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 `.vue` 后缀
open-type	String	navigate	跳转方式
delta	Number		当 open-type 为 'navigateBack' 时有效，表示回退的层数
animation-type	String	pop-in/out	当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画	App
animation-duration	Number	300	当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。	App
hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	微信小程序
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒
target	String	self	在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram	微信2.0.7+、百度2.5.2+、QQ

open-type 有效值

值	说明	平台差异说明
navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能	字节跳动小程序与飞书小程序不支持
navigateBack	对应 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

编程式跳转

uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

OBJECT参数说明

参数	类型	必填	默认值	说明	平台差异说明
url	String	是		需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
animationType	String	否	pop-in	窗口显示的动画效果，详见：窗口动画	App
animationDuration	Number	否	300	窗口动画持续时间，单位为 ms	App
events	Object	否		页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

导航跳转以及传参示例

<template>
	<view>
		<text>导航跳转</text>
		<!-- 声明式跳转：用组件进行跳转 -->
		<view>
			<text>声明式跳转：用组件进行跳转</text>
			<navigator url="../news/news" style="background-color: #F3A73F;padding: 10rpx;">跳转到新闻页面</navigator>
		</view>
		<view style="margin-top: 50rpx">
			<!-- navigator只能跳转至普通页面，要想跳转到tabbar页面需要添加open-type="switchTab"属性 -->
			<text>声明式跳转：用组件进行跳转，跳转到tabbar页面需要添加open-type="switchTab"属性</text>
			<navigator url="../../pages/me/me" style="background-color: #13f3b4;padding: 10rpx;" open-type="switchTab">跳转到我的页面</navigator>
		</view>
		<view style="margin-top: 50rpx">
			<text>声明式跳转：用组件进行跳转，前一个页面销毁添加open-type="reLaunch"属性</text>
			<navigator url="../news/news" style="background-color: #F3A73F;padding: 10rpx;" open-type="reLaunch">跳转到新闻页面</navigator>
		</view>
		<!-- 编程式跳转：用api进行跳转 -->
		<view style="margin-top: 50rpx">
			<text>编程式跳转：用api进行跳转</text>
			<view @click="tupian" style="background-color: #38552185;padding: 10rpx;">跳转到上传图片页面</view>
		</view>
		<view style="margin-top: 50rpx">
			<text>编程式跳转：用api进行跳转，跳转到tabbar页面uni.switchTab</text>
			<view @click="faxian" style="background-color: #0eb4bd85;padding: 10rpx;">跳转到发现页面</view>
		</view>
		<view style="margin-top: 50rpx">
			<text>编程式跳转：用api进行跳转,销毁上一个页面，回到主页uni.redirectTo</text>
			<view @click="bangding" style="background-color: #8cbbbd85;padding: 10rpx;">跳转到双向数据绑定页面</view>
		</view>
		<!-- 传参 -->
		<view style="margin-top: 50rpx;">
			<text>传参</text>
			<!-- 找到新闻页面进行接参 -->
			<navigator url="../news/news?id=10" style="background-color: #eac4f3;padding: 10rpx;">跳转到新闻页面</navigator>
			<navigator url="../news/news?id=10&age=19" style="background-color: #a6b7f3;padding: 10rpx; margin-top: 20rpx;">跳转到新闻页面</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onUnload() {
			console.log('导航跳转主页面被销毁')
		},
		methods: {
			tupian() {
				console.log('1秒后跳转')
				setTimeout(res => {
					uni.navigateTo({
						url: '../shangchuantupian/shangchuantupian'
					})
					console.log('跳转完成')
				}, 1000)
			},
			faxian(){
				uni.switchTab({
					url:'../../pages/faxian/faxian'
				})
			},
			bangding(){
				uni.redirectTo({
					url:'../../subpages/home/home?id=66&age=22'
				})
			}
		}
	}
</script>

<style>

</style>

接收参数页面

<template>
	<view>
		新闻页面
	<view>
		<text selectable="true">新闻页面</text>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		// 接参,通过onLoad的形参res进行接参
		onLoad(res){
			console.log(res)
		},
		onPullDownRefresh() {
			console.log('下拉刷新了')
		},
		methods: {
			
		}
	}
</script>

<style>

</style>