uniapp中使用条件编译

最新推荐文章于 2024-09-25 08:42:57 发布

Zeng　

最新推荐文章于 2024-09-25 08:42:57 发布

阅读量499

点赞数

文章标签： uni-app javascript 前端 vue.js

ZYing

本文链接：https://blog.csdn.net/sjajjajusja/article/details/131962937

版权

文章介绍了在uniapp中如何利用条件编译进行5+App和H5的兼容性开发，包括#ifdef、#ifndef、#endif的含义以及不同平台的标识。在CSS和JS中，通过条件编译调整样式和图表设置，以适应不同端的需求，如H5的padding和App-PLUS的legend配置等。

摘要由CSDN通过智能技术生成

最近写大屏项目时需同时兼容5+App与H5，用到了uniapp中的条件编译， 5+App与H5的不管是样式还是js中图表样式差距还是很大，根据项目需求可以用到条件编译来实现多端开发从而达到需求。

1. uniapp中 #ifdef、 #ifndef、 #endif三者的意思

属性	作用
#ifdef	仅在某个平台上使用
#ifndef	在除了这个平台的其他平台上使用(非此平台使用）
#endif	结束条件编译

2. 各端的标识意思

标识	平台
APP-PLUS	5+App
H5	H5
MP-WEIXIN	微信小程序
MP	微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	头条小程序
MP-QQ	QQ小程序
APP-PLUS-NVUE	5+App nvue

3. 项目中使用场景

css中

// #ifdef H5
padding: 80px 0 0 5px;
// #endif
		
// #ifndef H5 
//或者直接写 //#ifdef APP-PLUS
padding: calc(100vw*90/1920) 0 0 calc(100vw*5/1920);
// #endif

js使用

legend: {
	orient: "vertical",
	top: "center",
	// #ifdef H5 
	left: "30%",
	itemGap: nowSize(12),
	icon: "circle",
	textStyle: {
		color: "#fff",
		fontSize: nowSize(18)
	},
	// #endif 
	
	// #ifndef H5 
	//或者直接写 //#ifdef APP-PLUS
	left: "60%",
	itemGap: 5,
	icon: "circle",
	itemStyle: {
		borderColor: 'transparent',
		fontSize: 12
	},
	// #endif
	....