uni-app #ifdef #ifndef #endif的使用和区别

雪芽蓝域zzs2024-09-29 18:28

1. uni-app #ifdef #ifndef #endif的使用和区别

条件编译是一种在编程中根据特定平台选择性编译代码的技术。如#ifdef和#endif根据APP-PLUS平台标识在微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序以及H5应用中实现代码的平台特定执行。下面介绍了如何使用#ifdef和#ifndef等注释来标记代码块，确保它们在H5、5+App、微信小程序等不同平台上正确执行编译。通过这种方式，开发者可以实现代码的平台定制，提高代码的可移植性和效率。

1.1. #ifdef #ifndef #endif三者

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

名称	作用
#ifdef	仅在某个平台上使用0
#ifndef	在除了这个平台的其他平台上使用(非此平台使用）
#endif	结束条件编译

1.2. 平台标识

1.2.1. 生效条件

标识	生效条件
VUE3	uni-app js引擎版用于区分vue2和3，
VUE2	uni-app js引擎版用于区分vue2和3
UNI-APP-X	用于区分是否是uni-app x项目
uniVersion	用于区分编译器的版本
APP	App
APP-PLUS	uni-app js引擎版编译为App时
APP-PLUS-NVUE或APP-NVUE	App nvue 页面
APP-ANDROID	App Android 平台详情
APP-IOS	App iOS 平台详情
H5	H5（推荐使用 WEB）
WEB	web（同H5） HBuilderX 3.6.3+
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	抖音小程序
MP-LARK	飞书小程序
MP-QQ	QQ小程序
MP-KUAISHOU	快手小程序
MP-JD	京东小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

1.2.1. 支持的文件

（1）.vue/.nvue/.uvue

（2）.js/.uts

（3）.css

（4）pages.json

（5）各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

1.3. 案例

1.3.1. 示例页面

javascript 复制代码

     <!-- h5显示 -->
	<!-- #ifdef H5 -->
	<view>H5</view>
	<!-- #endif -->
	
	<!-- 微信小程序显示 -->
	<!-- #ifdef MP-WEIXIN -->
	<view>小程序</view>
	<!-- #endif -->
	
	
	<!-- #ifndef H5 -->
	<view class="else">
		除了h5都展示
	</view>
	<!-- #endif -->

1.3.2. 示例方法

javascript 复制代码

	onLoad() {
			// #ifdef H5
			console.log('H5')
			// #endif
			// #ifdef MP-WEIXIN
			console.log('小程序')
			// #endif
		}