精选文章 uni-app中使用条件编译(7)

uni-app中使用条件编译(7)

作者:郭宝 时间: 2020-07-27 02:18:55
郭宝 2020-07-27 02:18:55

跨端兼容:

uni-app 已将常用的组件、JS API 封装进框架中,开发者按照 uni-app 规范开发可以保证多平台兼容,大部分业务均可直接满足。但每一个平台有自己的一些特性,因此会存在一些无法跨平台的情况。

在 C 语言中,通过 #ifdef、#ifndef的方式,为windows、mac 等不同的 os 编译不同的代码。 uni-app 参考这个思路,为 uni-app 提供了条件编译手段。

 

条件编译:

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

写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。

  • #ifdef  是if defined的缩写,表示仅在某平台存在
  • #idndef 是if not defined的缩写,表示除了某平台均存在
  • %PLATFORM%  表示平台的名称 
条件编译写法说明

#ifdef APP-PLUS

需条件编译的代码

#endif

表示仅出现在App平台下的代码

#ifndef H5

需要条件编译的代码

#endif

表示除了H5平台,其它平台均存在的代码

#ifdef H5 || MP-WEIXIN

需要条件编译的代码

#endif

在H5平台或微信小程序平台存在的代码(ps:这里只有或|| ,不可能出现&&,因为没有交集)

 

%PLATFORM% 可取值如下:

平台
APP-PLUSApp
APP-PLUS-NVUEApp nvue
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO字节跳动小程序
MP-QQQQ小程序
MP-360360小程序
MP微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序
quickapp-webview快应用通用(包含联盟、华为)
quickapp-webview-union快应用联盟
quickapp-webview-huawei快应用华为

 

条件编译支持的文件:

  • .vue
  • .js
  • .css
  • pages.json
  • 各预编译语言文件,如:.scss、less、.stylus、.ts、.pug

注意:条件编译是利用注释实现的,在不同语法里注释写法不一样,js 使用  // 注释 、css 使用 /* 注释 */ 、vue/nvue 模板里使用  

 

API的条件编译

写法:

// #ifdef  %PLATFORM%
平台特有的API实现
// #endif

如下代码仅在App下出现,示例如下:

		created() {
			// #ifdef APP-PLUS
			console.log('在App中打印')
			// #endif
			
			// #ifdef MP-WEIXIN
			console.log('在微信小程序中打印')
			// #endif
		},

 

组件的条件编译

写法:


平台特有的组件

示例: 

		
		我是在App平台编译的代码
		
		
		
		我是在H5平台编译的代码
		

样式的条件编译

写法:

/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */

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

 示例:

page.json 的条件编译

下面的页面,只有运行至 App 时才会编译进去。

	// #ifdef APP-PLUS
	{
		"path": "pages/me/me",
		"style": {
			"navigationBarTitleText": "我的"
		}
	}
	// #endif

全部 page.json 文件如下:

{
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页"
		}
	},
	// #ifdef APP-PLUS
	{
		"path": "pages/me/me",
		"style": {
			"navigationBarTitleText": "我的"
		}
	}
	// #endif
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#007AFF",
		"backgroundColor": "#FFFFFF"
	},
	"tabBar": {
	    "color": "#8B8B8B", // 表示tabBar item项中文字默认的颜色
	    "selectedColor": "#F63515", // 表示tabBar item项中文字选中的颜色
	    "borderStyle": "black",// 表示tabBar 上边框的颜色,目前只支持 black/white
	    "backgroundColor": "#ffffff",// 表示 tabBar 的背景颜色
	    "list": [{
	        "pagePath": "pages/index/index", // 表示第一tab项的页面路径
	        "iconPath": "static/image/home_default.png", // 表示当前 tab 未选中时所显示的图标路径
	        "selectedIconPath": "static/image/home_select.png", // 表示当前 tab 选中时所显示的图标文件路径
	        "text": "首页" // 表示当前 tab 的文字
	    }, {
	        "pagePath": "pages/me/me",
	        "iconPath": "static/image/me_default.png",
	        "selectedIconPath": "static/image/me_select.png",
	        "text": "我的"
	    }]
	}
}

 

不同平台下的特有功能,以及小程序平台的分包,都可以通过 pages.json 的条件编译来更好地实现。这样,就不会在其它平台产生多余的资源,进而减小包体积。

json的条件编译,如不同平台的key名称相同,cli项目下开发者自己安装的校验器会报错,需自行关闭这些校验器对json相同key的校验规则。如果使用HBuilderX的校验器,无需在意此问题,HBuilderX的语法校验器为此优化过。

 

static 目录的条件编译

在不同平台,引用的静态资源可能也存在差异,通过 static 的的条件编译可以解决此问题,static 目录下新建不同平台的专有目录(目录名称同 %PLATFORM% 值域,但字母均为小写),专有目录下的静态资源只有在特定平台才会编译进去。

如以下目录结构,a.png 只有在微信小程序平台才会编译进去,b.png 在所有平台都会被编译。

    
┌─static                
│  ├─mp-weixin
│  │  └─a.png     
│  └─b.png
├─main.js        
├─App.vue      
├─manifest.json 
└─pages.json     

整体目录条件编译

如果想把各平台的页面文件更彻底的分开,也可以在uni-app项目根目录创建platforms目录,然后在下面进一步创建app-plusmp-weixin等子目录,存放不同平台的文件。

注意

  • platforms目录下只支持放置页面文件(即页面vue文件),如果需要对其他资源条件编译建议使用static 目录的条件编译

 

注意:

  • Android 和 iOS 平台不支持通过条件编译来区分,如果需要区分 Android、iOS 平台,请通过调用 uni.getSystemInfo 来获取平台信息。支持ifiosifAndroid代码块,可方便编写判断。
  • 有些跨端工具可以提供js的条件编译或多态,但这对于实际开发远远不够。uni-app不止是处理js,任何代码都可以多端条件编译,才能真正解决实际项目的跨端问题。另外所谓多态在实际开发中会造成大量冗余代码,很不利于复用和维护。举例,微信小程序主题色是绿色,而百度支付宝小程序是蓝色,你的应用想分平台适配颜色,只有条件编译是代码量最低、最容易维护的。
  • 有些公司的产品运营总是给不同平台提不同需求,但这不是拒绝uni-app的理由。关键在于项目里,复用的代码多还是个性的代码多,正常都是复用的代码多,所以仍然应该多端。而个性的代码放到不同平台的目录下,差异化维护。
勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:spring boot的qurartz的简单实现

下一篇:js基础-2

您可能感兴趣

  • 支付宝架构到底有多牛逼?看完这篇你就明白了!

    点击上方 "程序员小乐"关注, 星标或置顶一起成长 每天凌晨00点00分, 第一时间与你相约 每日英文 Leave all your unhappiness to yesterday, give all your hopes to tomorrow, and do all your hard work today. 把所有的不快给昨天,把所有的希望给明天,把所有的努力给今天。 每日掏心话 所...

  • Zigbee无线技术介绍与开发点滴总结

    在项目实践学习中记录的点滴笔记,整理成章,希望能给大家提供工作与学习思路。 往期文章: 1、无线通信项目开发 - NB-IOT、LoRa、433、GPRS、2.4G、PKE近场通信,基础理论与开发点滴总结 2、蓝牙无线技术(BLE)与开发点滴总结 3、Zigbee无线技术与开发点滴总结 4、WIFI无线技术与开发点滴总结 本章目录 一、zigbee技术特点 二、zigbee项目开发杂记 三、...

  • android stdudio OpenCV NDK 开发环境搭建 之找查条形码

    开发环境 Android Studio 3.6 SDK 28 NDK:android-ndk-r17b JAVA JDK 1.8 1,opencv sdk 下载 我这里下载的是 3.4.8 OpenCV-3.4.8-android-sdk 下载地址 或者:https://github.com/opencv/opencv 第二步:解压 810M java中存放的是我们接下来使用的Android...

  • App流畅度优化:利用字节码插桩实现一个快速排查高耗时方法的工具

    App流畅度优化:利用字节码插桩实现一个快速排查高耗时方法的工具 我们产线的主流程页面中有几个比较复杂的页面在版本迭代中流畅度频繁出现反复,经常由于开发的不注意导致变卡,主要是对流畅度缺少必要的监控和可持续的优化手段,这个系列是对上半年实践App流畅度监控、优化过程中的一点总结,希望可以给需要的同学一点小参考。 当然App内存上的优化,尽量减少内存抖动也能显著提升流畅度,内存优化方面可以参考...

  • 收藏!NLP在金融投资领域的应用

    标星★置顶公众号 爱你们♥ 作者:泰极 | 华泰证券数字科技 1 引言 2017年被称为中国金融科技的元年,这两年来,以人工智能为代表的新技术对金融业产生越来越重要的影响,人工智能不是一个新名词,在历史的长河里,它从人们曾忘却的暗流慢慢汇聚成今天的大江大河。自然语言处理作为人工智能的支流,也随着它的发展浪潮逐渐展现它的潜能。这次浪潮如此之大,让全球的金融行业都感受到它的湿意,虽然人工智能不能...

  • web前端框架常见问题

    面向对象: 面向对象是一种程序开发的方法,它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的灵活性、重用性和扩展性。对象是把数据及对数据的操作方法放在一起,作为一个相互依存的整体。再说一下类与对象,类描述了一组有相同特性和相同行为的对象,具有相同属性和相同方法的对象的抽象就是类。即,对象的抽象是类,类的实例是对象。在面向对象的编程中,把用类创建对象的过程称为实例化。 面向过程与面...

  • 认识微服务

    0.学习目标 了解系统架构的演变 了解RPC与Http的区别 掌握HttpClient的简单使用 知道什么是SpringCloud 独立搭建Eureka注册中心 独立配置Robbin负载均衡 -Xms128m -Xmx128m 1.系统架构演变 随着互联网的发展,网站应用的规模不断扩大。需求的激增,带来的是技术上的压力。系统架构也因此也不断的演进、升级、迭代。从单一应用,到垂直拆分,到分布式...

  • 原生JS灵魂考核, 你能回答出来几题?

    笔者最近在对原生JS的知识做系统梳理,因为我觉得JS作为前端工程师的根本技术,学再多遍都不为过。打算来做一个系列,一共分三次发,以一系列的问题为驱动,当然也会有追问和扩展,内容系统且完整,对初中级选手会有很好的提升,高级选手也会得到复习和巩固。敬请大家关注! 第一篇: JS数据类型之问——概念篇 1.JS原始数据类型有哪些?引用数据类型有哪些? 在 JS 中,存在着 7 种原始值,分别是: ...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。