Uniapp运行环境判断和解决跨端兼容性详解

news2025/11/1 2:42:45

Uniapp运行环境判断和解决跨端兼容性

开发环境和生产环境

uniapp可通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境，一般用于链接测试服务器或者生产服务器的动态切换。在HX中，点击运行编译出来的代码是开发环境，点击发行编译出来的代码是生产环境。

if(process.env.NODE_ENV === 'development'){
 console.log('开发环境')
}else{
 console.log('生产环境')
}

跨端兼容

uniapp已将常用的组件，js api封装到框架中，开发者按照uniapp规范开发即可保证多平台兼容，大部分业务均可直接瞒住，但每个平台有自己的特征，因此会存在一些无法跨平台情况，大量写if else会造成代码执行性能低下和管理混乱，编译到不同的工程后二次修改会让后续升级变得非常麻烦，在C中，通过#ifdef，#ifndef的方式，为windows,mac,等不同的OS编译不同的代码，uniapp也参考了这个思路，为uniapp提供了条件编译手段，在一个工程项目里优雅的完成了平台个性化实现。

条件编译解决跨端兼容性

uni-app平台有两种场景，一种是在编译期条件编译判断，一种是在运行期判断。

条件编译语法

条件编译使用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同的平台。写法以#ifdef或#ifndef加%PLATFORM开头，以#endif结尾。

  • #ifdef：if defined仅在某平台存在。
  • #ifndef：if not defined除了某平台均存在。
  • %PLATFORM：平台名称。

%PLATFORM取值表

值平台
APP-PLUSApp
APP-PLUS-NVUE或APPNVUEApp nvue
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO字节跳动小程序
MP-QQQQ小程序
MP-360360小程序
MP微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEWUNION快应用联盟
QUICKAPP-WEBVIEWHUAWEI快应用华为

实列说明：

  • #ifdef APP-PLUS，#endif，需条件编译的代码，仅出现在App平台下的代码。
  • #ifndef H5，#endif，需条件编译的代码，除了 H5平台，其它平台均存在的代码。
  • #ifdef H5 || MPWEIXIN，#endif，需条件编译的代码，在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）。

支持的文件：.nvue，.vue，.js，.css，pages.json。
**各预编译语言文件：**如：.scss，.less，.stylus，.ts，.pug。
注意：
条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用//注释 、css 使用/* 注释 */、vue/nvue 模板里使用 <!-- 注释 -->，条件编译 APP-PLUS 包含 APP-NVUE 和 APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后面出了APP-NVUE；

组件（模板）的条件编译
	<!-- #ifdef %PLATFORM% -->
		平台特有的组件
	<!-- #endif -->

示例：

<template>
	<view>
		<!-- #ifdef APP-PLUS -->
			<view>APP中显示</view>
		<!-- #endif -->
		
		<!-- #ifndef APP-PLUS -->
			<view>不在APP中显示</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN || H5 -->
			<!-- 还支持多平台同时编译，使用 || 来分隔平台名称 -->
			<view>在微信小程序或H5端显示_点击下载APP</view>
		<!-- #endif -->
	</view>
</template>

结果：
Uniapp运行环境判断和解决跨端兼容性详解

API（js）的条件编译
	// #ifdef %PLATFORM%
		平台特有的API实现
	// #endif

示例：

<template>
	<view></view>
</template>
<script>
export default {
	data() {
		return {
			// #ifdef APP-PLUS
			title: '我是APP端',
			// #endif
		}
	},
	onLoad() {
		this.test1()
	},
	methods: {
		test1() {
			// #ifdef H5
			console.log('兼容H5平台')
			// #endif
			// #ifdef MP-WEIXIN
			console.log('兼容微信小程序平台')
			// #endif
		}
	}
}
</script>
<style></style>

效果：
Uniapp运行环境判断和解决跨端兼容性详解

样式 （style）的条件编译
	/* #ifdef %PLATFORM% */
	平台特有样式
	/* #endif */

注意： 样式的条件编译，无论是 css 还是 sass/scss/less/stylus 等预编译语言中，必须使用 /*注释*/ 的写法。
示例：

<template>
	<view>
		<view class="test">
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// #ifdef APP-PLUS
			title: '我是APP端',
			// #endif
		}
	},
	onLoad() {
		this.test1()
	},
	methods: {
		test1() {
			// #ifdef H5
			console.log('兼容H5平台')
			// #endif
			// #ifdef MP-WEIXIN
			console.log('兼容微信小程序平台')
			// #endif
		}
	}
}
</script>
<style lang="scss">
	.test {
		width: 100px;
		height: 100px;
		/* #ifdef MP */
		background: red;
		/* #endif */
		
		/* #ifdef MP-WEIXIN */
		background: yellow;
		/* #endif */
		
		/* #ifdef H5 */
		background: green;
		/* #endif */
	}
</style>

Uniapp运行环境判断和解决跨端兼容性详解

pages.json 的条件编译

下面的页面，只有运行至 App 时才会编译进去。不同平台下的特有功能，以及小程序平台的分包，都可以通过 pages.json 的条件编译来更好地实现。这样，就不会在其它平台产生多余的资源，进而减小包体积。
示例：

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
		// #ifdef APP-PLUS
		, {
			"path": "pages/wenda/wenda",
			"style": {
				"navigationBarTitleText": "问答"
			}
		}
		// #endif
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

注意：
Uniapp运行环境判断和解决跨端兼容性详解
在 #ifdef APP-PLUS 和 #endif 预编译指令之间，如果只有一个配置项，那么这个配置项后面不应该有逗号。这是因为预编译指令可能会导致这部分代码被移除，从而留下一个多余的逗号，造成 JSON 解析错误。

static 目录的条件编译

在不同平台，引用的静态资源可能也存在差异，通过 static 的的条件编译可以解决此问题，static 目录下新建不同平台的专有目录（目录名称同 %PLATFORM% 值域,但字母均为小写），专有目录下的静态资源只有在特定平台才会编译进去。
如以下目录结构， a.png 只有在微信小程序平台才会编译进去， b.png 在所有平台都会被编译。

┌─static
│ ├─mp-weixin
│ │ └─a.png
│ └─b.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json
运行期判断IOS/Android平台

Android 和 iOS 平台不支持通过条件编译来区分，如果需要区分Android、iOS 平台，请通过调用uni.getSystemInfo 来获取平台信息。
运行期判断: 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools）。如有必要，也可以在条件编译里自己定义一个变量，赋不同值。在后续运行代码中动态判断环境。
判断是否为： IOS 平台的APP端

<template>
	<view></view>
</template>
<script>
	export default {
		data() {return {}},
		onLoad() {
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					console.log('运行Android上')
					break;
				case 'ios':
					console.log('运行iOS上')
					break;
				default:
					console.log('运行在开发者工具上')
					break;
			}
		},
		methods: {}
	}
</script>
<style lang="scss"></style>

效果：
Uniapp运行环境判断和解决跨端兼容性详解
如有必要，也可以在条件编译里自己定义一个变量，赋不同值。在后续运行代码中动态判断环境。

<template>
	<view>
		<view v-if="isIosApp">
			是IOS平台的APP端
		</view>
		<view v-else>
			不是IOS平台的APP端
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isIosApp: false, // 是否为 IOS平台的APP端
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.isIosApp = uni.getSystemInfoSync().platform === 'ios'
			// #endif
		},
	}
</script>

效果：
Uniapp运行环境判断和解决跨端兼容性详解
Uniapp运行环境判断和解决跨端兼容性详解完结~

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

华为Ensp模拟器配置OSPF路由协议

华为Ensp模拟器配置OSPF路由协议

目录 简介 实验步骤 Pc配置 路由器配置 OSPF配置 交换机配置 简介 开放式最短路径优先 (OSPF) 协议深度解析 简介 开放式最短路径优先&#xff08;Open Shortest Path First, OSPF&#xff09;是一种内部网关协议&#xff08;IGP&#xff09;&#xff0c;用于在自治系统…
阅读更多...
【JavaEE初阶 — 多线程】线程池

【JavaEE初阶 — 多线程】线程池

目录 1. 线程池的原理 1.1 为什么要有线程池 1.2 线程池的构造方法 1.3 线程池的核心参数 1.4 TimeUnit 1.5 工作队列的类型 1.6 工厂设计模式 1.6.1 工厂模式概念 1.6.2 使用工厂模式的好处 1.6.3 使用工厂模式的典型案例 1.6.4 Thread…
阅读更多...
Vue通过file控件上传文件到Node服务器

Vue通过file控件上传文件到Node服务器

功能&#xff1a; 1.多文件同时上传、2.拖动上传、3.实时上传进度条、4.中断上传和删除文件、5.原生file控件的美化 搁置的功能: 上传文件夹、大文件切片上传、以及其他限制条件未处理 Node服务器的前置准备: 新建文件夹: file_upload_serve初始化npm: npm …
阅读更多...
Spring Security使用基本认证（Basic Auth）保护REST API

Spring Security使用基本认证（Basic Auth）保护REST API

基本认证概述 基本认证&#xff08;Basic Auth&#xff09;是保护REST API最简单的方式之一。它通过在HTTP请求头中携带Base64编码过的用户名和密码来进行身份验证。由于基本认证不使用cookie&#xff0c;因此没有会话或用户登出的概念&#xff0c;这意味着每次请求都必须包含…
阅读更多...
[大数据] Iceberg

[大数据] Iceberg

G:\Bigdata\25.iceberg 第3章 与 Hive集成 3.1 环境准备 1）Hive与Iceberg的版本对应关系如下 Hive 版本 官方推荐Hive版本 Iceberg 版本 2.x 2.3.8 0.8.0-incubating – 1.1.0 3.x 3.1.2 0.10.0 – 1.1.0 Iceberg与Hive 2和Hive 3.1.2/3的集成，支持以下特性： 创建表删除表…
阅读更多...
JMeter监听器与压测监控之Grafana

JMeter监听器与压测监控之Grafana

Grafana 是一个开源的度量分析和可视化套件&#xff0c;通常用于监控和观察系统和应用的性能。本文将指导你如何在 Kali Linux 上使用 Docker 来部署 Grafana 性能监控平台。 前提条件 Kali Linux&#xff1a;确保你已经安装了 Kali Linux。Docker&#xff1a;确保你的系统已…
阅读更多...
C/C++ 优化，strlen 示例

C/C++ 优化，strlen 示例

目录 C/C optimization, the strlen examplehttps://hallowed-blinker-3ca.notion.site/C-C-optimization-the-strlen-example-108719425da080338d94c79add2bb372 揭开优化的神秘面纱... 让我们来谈谈 CPU 等等&#xff0c;SIMD 是什么&#xff1f; 为什么 strlen 是一个很…
阅读更多...
【Linux学习】【Ubuntu入门】1-8 ubuntu下压缩与解压缩

【Linux学习】【Ubuntu入门】1-8 ubuntu下压缩与解压缩

1.Linux系统下常用的压缩格式 常用的压缩扩展名&#xff1a;.tar、.tar.bz2、.tar.gz 2.Windows下7ZIP软件安装 Linux系统下很多文件是.bz2&#xff0c;.gz结尾的压缩文件。 3.Linux系统下gzip压缩工具 gzip工具负责压缩和解压缩.gz格式的压缩包。 gzip对单个文件进行…
阅读更多...
【Linux网络编程】简单的UDP套接字

【Linux网络编程】简单的UDP套接字

目录 一&#xff0c;socket编程的相关说明 1-1&#xff0c;sockaddr结构体 1-2&#xff0c;Socket API 二&#xff0c;基于Udp协议的简单通信 三&#xff0c;UDP套接字的应用 3-1&#xff0c;实现英译汉字典 一&#xff0c;socket编程的相关说明 Socket编程是一种网络通信…
阅读更多...
【工控】线扫相机小结 第三篇

【工控】线扫相机小结 第三篇

海康软件更新 目前使用的是 MVS_STD_4.3.2_240705.exe &#xff0c;最新的已经到4.4了。 一个大的变动 在上一篇中我们提到一个问题&#xff1a; 需要注意的是&#xff0c;我们必须先设置 TriggerSelector 是 “FrameBurstStart” 还是 “LineStart” 再设置TriggerMode 是 …
阅读更多...
Java基础知识(五)

Java基础知识(五)

文章目录 ObjectObject 类的常见方法有哪些&#xff1f; 和 equals() 的区别hashCode() 有什么用&#xff1f;为什么要有 hashCode&#xff1f;为什么重写 equals() 时必须重写 hashCode() 方法&#xff1f; 参考链接 Object Object 类的常见方法有哪些&#xff1f; Object 类…
阅读更多...
[高阶数据结构(一)]并查集详解

[高阶数据结构(一)]并查集详解

1.前言 本系列会带大家走进高阶数据结构的学习, 其中包括并查集,图论, LRU cache, B树, B树, B*树, 跳表. 其中, 图论中讲解的时间最长, 包括邻接表, 邻接矩阵, 广度优先遍历, 深度优先遍历, 最小生成树中的kruskal算法以及prim算法&#xff1b;最短路径中的dijkstra算法, bell…
阅读更多...
应聘美容师要注意什么？博弈美业收银系统/管理系统/拓客系统分享建议

应聘美容师要注意什么？博弈美业收银系统/管理系统/拓客系统分享建议

随着美容行业的不断发展&#xff0c;成为一名优秀的美容师需要具备一系列重要的技能和品质。无论是在面试过程中还是在实际工作中&#xff0c;以下建议将帮助你在应聘美容师职位时脱颖而出&#xff1a; ▶ 专业技能和资格 首先&#xff0c;确保你具备所需的专业技能和资格。这…
阅读更多...
el-cascader 使用笔记

el-cascader 使用笔记

1.效果 2.官网 https://element.eleme.cn/#/zh-CN/component/cascader 3.动态加载&#xff08;官网&#xff09; <el-cascader :props"props"></el-cascader><script>let id 0;export default {data() {return {props: {lazy: true,lazyLoad (…
阅读更多...
vmWare虚拟环境centos7安装Hadoop 伪分布式实践

vmWare虚拟环境centos7安装Hadoop 伪分布式实践

背景&#xff1a;近期在研发大数据中台&#xff0c;需要研究Hadoop hive 的各种特性&#xff0c;需要搭建一个Hadoop的虚拟环境&#xff0c;本来想着使用dock &#xff0c;但突然发现docker 公共仓库的镜像 被XX 了&#xff0c;无奈重新使用vm 搭建虚拟机。 大概经历了6个小时完…
阅读更多...
Redis基本的全局命令

Redis基本的全局命令

在学习redis基本的全局命令之前呢&#xff0c;我们必须先进入redis-cli客户端才行。 如图&#xff1a; get和set get和set是redis两个最核心的命令。 get&#xff1a;根据key来获取value。 set&#xff1a;把key和value存储进去。 如set命令如图&#xff1a; 对于上述图中&…
阅读更多...
Redis五大基本类型——List列表命令详解（命令用法详解+思维导图详解）

Redis五大基本类型——List列表命令详解（命令用法详解+思维导图详解）

目录 一、List列表类型介绍 二、常见命令 1、LPUSH 2、LPUSHX 3、RPUSH 4、RPUSHX 5、LRANGE 6、LPOP 7、RPOP 8、LREM 9、LSET 10、LINDEX 11、LINSERT 12、LLEN 13、阻塞版本命令 BLPOP BRPOP 三、命令小结 相关内容&#xff1a; Redis五大基本类型——Ha…
阅读更多...
一文详解哋它亢模块的安装与使用

一文详解哋它亢模块的安装与使用

如何安装哋它亢模块 哋它亢模块是扩展哋它亢功能的关键工具&#xff0c;它们涵盖了从数据分析到机器学习的各种应用场景。通过安装和使用这些模块&#xff0c;你可以轻松完成复杂的任务&#xff0c;大幅提升开发效率。哋它亢是一门易于学习且功能强大的编程语言&#xff0c;以…
阅读更多...
C#中的二维数组的应用：探索物理含义与数据结构的奇妙融合

C#中的二维数组的应用：探索物理含义与数据结构的奇妙融合

在C#编程中&#xff0c;二维数组&#xff08;或矩阵&#xff09;是一种重要的数据结构&#xff0c;它不仅能够高效地存储和组织数据&#xff0c;还能通过其行、列和交叉点&#xff08;备注&#xff1a;此处相交处通常称为“元素”或“单元格”&#xff0c;代表二维数组中的一个…
阅读更多...
论文阅读——Intrusion detection systems using longshort‑term memory (LSTM)

论文阅读——Intrusion detection systems using longshort‑term memory (LSTM)

一.基本信息 论文名称&#xff1a;Intrusion detection systems using longshort‑term memory (LSTM) 中文翻译&#xff1a;基于长短期记忆(LSTM)的入侵检测系统 DOI&#xff1a;10.1186/s40537-021-00448-4 作者&#xff1a;FatimaEzzahra Laghrissi1* , Samira Douzi2*, Kha…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023