在 uniapp 开发企业微信小程序时,区分生产环境和测试环境是常见需求。以下是几种可靠的方法,帮助你根据环境处理不同的服务请求:
一、通过条件编译区分(推荐)
使用 uniapp 的 条件编译 语法,在代码中标记不同环境的配置。
1. 在 manifest.json
中定义环境变量
{
"app-plus": {
"debug": {
"env": "dev"
},
"release": {
"env": "prod"
}
}
}
2. 创建配置文件
// env.js
const config = {
// 测试环境
dev: {
baseUrl: 'https://test-api.example.com',
apiKey: 'test-key'
},
// 生产环境
prod: {
baseUrl: 'https://api.example.com',
apiKey: 'prod-key'
}
};
// 根据条件编译获取当前环境
const env = process.env.NODE_ENV === 'production' ? 'prod' : 'dev';
export default config[env];
3. 在请求中使用配置
import config from './env.js';
function request(options) {
return uni.request({
url: config.baseUrl + options.url,
method: options.method || 'GET',
data: options.data,
header: {
'Authorization': `Bearer ${config.apiKey}`
}
});
}
二、使用自定义环境变量(更灵活)
在 package.json
中定义不同环境的启动命令。
1. 修改 package.json
{
"scripts": {
"dev": "cross-env NODE_ENV=development uni-app-cli dev",
"prod": "cross-env NODE_ENV=production uni-app-cli build"
}
}
2. 创建环境配置文件
// env.config.js
const env = process.env.NODE_ENV || 'development';
const config = {
development: {
baseUrl: 'https://test-api.example.com',
debug: true
},
production: {
baseUrl: 'https://api.example.com',
debug: false
}
};
export default config[env];
3. 在请求拦截器中使用
import config from './env.config.js';
uni.addInterceptor('request', {
invoke(args) {
// 动态替换 URL
if (!args.url.startsWith('http')) {
args.url = config.baseUrl + args.url;
}
// 添加环境标识
args.header['X-Env'] = config.env;
return args;
}
});
三、企业微信特有的环境区分
利用企业微信的 AgentId 或 企业ID 区分环境。
1. 在企业微信管理后台配置
- 测试环境:创建一个测试用的应用,获取测试 AgentId。
- 生产环境:使用正式应用的 AgentId。
2. 在代码中判断
// 获取当前企业微信环境信息
wx.qy.getAgentInfo({
success: (res) => {
const isProd = res.agentid === 'YOUR_PROD_AGENTID';
const baseUrl = isProd
? 'https://api.example.com'
: 'https://test-api.example.com';
// 根据环境设置请求URL
uni.request({
url: baseUrl + '/api/data',
// ...
});
}
});
四、通过 URL 参数区分(适合开发调试)
在开发时,通过 URL 参数强制指定环境。
1. 在入口页面获取参数
onLoad(query) {
// 通过 ?env=test 或 ?env=prod 控制环境
const env = query.env || (process.env.NODE_ENV === 'production' ? 'prod' : 'dev');
// 设置全局环境变量
uni.$globalData.env = env;
}
2. 在请求中使用
function request(options) {
const env = uni.$globalData.env;
const baseUrl = env === 'prod'
? 'https://api.example.com'
: 'https://test-api.example.com';
return uni.request({
url: baseUrl + options.url,
// ...
});
}
五、结合本地存储(持久化环境选择)
允许用户在应用内切换环境,并保存到本地存储。
1. 创建环境切换功能
// 环境切换组件
<template>
<view>
<radio-group @change="switchEnv">
<radio :checked="env === 'dev'" value="dev">测试环境</radio>
<radio :checked="env === 'prod'" value="prod">生产环境</radio>
</radio-group>
</view>
</template>
<script>
export default {
data() {
return {
env: uni.getStorageSync('appEnv') || 'dev'
};
},
methods: {
switchEnv(e) {
const env = e.detail.value;
uni.setStorageSync('appEnv', env);
uni.reLaunch({ url: '/' }); // 重启应用使环境生效
}
}
};
</script>
2. 在请求中读取环境
const env = uni.getStorageSync('appEnv') || 'dev';
const baseUrl = env === 'prod'
? 'https://api.example.com'
: 'https://test-api.example.com';
最佳实践建议
推荐组合方案:
- 开发/生产环境:通过
process.env.NODE_ENV
区分。 - 企业微信环境:结合 AgentId 或企业 ID 验证。
- 调试灵活性:支持 URL 参数或本地存储切换。
- 开发/生产环境:通过
安全性考虑:
- 敏感配置(如 API 密钥)应放在服务端,避免在前端硬编码。
- 测试环境数据与生产环境隔离,避免数据污染。
请求拦截器:
统一在请求拦截器中处理环境配置,避免在每个请求中重复判断。日志区分:
在测试环境输出详细日志,生产环境减少日志输出。
通过以上方法,你可以在 uniapp 企业微信小程序中灵活区分环境,确保开发、测试和生产流程的稳定性。
更新最新使用代码-更新时间:2025年6月3日
在 UniApp 中通过 uni.getAccountInfoSync()
获取的 miniProgram.envVersion
字段,返回的是当前小程序的运行环境版本,其值及对应的环境如下:
各环境对应的值
值 | 对应的环境 | 说明 |
---|---|---|
'develop' |
开发环境 | 开发者在本地工具(如微信开发者工具)中直接运行的环境。 |
'trial' |
体验版(测试环境) | 通过微信开发者工具上传的体验版,或企业微信后台发布的测试版本。 |
'release' |
正式版(生产环境) | 通过企业微信后台正式发布的版本。 |
如何区分测试环境和生产环境?
根据 envVersion
的值判断:
- 测试环境:当值为
'trial'
时,代表体验版(测试环境)。 - 生产环境:当值为
'release'
时,代表正式版(生产环境)。
示例代码:判断环境并处理请求
const accountInfo = uni.getAccountInfoSync();
const envVersion = accountInfo.miniProgram.envVersion;
let baseUrl = '';
if (envVersion === 'trial') {
baseUrl = '测试环境接口地址'; // 例如:https://test-api.example.com
} else if (envVersion === 'release') {
baseUrl = '生产环境接口地址'; // 例如:https://api.example.com
} else {
// 开发环境(可选处理,如指向测试环境或本地调试地址)
baseUrl = '开发环境接口地址';
}
// 示例:使用不同环境的接口地址发起请求
uni.request({
url: baseUrl + '/api/data',
method: 'GET',
success(res) {
console.log('请求成功:', res.data);
}
});
注意事项
企业微信小程序的特殊性:
- 企业微信小程序的「体验版」对应
envVersion: 'trial'
,需通过企业微信后台发布体验版后生效。 - 开发环境(
'develop'
)仅在开发者工具中运行,不会出现在手机端正式运行的场景中。
- 企业微信小程序的「体验版」对应
动态切换环境:
- 若需要在开发阶段灵活切换测试/生产环境,可结合
manifest.json
配置或全局变量(如通过uni.getSystemInfoSync()
获取自定义参数)。
- 若需要在开发阶段灵活切换测试/生产环境,可结合
兼容性:
- 确保
uni.getAccountInfoSync()
在小程序端(非 H5)运行,该 API 仅支持小程序平台。
- 确保
通过以上方式,可根据 envVersion
的值准确区分测试环境和生产环境,从而配置不同的服务请求地址。