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 中的条件编译，就分享到这里。大家在使用的过程中，如果有问题或者更好的想法，欢迎在下方进行讨论。