一、简介
官方自定义条件编译文档。

举例：开发一个 wx 小程序，但是这小程序需要支持打包多种 UI 风格，如果用 if 或者现有的条件编译肯定是不能满足的，这时候就需要以 wx 小程序 为 基准平台，在扩展一个新的 子平台 进行条件编译，但是它还是属于 基准平台，只是在这个 基准平台 上，在多了一层独立条件编译，专门用来打包或开发这个 UI 风格。

自定义条件编译扩展需放到 package.json 文件中，格式如下：

// 拷贝代码后去掉注释，不能包含注释，放到 package.json 中即可，推荐文件底部
“uni-app”: {
// 扩展配置
“scripts”: {
// 自定义编译平台配置，可通过 cli 方式调用
“custom-platform”: {
// 会显示在 HBuilderX 中的 <运行/发行> 菜单中
“title”: “自定义扩展名称”,
// 运行到的目标浏览器，仅当 UNI_PLATFORM 为 h5 时有效
“browser”: “”,
// 环境变量
“env”: {
// 基准平台
“UNI_PLATFORM”: “”,
// … 其他自定义环境变量
“MY_TEST”: “”
},
// 自定义条件编译
“define”: {
// 自定义条件编译常量，建议为大写，代码中也是以此代码作为条件编译
“CUSTOM-CONST”: true
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
注意：只能扩展 web 和 小程序 平台，不能扩展 app 打包。并且扩展小程序平台时只能基于指定的 基准平台 扩展 子平台，不能扩展 基准平台。

UNI_PLATFORM 仅支持填写 uni-app 默认支持的基准平台，目前仅限如下枚举值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq。

browser 仅在 UNI_PLATFORM 为 h5 时有效，目前仅限如下枚举值：chrome、firefox、ie、edge、safari、hbuilderx。

package.json 文件中不允许出现注释，否则扩展配置无效。

vue-cli 需更新到最新版（能创建项目即可，不用纠结），HBuilderX 需升级到 2.1.6+ 版本。

二、操作
按官方案例，如下是一个 自定义钉钉小程序（MP-DINGTALK）的 package.json 示例配置（拷贝代码记得去掉注释）：

“uni-app”: {
“scripts”: {
“mp-dingtalk”: {
“title”:”钉钉小程序”,
“env”: {
“UNI_PLATFORM”: “mp-alipay”
},
“define”: {
“MP-DINGTALK”: true
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
也可以将上面 自定义钉钉小程序（MP-DINGTALK）理解为：在 支付宝小程序 基础上，增加了一个新 UI 模板，到时候只需要条件编译运行或打包就能得到一个 支付宝小程序，并且还是 钉钉小程序 风格的小程序，或者其他风格的小程序，可以自行更具情况添加。

在项目文件中使用

// #ifdef MP
console.log(‘小程序平台通用代码（含钉钉）’)
// #endif
// #ifdef MP-ALIPAY
console.log(‘支付宝平台通用代码（含钉钉）’)
// #endif
// #ifdef MP-DINGTALK
console.log(‘钉钉平台特有代码’)
// #endif
1
2
3
4
5
6
7
8
9
(二选一即可)使用 命令行 运行或发布项目

# 运行项目
$ npm run dev:custom mp-dingtalk

# 发布项目
$ npm run build:custom mp-dingtalk
1
2
3
4
5

(二选一即可)也可以使用 HBuilderX 运行或发布项目

 

 

编译完成后，会得到对应平台的代码包，使用对应平台的开发工具运行即可，当前自定义编译的 钉钉小程序 是以 支付宝小程序 为基准的，其实打包出来就是一个 支付宝小程序，所以用哪个开发工具就不用说了。

 

自定义编译到这就完了！其他的案例在 官方自定义条件编译文档 中还有，只要理解意思后都一样。