前端 uniapp 多端条件编译

条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。

使用方法

以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #ifndef 结尾。

  • #ifdef:if defined 仅在某平台存在
  • #ifndef:if not defined 除了某平台均存在
  • %PLATFORM%:平台名称
条件编译写法 说明
#ifdefAPP-PLUS 需条件编译的代码 #endif 仅出现在 App 平台下的代码
#ifndefH5 需条件编译的代码 #endif 除了 H5 平台,其它平台均存在的代码(注意if后面有个n)
#ifdefH5 || MP-WEIXIN 需条件编译的代码 #endif 在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)
javascript 复制代码
/**
 *  html:
 */
<!-- #ifdef H5 -->
   <div id="global-float-button-app"></div>
<!-- #endif -->

/**
 *  js:
 */
// #ifdef MP
  url: `${uni.$http.baseUrl}${UPMS_API}commonRest/newFileUpLoad`,
// #endif

/**
 *  css:
 */
  /*  #ifdef MP-TOUTIAO  */
  /deep/ button::after {
    display: none;
  }

  /*  #endif  */

%PLATFORM% 可取值:

生效条件 版本支持
VUE3 uni-app js引擎版用于区分vue2和3,详情 HBuilderX 3.2.0+
VUE2 uni-app js引擎版用于区分vue2和3,详情
UNI-APP-X 用于区分是否是uni-app x项目 详情 HBuilderX 3.9.0+
uniVersion 用于区分编译器的版本 详情 HBuilderX 3.9.0+
APP App
APP-PLUS uni-app js引擎版编译为App时
APP-PLUS-NVUE或APP-NVUE App nvue 页面
APP-ANDROID App Android 平台 详情
APP-IOS App iOS 平台 详情
APP-HARMONY App HarmonyOS Next 平台
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 快应用华为

支持的文件:

  • .vue/.nvue/.uvue
  • .js/.uts
  • .css
  • pages.json
  • 各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug

注意:

  • 条件编译是利用注释实现的,在不同语法里注释写法不一样,js/uts使用 // 注释、css 使用 /* 注释 */、vue/nvue/uvue 模板里使用 <!-- 注释 -->

  • 条件编译APP-PLUS包含APP-NVUE和APP-VUE,APP-PLUS-NVUE和APP-NVUE没什么区别,为了简写后面出了APP-NVUE ;

  • 对于未定义平台名称,可能是名称写错了,也可能是低版本HBuilderX还不认识这个平台。此时的条件编译,#ifdef 中的代码不会生效,而 #ifndef 中的代码会生效;

  • 使用条件编译请保证编译前编译后文件的语法正确性,即要保障无论条件编译是否生效都能通过语法校验。比如:json文件中不能有多余的逗号,js中不能重复导入;

相关推荐
风清云淡_A34 分钟前
【uniapp】uni.uploadFile上传数据多出一个304的get请求处理方法
uni-app
shykevin40 分钟前
uni-app x商城,商品列表组件封装以及使用
windows·uni-app
cesske44 分钟前
uniapp 编译支付宝小程序canvas 合成图片实例,支付宝小程序 canvas 渲染图片 可以换成自己的图片即可
小程序·uni-app·apache
Q_Q51100828511 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
2501_9160074713 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者815 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
2501_9159090617 小时前
iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
android·ios·小程序·https·uni-app·iphone·webview
盛夏绽放18 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
2501_915918411 天前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程