uni-app 条件编译

Posted 2021-06-30 地表最强菜鸡

ifdef 仅出现在XXx平台上

<!-- 只在APP上有哈 -->
#ifdef APP-PLUS
需条件编译的代码
#endif

<!-- 只在小程序上有哈 -->
#ifdef MP-WEIXIN
需条件编译的代码
#endif

<!-- 只在H5上有哈 -->
#ifdef H5
需条件编译的代码
#endif


<!-- 在小程序上和H5上 -->
#ifdef APP-PLUS || H5
需条件编译的代码
#endif

<!-- 只在APP上有哈 -->
<!-- #ifdef APP-PLUS -->
	<view>
		我只会出现在app上（真机）
	</view>
<!-- #endif -->

<!-- 只在小程序上有哈 -->
<!-- #ifdef MP-WEIXIN -->
	<view>
		我只会出现在小程序上
	</view>
<!-- #endif -->

<!-- 只在H5上有哈 -->
<!-- #ifdef H5 -->
	<view>
		我只会出现在h5上
	</view>
<!-- #endif -->

除了 H5 平台，其它平台均存在的代码

#ifndef H5
需条件编译的代码
#endif

<!-- #ifndef H5 -->
<view>
       除了H5平台,其他的平台都存在的哈
</view>
<!-- #endif -->

在写条件编译时，需要注意的点。千万别忘记写
<!--  XX -->这个是必须要有的。
否者不能够产生条件编译

代码只有在支付宝小程序中才能够生效
<!-- #ifdef MP-ALIPAY -->
	<view class="demo">
		我在支付宝中才有的
	</view>
<!-- #endif -->

//仅在支付宝小程序中生效 
/* #ifdef MP-ALIPAY */
.demo{
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	background: #1AAD19;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFFFFF;
	font-size: 30rpx;
	padding: 10rpx;
}
/* #endif */

最后总结一下
条件编译是利用注释实现的，在不同语法里注释写法不一样，
js使用 // 注释、
css 使用 /* 注释 */、
vue/nvue 模板里使用 <!-- 注释 -->
json文件使用 // 注释、