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

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
		}
相关推荐
00后程序员张4 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬5 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106325 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq5 小时前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app
Qlittleboy5 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
写代码的jiang5 小时前
打造精简高效的 uni-app 网络请求工具
uni-app
!win !13 小时前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序
xw513 小时前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝
百思可瑞教育19 小时前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
百思可瑞教育1 天前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育