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

在微信小程序中，为了在不同环境（如开发、测试、生产）下使用不同的 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];

通过以上步骤，你可以在微信小程序中配置不同的环境变量，并依据环境变量编写 API 接口请求文件，实现不同环境下的 API 调用。