uni-app条件编译用#ifdef、#ifndef、#endif在编译期剔除代码,平台常量须大写(如MP-WEIXIN),支持H5、小程序、App等平台,不支持运行时平台判断,生效取决于构建命令而非运行环境。

uni-app 条件编译怎么写平台判断语句
直接用 #ifdef、#ifndef 和 #endif 包裹代码块,不是 JS 的 if,也不是 Vue 的 v-if —— 它是编译期剔除,打包时就没了对应平台的代码。
常见错误是写成:#if MP-WEIXIN(错!没有 #if),或者漏掉 #endif 导致后续代码全被吞掉;也有人把平台常量写成小写(如 mp-weixin),实际必须大写 MP-WEIXIN。
-
#ifdef MP-WEIXIN:仅在微信小程序编译时保留其中代码 -
#ifdef H5:只出现在 H5 版本中 -
#ifndef APP-PLUS:非 App 平台才生效(比如 H5 + 小程序) - 支持组合:
#ifdef MP-WEIXIN || MP-QQ,但不支持&&
uni-app 条件编译能用在哪些地方
能用,但有边界。它不是万能开关,只对「静态可识别」的上下文有效。
可以写在:.vue 文件的 <template>、<script>、<style> 里;.js/.ts 文件里;甚至 .json 配置中(如 pages.json)。
不能写在:JS 运行时动态拼接的字符串里(比如 const url = 'api/' + #ifdef H5 'h5' #endif 这种语法非法);也不能嵌套在函数体内再试图条件执行(编译器不解析 JS 逻辑)。
- 模板中可直接用:
#ifdef APP-PLUS包一层<view>,H5 打包后这整段 HTML 就没了 - 脚本中可包裹整个函数定义,但不能只包裹 return 后面的值
- 样式里可写不同平台的
height或padding,编译后 CSS 文件里只留目标平台规则
uni-app 条件编译平台常量有哪些
平台常量不是靠运行时 uni.getSystemInfoSync() 判断,而是由 UNI_PLATFORM 环境变量决定,打包命令或 IDE 构建配置指定。
最常用且稳定的是:H5、MP-WEIXIN、MP-ALIPAY、MP-BAIDU、MP-TOUTIAO、APP-PLUS、APP-PLUS-NVUE。注意 MP-QQ 和 MP-KUAISHOU 是较新版本才支持,旧版会忽略。
-
MP是 mini program 缩写,所有小程序平台都带这个前缀 -
APP-PLUS指使用 WebView 渲染的 uni-app App,APP-PLUS-NVUE是原生渲染模式,二者不等价 - 没有
IOS或ANDROID这类运行时平台常量 —— 条件编译不区分 iOS/Android,只分 App / 小程序 / H5 大类 - 自定义常量需在
vue.config.js或 CLI 构建参数中通过defineConstants注入,不能随便写个#ifdef MY_FEATURE就生效
为什么写了条件编译却没生效
大概率是编译环境没对上。条件编译发生在构建阶段,和你当前运行的设备无关,只和你点的「运行到 xx」或执行的 npm run dev:xxx 命令强绑定。
典型表现:在 H5 页面里写了 #ifdef MP-WEIXIN,然后用浏览器打开,结果那段代码还在 —— 因为你是用 npm run dev:h5 构建的,编译器根本不会处理 MP-WEIXIN 块,它直接删了;但如果你用 HBuilderX 点「运行到微信开发者工具」,那 MP-WEIXIN 块才会被保留。
- 检查控制台启动日志,看实际运行的是哪个平台(如
Starting dev server for MP-WEIXIN...) - CLI 用户注意命令是否带平台后缀:
npm run build:weixin≠npm run build:h5 - HBuilderX 用户右下角状态栏要确认当前运行目标,不是“当前页面”所在平台
- 修改条件编译后务必重新运行/构建,热更新不触发重新编译逻辑
条件编译看着简单,但真正卡住人的,往往是「你以为在 A 平台构建,其实正在 B 平台构建」—— 编译目标和运行目标错位,比语法错误更难排查。










