前言
这篇文章主要介绍uniapp在Hbuilderx 中，通过工程化，区分不同环境、动态修改小程序appid以及自定义条件编译，解决代码发布和运行时手动切换问题。
背景
当我们使用uniapp开发同一个项目发布不同的环境二级路径不同时，这时候我们就要根据环境来添加运行的基础路径
product：xxx-product-api.xxx.com:9002/productConf…
text：xxx-text-api.xxx.com:9002/textConfig/
但是当我们使用HBuilderX开发时你会发现manifest.json手动配置Web配置时只能配置一个像这种情况
碰到这种情况你会怎么处理?你是不是会在每次打包发布之前变更该环境对应基础路径?
在企业级的应用中，通常会分为，开发、联调、生产等多个环境，一个项目可能要发布到多个微信小程序，在工程化中，通过使用不同的打包命令设置不同的环境变量，解决不同环境各变量的内容需手动修改的问题，比如：接口、前缀、appid等；在使用uniapp开发项目时，通常使用Hbuilder可视化运行项目，点击运行编译出来都代码环境是（development），点击发布运行编译出来的代码是（production），分别对应开发和生产，使用process.env.NODE_ENV来获取运行环境。但是在很多企业项目中，就两个环境，很难满足使用场景。
为了解决以上问题，通过在package.json中增加增加 uni-app节点，自定义条件编译和环境，通过modifyManifest.js重写appid，扩展vue.config.js配置，用环境标识区分接口。
正文
当我们使用HX创建项目时项目中是没有package.json文件和vue.config.js文件的
1、在根目录下创建package.json文件，用于配置多个环境也可用于Hx自定义发行
{
"dependencies": {
"js-base64": "^3.7.5",
"moment": "^2.29.4"
},
"uni-app": {
"scripts": {
"wxTest": {
"title": "微信小程序 测试",
"env": {
"UNI_PLATFORM": "mp-weixin",
"NAME": "wxTest"
}
},
"wxProd": {
"title": "微信小程序 生产",
"env": {
"UNI_PLATFORM": "mp-weixin",
"NAME": "wxProd"
}
},
"h5Browser": {
"title": "H5浏览器",
"browser": "hbuilderx",
"env": {
"UNI_PLATFORM": "h5",
"NAME": "h5Browser"
}
}
}
},
"devDependencies": {
"postcss-preset-env": "^9.2.0",
"postcss-px-to-viewport": "^1.1.1",
"postcss-px-viewport": "^0.0.4",
"postcss-viewport-units": "^0.1.6"
}
}
2、在根目录下创建env.js文件，用语配置不同环境变量下参数
// H5浏览器环境
const h5Browser = {
baseUrl: 'https://xxx.xxx.com',
filesUrl:'https://xxx.xxx.com',
appid: 'wxf000000000000009',
appName:'h5测试端'
}
//微信小程序 测试环境
const wxTest = {
baseUrl: 'https://xxx.xxx.com',
filesUrl:'https://xxx.xxx.com',
appid: 'wxf000000000000001',
appName:'微信测试端'
}
//微信小程序 生产环境
const wxProd = {
baseUrl: 'https://xxx.xxx.com',
filesUrl:'https://xxx.xxx.com',
appid: 'wxf000000000000002',
appName:'微信生产端'
}
module.exports = {
h5Browser,
wxTest,
wxProd,
}3、在根目录下创建vue.config.js文件，用于处理不同环境配置不同的基础路径
// 导入fs模块
const fs = require('fs')
// 导入环境变量配置文件
const ENV_CONFIG = require('./env.js')
const manifestPath = `${__dirname}/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')
}
// 读取环境变量内容
const appid = ENV_CONFIG[process.env.UNI_SCRIPT].appid
console.log('当前appId: ',appid)
if (appid) {
replaceManifest('mp-weixin.appid', `"${appid}"`)
}
const appName = ENV_CONFIG[process.env.UNI_SCRIPT].appName
console.log('当前appName: ',appName)
if (appName) {
replaceManifest('name', `"${appName}"`)
}
fs.writeFileSync(manifestPath, Manifest, {
flag: 'w'
})参考uniapp官方文档：uniapp.dcloud.net.cn/collocation…
4、代码中调用
代码中通过process.env.config[process.env.ENV_TYPE]获取配置的变量对象
import ENV_CONFIG from './env.js'
let baseUrl= ENV_CONFIG[process.env.NAME].baseUrl
let filesUrl= ENV_CONFIG[process.env.NAME].filesUrl5、运行和发布
需要本地调试时，点击HBuilder X工具栏“运行”，选择自定义的对应的环境；
发布时, 点击HBuilder X工具栏“运行”，选择自定义的对应的环境,编译后打开微信开发者工具或者支付宝开发者工具,上传即可(运行的哪个环境,上传的就是哪个环境),也可以点击HBuilder X工具栏 "发行" ,选择自定义的对应的环境
