uni-app一套代码实现多个小程序动态编译
Uniapp第一步配置package.json文件（没有的话自行在根目录创建即可）
uni-app 通过在package.json文件中增加uni-app扩展节点，可实现自定义条件编译平台。
package.json扩展配置用法：（注意package.json中不能有注释否者会报错），代码如下：
{
"uni-app": {
"scripts": {
"wxOne": {
"title":"小程序一",
"env": {
"UNI_PLATFORM": "mp-weixin",
"MY_TEST": "wxOne",
},
"define": {
"CUSTOM-ONE": true
}
},
"wxTwo": {
"title":"小程序一",
"env": {
"UNI_PLATFORM": "mp-weixin",
"MY_TEST": "wxTwo",
},
"define": {
"CUSTOM-TWO": true
}
}
}
}
}
第二步配置动态变量文件env.js，在根目录创建env.js，代码如下：
module.exports = {
// 小程序1联调环境
wxOne: {
requestUrl: 'https://one.com/',
appid: '小程序appid'
},
// 小程序1联调环境
wxTwo: {
requestUrl: 'https://two.com/',
appid: '小程序appid'
},
}
变量名保持和package.json中的NAME一致，方便调用
获取公用变量的方法（process.env.config[process.env.NAME].requestUrl）
第三步在根目录创建src文件，src目录下创建modifyManifest.js（官网链接：https://uniapp.dcloud.net.cn/collocation/vue-config.html）代码如下：
// 读取 manifest.json ，修改后重新写入
const fs = require('fs')
const manifestPath = './src/manifest.json'
let Manifest = fs.readFileSync(manifestPath, { encoding: 'utf-8' })
function replaceManifest(path, value) {
const arr = path.split('.')
const len = arr.length
const lastItem = arr[len - 1]
let i = 0
let ManifestArr = Manifest.split(/\n/)
for (let index = 0; index < ManifestArr.length; index++) {
const item = ManifestArr[index]
if (new RegExp(`"${arr[i]}"`).test(item)) ++i;
if (i === len) {
const hasComma = /,/.test(item)
ManifestArr[index] = item.replace(new RegExp(`"${lastItem}"[\\s\\S]*:[\\s\\S]*`), `"${lastItem}": ${value}${hasComma ? ',' : ''}`)
break;
}
}
Manifest = ManifestArr.join('\n')
}
// 使用
replaceManifest('app-plus.usingComponents', false)
replaceManifest('app-plus.splashscreen.alwaysShowBeforeRender', false)
replaceManifest('mp-baidu.usingComponents', false)
// 替换appid
const appid = configUrl[process.env.UNI_SCRIPT].appid;
replaceManifest('mp-weixin.appid', appid);
fs.writeFileSync(manifestPath, Manifest, {
"flag": "w"
})
module.exports = {
// ...
}
第四步配置vue.config.js（没有的话自行在根目录创建即可），代码如下：
let configUrl = require('./common/env.js');
// 动态修改appid，调试环境时，可以先注释掉
require('./src/modifyManifest.js');
module.exports = {
chainWebpack: config => {
config
.plugin('define')
.tap(args => {
args[0]['process.env.config'] = JSON.stringify(configUrl)
return args
})
}
}
第五步HBuilderX会根据package.json的扩展配置，在运行、发行菜单下，生成自定义小程序一和小程序二
直接运行将会按照appId来动态切换不同的小程序主题，并将代码运行到微信开发者工具，以实现同一套代码动态配置和发行不同的小程序