微信小程序中配置不同的环境变量,并依据环境变量编写API接口请求文件

news/2025/3/5 7:28:35/

在小程序>微信小程序中，为了在不同环境（如开发、测试、生产）下使用不同的 API 接口地址，我们可以通过配置环境变量来实现。以下是具体的实现步骤和示例代码：

1. 创建环境配置文件

在项目根目录下创建一个 env.js 文件，用于定义不同环境下的配置信息。

// env.js
const envConfig = {development: {apiBaseUrl: 'https://dev-api.example.com',// 可以添加其他开发环境的配置},production: {apiBaseUrl: 'https://prod-api.example.com',// 可以添加其他生产环境的配置},// 可以根据需要添加更多环境，如测试环境test: {apiBaseUrl: 'https://test-api.example.com',}
};// 手动指定当前环境，可根据实际情况修改
const currentEnv = 'development'; export default envConfig[currentEnv];

2. 创建 API 请求文件

在项目中创建一个 api.js 文件，用于封装 API 请求方法，并使用前面定义的环境变量。

// api.js
import config from './env.js';// 封装通用的请求方法
function request(url, method = 'GET', data = {}) {return new Promise((resolve, reject) => {wx.request({url: config.apiBaseUrl + url,method: method,data: data,header: {'Content-Type': 'application/json'},success: (res) => {if (res.statusCode === 200) {resolve(res.data);} else {reject(new Error(`请求失败，状态码: ${res.statusCode}`));}},fail: (err) => {reject(err);}});});
}// 定义具体的 API 请求方法
const api = {// 获取用户信息getUserInfo: () => {return request('/user/info');},// 提交表单数据submitForm: (formData) => {return request('/form/submit', 'POST', formData);}// 可以根据需要添加更多的 API 请求方法
};export default api;

3. 在页面中使用 API 请求

在需要使用 API 的页面中引入 api.js 文件，并调用相应的 API 方法。

// pages/index/index.js
import api from '../../api.js';Page({data: {userInfo: null},onLoad() {this.fetchUserInfo();},async fetchUserInfo() {try {const userInfo = await api.getUserInfo();this.setData({userInfo: userInfo});console.log('用户信息:', userInfo);} catch (error) {console.error('获取用户信息失败:', error);}}
});

4. 切换环境

如果需要切换环境，只需要修改 env.js 文件中的 currentEnv 变量的值即可。例如，将其修改为 production 就可以使用生产环境的 API 接口地址。

// env.js
const envConfig = {development: {apiBaseUrl: 'https://dev-api.example.com',},production: {apiBaseUrl: 'https://prod-api.example.com',}
};// 切换到生产环境
const currentEnv = 'production'; export default envConfig[currentEnv];