<p>uni-app条件编译必须用特定注释格式:JS/TS中为// #ifdef 平台名,CSS中为/ #ifdef 平台名 /,template中为<!-- #ifdef 平台名 -->;平台名大小写敏感且不可简写,仅支持||逻辑或,不支持&&,且需严格配对#endif。</p>

直接写 // #ifdef PLATFORM 注释块,编译时就会只保留目标平台的代码;写错格式或平台名,整段会被忽略或误编译到所有平台。
条件编译必须写成注释格式
uni-app 的 #ifdef 不是 JavaScript 语句,而是编译器识别的特殊注释。它在不同文件里写法不同,但核心规则一致:必须是合法注释 + 严格空格 + 正确平台标识符。
-
// #ifdef H5(JS/TS 文件)——前后两个斜杠,中间一个空格,H5紧贴后面 -
/* #ifdef H5 */(CSS/SCSS/LESS 文件)——不能换行,/*和*/必须包裹完整指令 -
<!-- #ifdef H5 -->(<template>区域)——注意是 HTML 注释,不是 Vue 指令 - 错误示例:
#ifdef H5(没注释符号)、//#ifdef H5(缺空格)、// #ifdef H5 console.log(1)(同行写代码)——这些都会导致条件编译失效
平台标识符大小写敏感且不能简写
官方定义的平台名是固定字符串,拼错、小写、加空格或用别名,编译器就认不出来。
- 微信小程序必须写
MP-WEIXIN,不是weixin、mini或mp-weixin - H5 就是
H5,不是WEB、BROWSER或h5 - App 端统一用
APP-PLUS,不是APP(那个还包含鸿蒙)、appplus或APP_PLUS - 鸿蒙专属是
APP-HARMONY,和APP-PLUS互斥,不能混用
逻辑组合只支持 ||,不支持 && 做多条件限定
// #ifdef MP-WEIXIN || H5 是合法的,表示“微信小程序或 H5”,但 // #ifdef APP-PLUS && VUE3 这类写法在多数 uni-app 版本中不被支持(除非你确认项目启用了高级编译模式)。
- 常见安全写法:
// #ifdef MP-WEIXIN、// #ifdef H5、// #ifdef APP-PLUS - 需要同时覆盖多个平台时,用
||连接,如:// #ifdef MP-WEIXIN || MP-QQ - 想排除某个平台,用
// #ifndef H5,但要注意:它会把代码编译进 App、小程序等所有非 H5 平台,容易误伤 - 不要试图用
// #ifdef判断运行时环境变量,比如process.env.UNI_PLATFORM——那是构建时注入的常量,生产环境可能被压缩抹掉
模板、脚本、样式三处写法要各自匹配语法
同一个条件编译意图,在不同区块里必须用对应语言的注释形式,否则编译器无法识别。
-
<template>里:<!-- #ifdef MP-WEIXIN --><button open-type="getUserInfo"></button><!-- #endif --> -
<script>里:// #ifdef H5document.title = 'H5页';// #endif -
<style>或 SCSS 文件里:/* #ifdef H5 */ .btn { color: red; } /* #endif */ - 特别注意:不能在
<script setup>的顶层作用域里混写多端 API 调用,即使加了条件编译,TS 类型检查仍会报错;应拆到独立函数或生命周期钩子里
最容易被忽略的是:条件编译只在编译时起作用,它不会改变 JS 执行逻辑,也不会做运行时兜底。一旦漏写 // #endif,或者平台名写错,代码就可能意外出现在不该出现的平台,轻则白屏,重则直接报 ReferenceError: wx is not defined 或 plus is not defined ——这种错误不会在开发工具里立刻暴露,往往上线后才爆发。


















