当前位置: 首页 > news >正文

前端 uniapp 多端条件编译

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

使用方法

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

  • #ifdef:if defined 仅在某平台存在
  • #ifndef:if not defined 除了某平台均存在
  • %PLATFORM%:平台名称
条件编译写法说明

#ifdef APP-PLUS
需条件编译的代码
#endif

仅出现在 App 平台下的代码

#ifndef H5
需条件编译的代码
#endif

除了 H5 平台,其它平台均存在的代码(注意if后面有个n)

#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif

在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)
/***  html:*/
<!-- #ifdef H5 --><div id="global-float-button-app"></div>
<!-- #endif -->/***  js:*/
// #ifdef MPurl: `${uni.$http.baseUrl}${UPMS_API}commonRest/newFileUpLoad`,
// #endif/***  css:*//*  #ifdef MP-TOUTIAO  *//deep/ button::after {display: none;}/*  #endif  */

%PLATFORM% 可取值:

生效条件版本支持
VUE3uni-app js引擎版用于区分vue2和3,详情HBuilderX 3.2.0+
VUE2uni-app js引擎版用于区分vue2和3,详情
UNI-APP-X用于区分是否是uni-app x项目 详情HBuilderX 3.9.0+
uniVersion用于区分编译器的版本 详情HBuilderX 3.9.0+
APPApp
APP-PLUSuni-app js引擎版编译为App时
APP-PLUS-NVUE或APP-NVUEApp nvue 页面
APP-ANDROIDApp Android 平台 详情
APP-IOSApp iOS 平台 详情
APP-HARMONYApp HarmonyOS Next 平台
H5H5(推荐使用 WEB
WEBweb(同H5HBuilderX 3.6.3+
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO抖音小程序
MP-LARK飞书小程序
MP-QQQQ小程序
MP-KUAISHOU快手小程序
MP-JD京东小程序
MP-360360小程序
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中不能重复导入;

相关文章:

  • polarctf靶场【四方密码题】【CRYPTO】不一样的四四方方、四个正方形
  • 海绵城市雨水监测系统简介
  • 2024年好用的4款电脑录屏工具清单。
  • 自制项目镜像并拉取
  • centos7突然掉电后启动报错/dev/mapper/centos-root does not exist
  • 利用MongoDB进行数据治理,防范构建生成式AI应用程序时的潜在安全风险
  • PAM软连接提权
  • 从菜鸟到高手:掌握Python推导式,让代码飞起来,列表、集合、字典,一网打尽,用Python推导式优雅地重构你的数据操作
  • STM32之继电器与震动传感器的使用,实现震动灯
  • Docker的安装与镜像配置
  • Oracle开始严查Java许可!
  • flink+flinkcdc+同步(MYSQL到MYSQL)实践
  • git restore对工作区及暂存区文件的影响
  • 自养号测评技术:如何挑选适合的IP环境方案
  • 引发C++程序内存泄漏的常见原因分析与排查方法总结
  • [分享]iOS开发 - 实现UITableView Plain SectionView和table不停留一起滑动
  • flutter的key在widget list的作用以及必要性
  • IndexedDB
  • JavaScript 一些 DOM 的知识点
  • js操作时间(持续更新)
  • React as a UI Runtime(五、列表)
  • Spring框架之我见(三)——IOC、AOP
  • SQLServer之创建显式事务
  • ucore操作系统实验笔记 - 重新理解中断
  • 和 || 运算
  • 算法-图和图算法
  • 我的面试准备过程--容器(更新中)
  • 小李飞刀:SQL题目刷起来!
  • d²y/dx²; 偏导数问题 请问f1 f2是什么意思
  • puppet连载22:define用法
  • 机器人开始自主学习,是人类福祉,还是定时炸弹? ...
  • ​草莓熊python turtle绘图代码(玫瑰花版)附源代码
  • ​插件化DPI在商用WIFI中的价值
  • #Java第九次作业--输入输出流和文件操作
  • #微信小程序:微信小程序常见的配置传旨
  • #我与Java虚拟机的故事#连载05:Java虚拟机的修炼之道
  • #周末课堂# 【Linux + JVM + Mysql高级性能优化班】(火热报名中~~~)
  • (1)(1.8) MSP(MultiWii 串行协议)(4.1 版)
  • (1)svelte 教程:hello world
  • (附源码)node.js知识分享网站 毕业设计 202038
  • (蓝桥杯每日一题)平方末尾及补充(常用的字符串函数功能)
  • (欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明
  • (三)Hyperledger Fabric 1.1安装部署-chaincode测试
  • (十八)Flink CEP 详解
  • (算法设计与分析)第一章算法概述-习题
  • (循环依赖问题)学习spring的第九天
  • (源码版)2024美国大学生数学建模E题财产保险的可持续模型详解思路+具体代码季节性时序预测SARIMA天气预测建模
  • (转)Android中使用ormlite实现持久化(一)--HelloOrmLite
  • (转)linux自定义开机启动服务和chkconfig使用方法
  • (状压dp)uva 10817 Headmaster's Headache
  • ***通过什么方式***网吧
  • **python多态
  • .net 4.0发布后不能正常显示图片问题
  • .net framework profiles /.net framework 配置
  • .Net 应用中使用dot trace进行性能诊断