uni-App第十天：跨端兼容

前端-文龙刚

已于 2024-06-03 14:46:36 修改

阅读量256

点赞数

分类专栏： uniApp 文章标签： uni-app

于 2023-04-03 10:20:53 首次发布

本文链接：https://blog.csdn.net/qq_17211063/article/details/129857795

版权

uniApp 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

目的：为了兼容不同的平台，在不同平台显示不同的代码，所以可以在编写代码时，写入不同的判断对不同平台进行判断

参考链接：https://uniapp.dcloud.net.cn/tutorial/platform.html#preprocessor

判断当前设备不仅可以在标签中写，也可以在js中判断，还可以在css样式中做判断

1、判断只在H5端显示：

2、判断只在微信小程序端显示：

代码：

<template>
	<view class="">
		<!-- 不同编辑器显示不同的内容 -->
		<!--#ifdef H5-->
		<view class="h5">
			我只会在H5页面中显示
		</view>
		<!--#endif-->
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="weixin">
			我只会在微信小程序中显示
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default{
		data() {
			return{
				
			}
		},
		methods:{
			
		},
		onLoad(){
			//这是在js中对于设备的判断
			// #ifdef H5
			console.log('我只在H5页面中打印')
			// #endif
			
			// #ifdef MP-WEIXIN
			console.log('我只在微信小程序中打印')
			// #endif
		}
	}
</script>

<style>
	/* H5中的样式 */
	// #ifdef H5
		view{color:red;}
	// #endif
	
	/* 小程序中的样式 */
	//	#ifdef MP-WEIXIN
	view{color:blue;}
	//#endif

    /*或者*/

    /* #ifdef MP-WEIXIN */
	page{height:100%;}
	/* #endif */
</style>