随着a和c相继计划上线b小程序，以b小程序为基础，同时进行个性化定制，给此两个公司使用，是亟待需要解决的问题。以绿叶小程序为代表，经过几个月生产环境的考验，功能逐渐成熟，现将b小程序改造成可通用代码，方便快速发布给其他公司使用。UNI-APP中条件编译为改造提供了方便，由于小程序都在运行在微信平台，因此需要自定义条件编译平台。
自定义条件编译平台
uni-app 通过在package.json文件中增加uni-app扩展节点，可实现自定义条件编译平台。
扩展新的平台后，有3点影响：
- 可以在代码里编写自定义的条件编译，为这个新平台编写专用代码
- 运行时可以执行面向新平台的编译运行
- 发行时可以执行面向新平台的编译发行
package.json扩展配置用法：
{
/**
* package.json其它原有配置
* 拷贝代码后请去掉注释！
*/
"uni-app": {// 扩展配置
"scripts": {
"custom-platform": { //自定义编译平台配置，可通过cli方式调用
"title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
"browser":"", //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
"env": {//环境变量
"UNI_PLATFORM": "", //基准平台
"MY_TEST": "", // ... 其他自定义环境变量
},
"define": { //自定义条件编译
"CUSTOM-CONST": true //自定义条件编译常量，建议为大写
}
}
}
}
}
扩展琦王花生平台
在package.json中配置如下代码：
// 添加运行，打包命令
// 本地运行
"aDev": "cross-env NODE_ENV=development A_NAME=a uniapp-cli custom mp-a",
// 打包
"aPro": "cross-env NODE_ENV=production A_NAME=a uniapp-cli custom mp-a",
// 添加平台
"mp-a": {
"title": "a小程序",
"env": {
"UNI_PLATFORM": "mp-weixin",
"A_NAME": "a" // 添加环境变量，标识是哪个平台
},
"define": {
"MP-A": true
}
}
那么就可以在代码中使用自定义平台编译了：#ifdef MP-A ... #endif
底部TAB栏资源区分
底部tab可加载网络图片，但这有限制依赖小程序的基础版本库，在手机上可自定义最低运行版本库，可正常运行和显示。但在电脑端打开小程序，无法显示，电脑端微信无法规定组件最低版本库，由于项目人员经常在电脑端远程演示，需要向客服宣传产品，不能有如此明显的问题。
当然可以自定义tab栏，独自封装加载网路图片没问题。和现状问题比较下来，方向还是解决加载本地图片成本小一点，出现的问题也相对较少。读取本地图片的问题在于超包问题，如果不超包，读取本地是最佳方案。
本地图片均放置在static文件夹中，static也是可以条件编译的，但仅限于h5,app-plus,mp-weixin,mp-qq,mp-baidu,mp-alipay这几个平台，不支持自定义的平台。而且我们定义的编译平台均在微信平台的基础上，无法再细分。
探究一下，uni-app的static条件编译是利用copy-webpack-plugin插件进行拷贝static下的文件资源，可控制的平台写死在UNI的代码中，自定义的走这条路是不太行了。于是想到了vue.config.js，可以扩展webpack配置，merge进去，达到我们想要的条件编译。
vue.config.js代码如下：
// uni-app使用的也是这个插件，无需重新下载
const CopyPlugin = require('copy-webpack-plugin')
let cpObj = {
from: 'src/static/b/',
to: 'static/b/',
toType: 'dir'
}
if (process.env.A_NAME) {
cpObj = {
from: 'src/static/' + process.env.A_NAME + '/',
to: 'static/' + process.env.A_NAME + '/',
toType: 'dir'
}
}
config.plugins.push(
new CopyPlugin([cpObj])
)
A_NAME环境变量在这里使用到了，区分哪个环境。可以看到，copy-webpack-plugin插件最终接收的是数组参数，到编译是会和uni-app的配置merge，先执行cpObj，先将图片复制过去，然后再执行uni-app的配置，其配置为：
{
from: 'src/static/',
to: 'static/',
toType: 'dir',
ignore: [
'h5',
'app-plus',
'mp-qq',
'mp-baidu',
'mp-alipay'
]
}
即：当前是微信平台，忽略除微信平台之外的其他平台，经过扩充，自定义编译的平台也可以条件编译static资源。
tab配置可以在pages.json中配置，也可以使用uni.setTabBarItem()设置
{
'pagePath': 'pages/home/home',
'iconPath': 'static/a/ic_homepage_normal.png',
'selectedIconPath': 'static/a/ic_homepage_selected.png',
'text': '首页'
}
至此，tab引入静态资源也改造完成，功能符合要求，电脑端显示正常。
