uni-app之 條件注釋 實現跨端兼容

• 官網
• #ifdef：if defined 僅在某平臺存在
• #ifndef：if not defined 除了某平臺均存在
• %PLATFORM%：平臺名稱

頁面視圖的 相關顯示

• 我希望在h5看見
  • 只是在h5顯示
• 在小程序看見
  • 只是在微信小程序顯示

<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="">我希望在h5看見</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN  -->
		<view class="">在小程序看見</view>
		<!-- #endif -->
	</view>
</template>

• 效果
  

js代碼之中 區分不同端 顯示

• // #ifdef H5 XX // #endif
• // #ifdef MP-WEIXIN XX // #endif

<script>
	export default {
		onLoad(){
			// #ifdef  H5
			console.log("我只是在H5顯示");
			// #endif
			// #ifdef  MP-WEIXIN
			console.log("我只是在小程序顯示");
			// #endif
		}
	}
</script>

• 效果

css的 不同端口顯示

<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="">我希望在h5看見</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN  -->
		<view class="">在小程序看見</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data(){
			return {
				imgArr:[]
			}
		},	
		methods: {
		},
	}
</script>

<style lang="scss">
	view {
		// #ifdef H5
		color: red;
		// #endif
		// #ifdef MP-WEIXIN
		color: blue;
		// #endif
	}
</style>

• 效果