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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/877864.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MacOS上升级Ruby版本

在MacOS上升级Ruby版本是一个涉及多个步骤的过程&#xff0c;这些步骤不仅要求技术操作准确&#xff0c;还需要考虑到与项目兼容性、依赖包管理以及系统安全性等多方面的因素。以下将详细介绍MacOS上升级Ruby版本的流程、注意事项以及可能的解决方案&#xff0c;确保整个升级过…

R 语言学习教程,从入门到精通,R 绘图饼图(23)

1、R 绘图 条形图 条形图&#xff0c;也称为柱状图条形图&#xff0c;是一种以长方形的长度为变量的统计图表。 条形图可以是水平或垂直的&#xff0c;每个长方形可以有不同的颜色。 R 语言使用 barplot() 函数来创建条形图&#xff0c;格式如下&#xff1a; barplot(H,xlab,…

JavaScript初级——DOM和事件简介

一、什么是DOM&#xff1f; 二、模型 三、对象的 HTML DOM 树 四、节点 浏览器已经为我们提供了文档节点对象&#xff0c;这个对象是window属性&#xff0c;可以再网页中直接使用&#xff0c;文档节点代表的是整个网页。 五、事件简介 事件&#xff0c;就是用户和浏览器之间的交…

最短路 - BellFord算法

有边数限制&#xff0c;存在负权边 题目描述 给定一个n个点m条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c;边权可能为负数。 请你求出从1号点到n号点的最多经过k条边的最短距离&#xff0c;如果无法从1号点走到n号点&#xff0c;输出impossible. 注意:图中可能…

vue3+vite+cesium配置参考

在vite项目中使用Cesium的配置 关键&#xff1a; 资源目录的复制&#xff1b;CESIUM_BASE_URL的正确配置 //vite.config.js // ... // 安装打包复制资源插件&#xff0c;手动复制不需要 // npm i vite-plugin-static-copy import { viteStaticCopy } from vite-plugin-static-c…

linux+mysql+mongo+redis基础指令一文秒懂

Linux基础指令 基础指令&#xff1a; 安装网络工具&#xff0c;终端输入&#xff1a;sudo apt install net-tools&#xff0c;可以输入ifconfig查看虚拟机Ip 2. 适配客户机分配率&#xff0c;终端输入&#xff1a;sudo apt install open-vm-tools 3. 指令格式&#xff1a;指令名…

Linux系统下的容器安全:深入解析与最佳实践

在云计算和微服务架构的推动下&#xff0c;容器技术因其高效、可移植和灵活的特点&#xff0c;已经成为现代软件开发和部署的首选方案。然而&#xff0c;容器的广泛应用也带来了新的安全挑战&#xff0c;尤其是在Linux系统下&#xff0c;容器安全的实现和维护变得尤为重要。本文…

Ruby跨平台移动应用开发的新篇章

标题&#xff1a;Ruby跨平台移动应用开发的新篇章 在移动应用开发领域&#xff0c;Ruby作为一种高效灵活的编程语言&#xff0c;通过一系列框架和工具&#xff0c;成功地拓展了其应用边界。本文将详细介绍Ruby在移动应用开发中的应用&#xff0c;特别是跨平台解决方案&#xf…

C++ 设计模式——单例模式

单例模式 C 设计模式——单例模式1. 单例模式的基本概念与实现2. 多线程环境中的问题3. 内存管理问题1. 内存泄漏风险2. 自动释放策略3. 垃圾回收机制4. 嵌套类与内存管理 4. UML 图UML 图解析 优缺点适用场景总结 C 设计模式——单例模式 单例模式&#xff08;Singleton Patt…

【Redis】渐进式遍历和数据库管理

渐进式遍历和数据库管理 渐进式遍历scan 数据库管理切换数据库清除数据库 渐进式遍历 Redis 使⽤ scan 命令进⾏渐进式遍历键&#xff0c;进⽽解决直接使⽤ keys 获取键时可能出现的阻塞问题。每次 scan 命令的时间复杂度是 O(1)&#xff0c;但是要完整地完成所有键的遍历&…

360发布FancyVideo:通过跨帧文本指导实现动态且一致的视频生成SOTA!

文章链接&#xff1a;https://arxiv.org/pdf/2408.08189 项目链接&#xff1a;https://360cvgroup.github.io/FancyVideo/ 亮点直击 本文介绍了FancyVideo&#xff0c;据众所知的首个探索T2V任务中跨帧文本指导的开创性尝试。该方法为增强当前的文本控制方法提供了新的视角。 …

EmguCV学习笔记 VB.Net 6.5 凸包和凸缺陷

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…

git远程仓库关联切换迁移

上一篇有关git基础设置文章地址&#xff1a; https://blog.csdn.net/lareinax5/article/details/124271339 关于两个仓库迁移&#xff0c;使用&#xff1a; 一、本地仓库文件关联远程仓库 1.先进入你要上传的文件夹&#xff1a; cd /path/to/your/folder2.初始化仓库、查看…

组合的输出-深度优先搜索

组合的输出 https://www.luogu.com.cn/problem/P1157 #include<bits/stdc.h> using namespace std; int n,r; bool v[50]; int f[50]; //now 用哪个数填 l填第几个空 void dfs(int now,int pos){ if(posr1){//r个空填满 for(int i1;i<r;i){ printf(“%3d”,f[i]); } …

OpenCV c++ 实现图像马赛克效果

VS2022配置OpenCV环境 关于OpenCV在VS2022上配置的教程可以参考&#xff1a;VS2022 配置OpenCV开发环境详细教程 图像马赛克 图像马赛克&#xff08;Image Mosaic&#xff09;的原理基于将图像的特定区域替换为像素块&#xff0c;这些像素块可以是纯色或者平均色&#xff0c…

SpringMVC核心机制环境搭建

文章目录 1.SpringMVC执行流程1.基础流程图2.详细流程图 2.安装Tomcat1.下载2.解压到任意目录即可3.IDEA配置Tomcat1.配置Deloyment2.配置Server 3.创建maven项目1.创建sun-springmvc模块&#xff08;webapp&#xff09;2.查看是否被父模块管理3.pom.xml引入依赖4.目录5.SunDis…

【Redis】Redis数据结构——Hash 哈希

哈希 命令hsethgethexistshdelhkeyshvalshgetallhmgethlenhsetnxhincrbyhincrbyfloat命令小结 内部编码使用场景缓存⽅式对⽐ ⼏乎所有的主流编程语⾔都提供了哈希&#xff08;hash&#xff09;类型&#xff0c;它们的叫法可能是哈希、字典、关联数组、映射。在 Redis 中&#…

一拖二快充线市场需求 - LDR6020

一拖二快充线市场需求与LDR6020应用快充线市场推广 随着科技的飞速发展&#xff0c;智能设备已成为我们日常生活中不可或缺的一部分。从智能手机到平板电脑&#xff0c;再到笔记本电脑&#xff0c;这些设备极大地丰富了我们的生活方式&#xff0c;但同时也带来了一个普遍的问题…

C语言函数介绍(上)

函数概念库函数标准库和头文件库函数的使用方法头文件包含库函数文档的一般格式 自定义函数函数的语法形式函数例子 形参和实参实参形参实参和形参的关系 return 语句数组做函数参数 函数概念 数学中我们其实就见过函数的概念&#xff0c;比如&#xff1a;一次函数 ykxb &…

【HuggingFace Transformers】BertModel源码解析

BertModel源码解析 1. BertModel 介绍2. BertModel 源码逐行注释 1. BertModel 介绍 BertModel 是 transformers 库中的核心模型之一&#xff0c;它实现了 BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;模型的架构。BERT 是基于 Trans…