微信小程序多环境配置和使用教程

1. 多环境配置的必要性

前后端分离开发模式中，无论是前端还是后端，都可能需要区分不同的环境配置。常见的有：

开发环境（dev）：用于本地开发调试

测试环境（test）：用于测试人员测试

线上生产环境（prod）：正式上线的环境

不同环境的配置差异主要体现在：

后端API请求地址不同

数据库连接信息不同

第三方服务配置不同

日志级别设置不同

2. 微信小程序环境配置方法

微信小程序可以通过以下方式实现多环境配置：

2.1 使用project.config.json文件

在根目录下的project.config.json文件中可以配置不同环境的参数：

"setting": {
  "urlCheck": false,
  "es6": true,
  "postcss": true,
  "minified": true,
  "newFeature": true,
  "env": {
    "dev": {
      "API_BASE": "https://dev.example.com/api"
    },
    "test": {
    "prod": {
  }
}

2.2 使用自定义配置文件

可以在项目根目录创建config文件夹，包含：

config.dev.js：开发环境配置

config.test.js：测试环境配置

config.prod.js：生产环境配置

3. 环境变量的使用

3.1 获取当前环境

{
  "uni-app": {
    "scripts": {
      "dev": {
        "title": "微信小程序——开发版",
        "env": {
          "ENV_TYPE": "dev",
          "UNI_PLATFORM": "mp-weixin",
          "VUE_APP_BASE_URL": "http://127.0.0.1:8080/"
        }
      },
      "test": {
        "title": "微信小程序——测试版",
        "env": {
          "ENV_TYPE": "test",
          "UNI_PLATFORM": "mp-weixin",
          "VUE_APP_BASE_URL": "http://test.domain/"
        }
      },
      "pro": {
        "title": "微信小程序——正式版",
        "env": {
          "ENV_TYPE": "pro",
          "UNI_PLATFORM": "mp-weixin",
          "VUE_APP_BASE_URL": "http://pro.domain/"
        }
      }
    }
  },
  "name": "xm-uni-app",
  "version": "1.0.0",

  "description": "{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

可以通过wx.getSystemInfoSync()获取运行环境信息：

const systemInfo = wx.getSystemInfoSync();
console.log(systemInfo.platform); // 输出运行平台

3.2 根据环境加载不同配置

let config = {};

if(__wxConfig.envVersion === 'develop'){

// 开发环境

config = require('./config/config.dev.js');

} else if(__wxConfig.envVersion === 'trial'){

// 体验环境

} else {

// 生产环境

}

4. 实际应用示例
4.1 API请求封装

javascript

const request = (url, data = {}, method = 'GET') => {

return new Promise((resolve, reject) => {

wx.request({

console.log(process.env.VUE_APP_BASE_URL,'获取处于当前开发环境的url');
console.log(process.env.ENV_TYPE,'获取当前处于哪个开发环境');
console.log(process.env,'process.env++++++++++++');

url: config.API_BASE + url,

data: data,

method: method,

success: (res) => resolve(res.data),

fail: (err) => reject(err)

});

});

};

`

4.2 环境切换实现

可以在小程序开发工具中通过以下方式切换环境：

1. 点击工具栏中的"详情"按钮

2. 在"项目设置"中修改"环境"

{
  "uni-app": {
    "scripts": {
      "dev": {
        "title": "微信小程序——开发版",
        "env": {
          "ENV_TYPE": "dev",
          "UNI_PLATFORM": "mp-weixin",
          "VITE_BASE_API": "http://127.0.0.1:8080/"
        }
      },
      "test": {
        "title": "微信小程序——测试版",
        "env": {
          "ENV_TYPE": "test",
          "UNI_PLATFORM": "mp-weixin",
          "VITE_BASE_API": "http://test.domain/"
        }
      },
      "pro": {
        "title": "微信小程序——正式版",
        "env": {
          "ENV_TYPE": "pro",
          "UNI_PLATFORM": "mp-weixin",
          "VITE_BASE_API": "http://pro.domain/"
        }
      }
    }
  }
}

3. 选择"开发环境"、"测试环境"或"生产环境"

5. 注意事项

不要将敏感信息直接写在代码中

生产环境配置需要严格保密

建议使用小程序云开发的环境隔离功能

// 导出的环境请求地址
//本地环境
const dev = {
  ENV: "dev",
  VITE_BASE_API: "http://127.0.0.1:8080/dev-api",
};
//正式环境
const pro = {
  ENV: "pro",
  VITE_BASE_API: "https://xxx/prod-api",
};
//测试环境
const test = {
  ENV: "test",
  VITE_BASE_API: "https://xxx/test-api",
};
export default {
  dev,
  test,
  pro,
};

5.2 环境切换

开发时确保使用正确的环境

发布前必须切换到生产环境配置

可以通过版本管理工具管理不同环境的配置

6. 总结

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import ENV_CONFIG from "./utils/envConfig.js";
import { resolve } from "path"; // 导入 path 模块，帮助我们解析路径
export default defineConfig(() => {
  return {
    server: {
      port: "3002",
    },
    resolve: {
      alias: {
        "@": resolve(__dirname, "/src"),
      },
    },
    plugins: [uni()],
    define: {
      "process.env.config": ENV_CONFIG, //配置一
      'process.env': process.env, //配置二
    },
  };
});

微信小程序的多环境配置可以大大提高开发效率，避免因环境切换导致的问题。通过合理配置项目文件和灵活使用环境变量，可以轻松实现开发、测试和生产环境的隔离。建议在项目初期就规划好多环境配置方案，并在团队中制定统一的规范。