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

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运行环境判断和解决跨端兼容性详解完结~

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

WPF MVVM框架

WPF MVVM框架

一、MVVM简介 MVC Model View Control MVP MVVM即Model-View-ViewModel&#xff0c;MVVM模式与MVP&#xff08;Model-View-Presenter&#xff09;模式相似&#xff0c;主要目的是分离视图&#xff08;View&#xff09;和模型&#xff08;Model&#xff09;&#xff0c;具有低…
阅读更多...
【nginx】client timed out和send_timeout的大小设置

【nginx】client timed out和send_timeout的大小设置

websocket连接会断开&#xff0c;抓包检查后发现是中间的代理服务器nginx断开的&#xff0c;同时将后端和浏览器都断开了。将nginx日志调到debug级别后&#xff0c;有下面的断开信息。 [info] 125923#125923: *34 client timed out (110: Connection timed out) while proxyin…
阅读更多...
python视频编辑中的蒙版技术：创意与技术相结合

python视频编辑中的蒙版技术：创意与技术相结合

在数字视频编辑的世界里&#xff0c;蒙版技术是一种强大的工具&#xff0c;它允许我们在视频帧上进行精确的编辑和效果叠加。通过蒙版&#xff0c;我们可以控制哪些部分的视频内容被显示或隐藏&#xff0c;从而创造出各种视觉效果和过渡。在本文中&#xff0c;我们将探讨如何使…
阅读更多...
前端算法：树（力扣144、94、145、100、104题）

前端算法：树（力扣144、94、145、100、104题）

目录 一、树&#xff08;Tree&#xff09; 1.介绍 2.特点 3.基本术语 4.种类 二、树之操作 1.遍历 前序遍历&#xff08;Pre-order Traversal&#xff09;&#xff1a;访问根节点 -> 遍历左子树 -> 遍历右子树。 中序遍历&#xff08;In-order Traversal&#xf…
阅读更多...
【代码审计】常见漏洞专项审计-业务逻辑漏洞审计

【代码审计】常见漏洞专项审计-业务逻辑漏洞审计

❤️博客主页&#xff1a; iknow181 &#x1f525;系列专栏&#xff1a; 网络安全、 Python、JavaSE、JavaWeb、CCNP &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐评论✍ 0x01 漏洞介绍 1、 原理 业务逻辑漏洞是一类特殊的安全漏洞&#xff0c;业务逻辑漏洞属于设计漏洞而非实…
阅读更多...
Spring Boot汽车资讯：数字化时代的驾驶

Spring Boot汽车资讯：数字化时代的驾驶

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…
阅读更多...
Redis的缓存穿透、缓存雪崩、缓存击穿问题及有效解决方案

Redis的缓存穿透、缓存雪崩、缓存击穿问题及有效解决方案

目录 一、缓存穿透 1.简介 2.解决方案 3.修改前的代码 4.修改过后的代码 二、缓存雪崩 1.简介 2.解决方案 三、缓存击穿 1.简介 2.解决方案 3.用代码来实现互斥锁来解决缓存击穿 4.用代码来实现逻辑过期解决缓存击穿 四、缓存穿透和缓存击穿的区别 一、缓存穿透 …
阅读更多...
FPGA 第7讲 简单组合逻辑译码器

FPGA 第7讲 简单组合逻辑译码器

时间&#xff1a;2024.11.15 一、学习内容 1.译码器 译码是编码的逆过程&#xff0c;在编码时&#xff0c;每一种二进制代码&#xff0c;都赋予了特定的含义&#xff0c;即都表示了一个确定的信号或者对象。把代码状态的特定含义翻译出来的过程叫做译码&#xff0c;实现译码操…
阅读更多...
如何在 Ubuntu 上安装 Jupyter Notebook

如何在 Ubuntu 上安装 Jupyter Notebook

本篇文章将教你在 Ubuntu 服务器上安装 Jupyter Notebook&#xff0c;并使用 Nginx 和 SSL 证书进行安全配置。 我将带你一步步在云服务器上搭建 Jupyter Notebook 服务器。Jupyter Notebook 在数据科学和机器学习领域被广泛用于交互式编码、可视化和实验。在远程服务器上运行…
阅读更多...
【Pikachu】XML外部实体注入实战

【Pikachu】XML外部实体注入实战

若天下不定&#xff0c;吾往&#xff1b;若世道不平&#xff0c;不回&#xff01; 1.XXE漏洞实战 首先写入一个合法的xml文档 <?xml version "1.0"?> <!DOCTYPE gfzq [<!ENTITY gfzq "gfzq"> ]> <name>&gfzq;</name&…
阅读更多...
Docker安装稳定版本nginx-1.26.2

Docker安装稳定版本nginx-1.26.2

Linux 安装稳定版本nginx-1.20.2 1、下载镜像、场景配置文件目录 [rootTseng ~]# docker pull nginx:1.26.2 1.26.2: Pulling from library/nginx 2d429b9e73a6: Pull complete 40a0d865309c: Pull complete a949b43e642c: Pull complete 8a756fb620a9: Pull complete 93…
阅读更多...
训练误差or测试误差与特征个数之间的关系--基于R语言实现

训练误差or测试误差与特征个数之间的关系--基于R语言实现

a 生成数据集&#xff0c;数据由 Y X β ϵ YX\beta\epsilon YXβϵ产生&#xff0c;其中 p 20 &#xff0c; n 1000 p20&#xff0c;n1000 p20&#xff0c;n1000 #way1 set.seed(1) p 20 n 1000 x matrix(rnorm(n*p), n, p) B rnorm(p) B[3] 0 B[4] 0 B[9] 0 B[19…
阅读更多...
kafka基础

kafka基础

文章目录 一、Kafka入门1.1、JMS1.2、生产者-消费者模式1.3、ZooKeeper 二、kafka基础架构2.1、producer2.2、kafka cluster2.2.1、broker2.2.2、Controller2.2.3、Topic2.2.4、Partition2.2.5、Replication2.2.6、Leader & Follower 2.3、consumer 一、Kafka入门 Kafka是一…
阅读更多...
HarmonyOs鸿蒙开发实战(10)=＞状态管理-对象数组的属性数据变更刷新UI，基于@Observed 和@ObjectLink装饰器

HarmonyOs鸿蒙开发实战(10)=＞状态管理-对象数组的属性数据变更刷新UI，基于@Observed 和@ObjectLink装饰器

1.条件:基于HarmonyOs5.0.0版本. 2.功能要求&#xff1a;横向列表中每个景点的名称&#xff08;eg: 第二项 “灵隐寺” &#xff09;, 在通过天气接口拿到对应天气后&#xff0c;拼接到名称后面 > 变成&#xff08;“灵隐寺” 天气&#xff09;&#xff09; 3.老规矩先看…
阅读更多...
诡异错误：返回给前端的id被前端自动修改

诡异错误：返回给前端的id被前端自动修改

使用mybatis-plus生成的id&#xff0c;使用雪花算法&#xff0c;是一个long类型的id。 当调用list接口返回给前端后&#xff0c;接口显示数据正常&#xff0c;但是界面上的id不对&#xff0c;多了好几个0&#xff0c;数据都是以0结尾。 由于前端使用vue编写&#xff0c;我不太会…
阅读更多...
Django5 2024全栈开发指南（一）：框架简介、环境搭建与项目结构

Django5 2024全栈开发指南（一）：框架简介、环境搭建与项目结构

目录 一、Python Web框架要点二、Django流程2.1 Django介绍2.1.1 简介2.1.2 特点2.1.3 MVT模式2.1.4 Django新特性2.1.5 Django学习资料 2.2 搭建Django框架开发环境2.2.1 安装Python语言环境2.2.2 安装Django框架 2.3 创建Django项目2.4 Pycharm创建项目2.5 初试Django52.5.1 …
阅读更多...
大模型研究报告 | 2024年中国金融大模型产业发展洞察报告｜附34页PDF文件下载

大模型研究报告 | 2024年中国金融大模型产业发展洞察报告｜附34页PDF文件下载

随着生成算法、预训练模型、多模态数据分析等AI技术的聚集融合&#xff0c;AIGC技术的实践效用迎来了行业级大爆发。通用大模型技术的成熟推动了新一轮行业生产力变革&#xff0c;在投入提升与政策扶植的双重作用下&#xff0c;以大模型技术为底座、结合专业化金融能力的金融大…
阅读更多...
深入内核讲明白Android Binder【一】

深入内核讲明白Android Binder【一】

深入内核讲明白Android Binder【一】 前言一、Android Binder应用编写概述二、基于C语言编写Android Binder跨进程通信Demo0. Demo简介1. 服务的管理者server_manager.c2. Binder服务端代码实现 test_service.c2.1 实现思路2.2 完整实现代码 3. Binder客户端代码实现 test_clie…
阅读更多...
新一代API开发工具,让API调试更快 更简单

新一代API开发工具,让API调试更快 更简单

新一代API开发工具 代理调试 请求测试一站式解决方案 Reqable Fiddler Charles Postman, 让API调试更快 &#x1f680; 更简单 &#x1f44c; 直接上下载地址 根据系统,下载对应的版本即可 https://reqable.com/zh-CN/download/
阅读更多...
LVGL-从入门到熟练使用

LVGL-从入门到熟练使用

LVGL简介 LVGL&#xff08; Light and Versatile Graphics Library &#xff09;是一个轻量、多功能的开源图形库。 1、丰富且强大的模块化图形组件&#xff1a;按钮 、图表 、列表、滑动条、图片等 2、高级的图形引擎&#xff1a;动画、抗锯齿、透明度、平滑滚动、图层混合等…
阅读更多...
最新文章

Copyright @ 2022~2023