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

发布于:2024-10-12 ⋅ 阅读:(6) ⋅ 点赞:(0)

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. 示例页面

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

1.3.2. 示例方法

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