uni-app 将已经将可以跨平台兼容处理的组件及 API 等进行了封装，但是部分平台的特性无法跨平台。
由此，uni-app 提供了条件编译的方案，来处理不同平台的特定或差异。
语法
-
ifdef：if defined 正向条件，也就是说在 XX 平台下生效。
-
ifndef：if not defined 反向条件，在 XX 平台不生效。即除了 XX 平台，其它平台都生效。
-
endif：条件结束
- %PLATFORM%：平台名称
%PLATFORM% 可取值
- APP-PLUS
- APP-PLUS-NVUE
- H5
- MP-WEIXIN
- MP-ALIPAY
- MP-BAIDU
- MP
示例
以下这段代码，只会在 5+App 环境下生效/存在。
// #ifdef APP-PLUS
const uuid = plus.device.uuid;
// #endif
除了支持单个平台的条件编译外，还支持使用 || 来满足多平台条件编译。
这个组件会在微信小程序及百度小程序环境下生效：
<!-- #ifdef MP-WEIXIN || MP-BAIDU -->
<button @getuserinfo="getUserInfo">获取用户信息</button>
<!-- #endif -->
不同文件或语言中，注释的方式有所不同。在实际使用中一定要注意，不要随意复制导致语法错误。
组件
组件的注释，就是 HTML 标签的注释语法。
<!-- #ifdef MP-WEIXIN -->
<ad unit-id="123456789"></ad>
<!-- #endif -->
CSS
在 CSS 中使用条件编译，往往是因为某些平台的内置组件的样式，会影响到一血界面的渲染。
/* #ifdef MP-ALIPAY*/
input {
padding: 0;
}
/* #endif */
还有一种场景就是不同平台下，页面的样式的确会有设计上的差异。
这种情况，可以使用 CSS 的条件编译来处理，也可以配合组件的条件编译来处理。
.app-text {
color: #007AFF;
}
.weixin-text {
color: #FF3333;
}
<!-- #ifdef APP-PLUS -->
<text class="app-text">text</text>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<text class="weixin-text">text</text>
<!-- #endif -->
这样的话，在 5+App 上这个文字的颜色是蓝色，在微信小程序上就是红色。
这个方案还可以进一步调整，就是在计算属性中使用条件编译，动态绑定组件的 class。
JavaScript
平台特有的 API 或功能，需要使用条件编译来处理。
// #ifdef APP-PLUS
plus.speech.startRecognize(options, function (result) {
console.log('语音识别成功');
}, function (error) {
console.log('语音识别失败');
});
// #endif
pages.json
除了在页面内容的代码中支持条件编译外，uni-app 还支持在 pages.json 中通过条件编译来组织多平台的页面。
这样做可以大幅减少生成的代码体积，尤其是在小程序平台。
当然，普通的 json 文件中是不支持注释的。pages.json 中条件编译的校验以及代码提示等，是由 HBuilderX 来支持完成的。
{
"globalStyle": {
"navigationBarBackgroundColor": "#FF3333"
},
"pages": [{
"path": "pages/index/index"
}
// #ifdef APP-PLUS
, {
"path": "pages/speech/speech"
}
// #endif
]
}
在 pages.json 中使用条件编译，需要注意以下几个点：
- 如果页面是 pages 的最终一项，那么分隔符逗号需要在花括号前。上面例子，就是这种场景。
- globalStyle 的条件编译，推荐使用平台节点来处理。
{
"globalStyle": {
"navigationBarBackgroundColor": "#FF3333",
"mp-weixin": {
"backgroundColor": "#FFFFFF"
},
"mp-alipay": {
"titleBarColor": "#FFFFFF"
}
},
"pages": [{
"path": "pages/index/index"
}
]
}
平台节点下面的配置，建议参考特定平台的配置说明，直接使用平台的特有属性。
static
为了进一步减少应用的包体积，用于存放静态资源的 static 目录同样支持了条件编译。
支持的目录名
- app-plus
- h5
- mp-weixin
- mp-alipay
- mp-baidu
具体的使用，可以参考下 hello-uniapp 中在 static/app-plus 下存放 location@3x.png。
hello-uniapp 中这样处理，解决了两个问题：
- iOS 平台地图的覆盖物，使用高清图时，文件名称需要以 @2x/@3x 结尾。
- 支付宝小程序，项目中不能出现 @ 等特殊符号命名的文件。
结束
uni-app 中的条件编译，就分享到这里。大家在使用的过程中，如果有问题或者更好的想法，欢迎在下方进行讨论。
