前端 uniapp 多端条件编译

embedded/2024/10/18 1:49:58/

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

使用方法

以 #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.ppmy.cn/embedded/100308.html

相关文章

Android Studio 文件存储读写

文件的相关操作方法 文件协助类&#xff1a;FileHelper.java public class FileHelper {private Context mContext;public FileHelper() {}public FileHelper(Context mContext) {super();this.mContext mContext;}/** 这里定义的是一个文件保存的方法&#xff0c;写入到文件…

Paimon Flink本地读取数据报错

1.idea本地读取paimon 用idea在本地读取paimon的表时需要添加的依赖除了官网提出的和hadoop相关的&#xff0c;paimon-flink之类相关的除外还需要其他额外依赖 import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apache.flink.tabl…

Eureka与Consul对比:微服务注册与发现的不同方案分析

Eureka与Consul对比&#xff1a;微服务注册与发现的不同方案分析 引言 随着微服务架构的广泛应用&#xff0c;服务注册与发现成为了构建高效、灵活的分布式系统的重要组成部分。在一个典型的微服务架构中&#xff0c;每个服务都是独立的应用程序&#xff0c;通常在不同的主机…

开源大模型LLaMA架构介绍

大模型相关目录 大模型&#xff0c;包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步&#xff0c;扬帆起航。 swift与Internvl下的多模态大模型分布式微调指南&#xff08;附代码和数据&#xff…

算法题(3)------两两交换链表中的节点

leetcode链接&#xff1a;24. 两两交换链表中的节点 - 力扣&#xff08;LeetCode&#xff09; struct ListNode * swapPairs(struct ListNode * head) {typedef struct ListNode ListNode;ListNode *fakehead (ListNode *)malloc(sizeof(ListNode));fakehead->next head;…

wpf datagrid 实现双向绑定

前台 <DataGridAutoGenerateColumns"False"Background"White"CanUserAddRows"True"Grid.Row"1"RowEditEnding"DataGrid_OnRowEditEnding"RowHeight"60"SelectionUnit"CellOrRowHeader"x:Name"…

Debug-023-Document.createElement()的使用

Document.createElement() document.createElement()是在对象中创建一个对象&#xff0c;要与appendChild() 或 insertBefore()方法联合使用。 appendChild() 方法在节点的子节点列表末添加新的子节点。 insertBefore() 方法在节点的子节点列表任意位置插入新的节点。 用途举…

Java设计模式之中介者模式详细讲解和案例示范

Java设计模式之中介者模式详细讲解和案例示范 在软件设计中,中介者模式(Mediator Pattern)是一种行为设计模式,用于减少多个对象和类之间的通信复杂性。通过引入中介者对象,各个对象之间不需要直接互相引用,而是通过中介者进行通信,从而使系统更易于扩展和维护。本文将…