前端 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中不能重复导入;

相关推荐
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
2501_915918413 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
不知名It水手5 小时前
uniapp运行项目到ios基座
ios·uni-app·cocoa
hunzi_15 小时前
搭建商城系统
java·uni-app·php
合作小小程序员小小店8 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
普宁彭于晏9 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
CRMEB定制开发11 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
today喝咖啡了吗18 小时前
uniapp,Anroid10+版本如何保存图片并删除
uni-app
为风而战20 小时前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
雪碧聊技术1 天前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递