什么是条件编译

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

一、写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

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

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

具体取值不在一一列举，大家可以前往官网查看：uni-app条件编译

二、支持的文件

.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 ；
使用条件编译请保证编译前和编译后文件的正确性，比如json文件中不能有多余的逗号；

使用示例

1、pages.json中使用

为什么要先说在pages.json文件中使用呢？

相信大家或多或少都有踩坑，首先JSON文件是特殊的文件，上面官网中也提到，要确保编译前后的正确性，不能有多余的空格；

示例：

下面的代码是我在真实项目当中使用的，方便阅读缩减了pages中的内容，可以发现里面的tabBar、globalStyle都是有两套的，所以可以编译到小程序和app有不同的效果，重点是逗号放的位置，如果位置放错一定会导致app或者小程序有一方编译失败，或者两方都会出现pages.json编译失败

{"easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},"pages": [// #ifndef MP-WEIXIN{"path": "pages/index/index","style": {//去掉顶部导航栏"app-plus": {"titleNView": false}}},{"path": "pages/login/login","style": {"app-plus": {"titleNView": false}}},{"path": "pages/registered/registeredOne","style": {"app-plus": {"titleNView": false}}}, {"path": "pages/registered/registeredTwo/registeredTwo","style": {"app-plus": {"titleNView": false}}}, {"path": "pages/registered/registeredThree/registeredThree","style": {"app-plus": {"titleNView": false}}}, {"path": "pages/registered/registeredFour/registeredFour","style": {"navigationBarTitleText": "成爲會員","enablePullDownRefresh": false,"app-plus": {"titleNView": {}}}}, // #endif{"path": "platforms/mp-weixin/discount/discount","style": {"navigationBarTitleText": "F-REWARD","enablePullDownRefresh": false}},{"path": "platforms/mp-weixin/mine/mine","style": {"navigationBarTextStyle": "white","navigationBarTitleText": "","enablePullDownRefresh": false// "disableScroll": true}},{"path": "platforms/mp-weixin/printing/printing","style": {"navigationBarTitleText": "F-REWARD","enablePullDownRefresh": false}},{"path": "platforms/mp-weixin/coupons/coupons","style": {"navigationBarTitleText": "F-REWARD","enablePullDownRefresh": false}}, {"path": "platforms/mp-weixin/favorite/favorite","style": {"navigationBarTitleText": "F-REWARD","enablePullDownRefresh": false}}]//#ifndef MP-WEIXIN,"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "CRM","navigationBarBackgroundColor": "#FFFFFF","backgroundColor": "#F8F8F8","app-plus": {"background": "#efeff4"}}// #endif// #ifndef MP-WEIXIN,"tabBar": {"color": "#000000","selectedColor": "#000000","backgroundColor": "#F8F8F8","list": [{"pagePath": "pages/tabBar/home/home","iconPath": "./static/tabbar/zhuye.png","selectedIconPath": "./static/tabbar/zhuye.png","text": "最新簡介"},{"pagePath": "pages/tabBar/activity/activity","iconPath": "./static/tabbar/liwu.png","selectedIconPath": "./static/tabbar/liwu.png","text": "優惠購買"},{"pagePath": "pages/tabBar/code/code","iconPath": "./static/tabbar/erweima.png","selectedIconPath": "./static/tabbar/erweima.png"},{"pagePath": "pages/tabBar/search/search","iconPath": "./static/tabbar/sousuo.png","selectedIconPath": "./static/tabbar/sousuo.png","text": "搜索店鋪"},{"pagePath": "pages/tabBar/mine/mine","iconPath": "./static/tabbar/wode.png","selectedIconPath": "./static/tabbar/wode.png","text": "我的账户"}]}// #endif// #ifdef MP-WEIXIN,"globalStyle": {"navigationBarBackgroundColor": "#000","navigationBarTextStyle": "white","navigationBarTitleText": ""}// #endif// 小程序tabbar// #ifdef MP-WEIXIN,"tabBar": {"color": "#000000","selectedColor": "#f00","backgroundColor": "#fff","list": [{"pagePath": "platforms/mp-weixin/coupons/coupons","iconPath": "./static/mp-weixin/tabbar/coupons.png","selectedIconPath": "./static/mp-weixin/tabbar/selectedCoupons.png","text": "電子優惠券"}, {"pagePath": "platforms/mp-weixin/printing/printing","iconPath": "./static/mp-weixin/tabbar/printing.png","selectedIconPath": "./static/mp-weixin/tabbar/selectedPrinting.png","text": "電子印花"},{"pagePath": "platforms/mp-weixin/mine/mine","iconPath": "./static/mp-weixin/tabbar/mine.png","selectedIconPath": "./static/mp-weixin/tabbar/selectedMine.png","text": "我的賬戶"},{"pagePath": "platforms/mp-weixin/discount/discount","iconPath": "./static/mp-weixin/tabbar/discount.png","selectedIconPath": "./static/mp-weixin/tabbar/selectedDiscount.png","text": "優惠獎賞"},{"pagePath": "platforms/mp-weixin/favorite/favorite","iconPath": "./static/mp-weixin/tabbar/love.png","selectedIconPath": "./static/mp-weixin/tabbar/selectedLove.png","text": "我的最愛"}]}// #endif
}

2、API的条件编译

// #ifdef %PLATFORM%

平台特有的API实现

// #endif

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

示例，如下代码不会在 H5 平台上出现：

除了支持单个平台的条件编译外，还支持多平台同时编译，使用 || 来分隔平台名称。

示例，如下代码会在 App 和 H5 平台上出现：

3、组件的条件编译

平台特有的组件

示例，如下公众号关注组件仅会在微信小程序中出现：

<view><view>微信公众号关注组件</view><view><!-- uni-app未封装，但可直接使用微信原生的official-account组件--><!-- #ifdef MP-WEIXIN --><official-account></official-account><!-- #endif --></view>
</view>

4、样式的条件编译

/* #ifdef %PLATFORM% */

平台特有样式

/* #endif */

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

正确写法

错误写法

5、static目录的条件编译

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

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

┌─static

│ ├─mp-weixin

│ │ └─a.png

│ └─b.png

├─main.js

├─App.vue

├─manifest.json

└─pages.json

6、整体目录的条件编译

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

注意

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

uniapp 条件编译的使用相关推荐

uni-app条件编译：#ifdef #ifndef #endif
uni-app条件编译:#ifdef #ifndef #endif 语法: // #ifdef %PLATFORM% 这些代码只在该平台编译 // #endif #ifdef : if defined ...
uni-app条件编译解决各端差异
跨端兼容 uni-app 已将常用的组件.JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足. 但每个平台有自己的一些特性,因此会存在一些无法跨 ...
uni-app条件编译
写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾. #ifdef:if defined 仅在某平台存在 #ifndef:if not defined ...
uniapp条件编译
写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾. #ifdef:if defined 仅在某平台存在 #ifndef:if not defined ...
语法速通 uni-app随笔【uni-app】【微信小程序】【vue】
文章目录 1.微信小程序 1.1.wx 小程序工程目录 1.2.wx 小程序标签 1.3.wx 小程序数据绑定 1.4.wx 小程序条件判断 1.5.wx 小程序列表渲染 2.uni-app ...
uniapp判断当前运行环境 app h5 微信小程序百度小程序
hbuilderX最新版本现在已经支持在代码中获取当前所处环境仅3.4.10+版本以上才支持,如果您的hbuilderX版本不是这个版本的需要先升级一下版本 hbuilderx下载选择3.4.11 ...
前端面试题全面总结！
HTML 1.行内元素有哪些?块级元素有哪些?空元素有哪些? 行内元素:span.img.input.em.i.label... 块级元素:p.h1.div.ol.ul.table.form... 行 ...
Gradle –如果测试失败，如何继续构建
默认情况下,如果任何单元测试失败,则Gradle构建过程将停止并失败. $ gradle build:clean :compileJava :processResources :classes :co ...
Paint画笔Shader之LinearGradient的用法
参数讲解 /** Create a shader that draws a linear gradient along a line. 创建一个shader绘制一条线@param x0 The x-c ...

uniapp 条件编译的使用