多环境方案

我们常见的小程序研发过程中，会涉及到多个环境的配置，比如开发环境、测试环境、生产环境等，这些配置信息，需要在不同的环境中进行切换。为了防止多人开发时，配置信息冲突，人工上传过程中导致测试环境配置发布到生产环境上等一系列严重问题。本章会提供一个完备的多环境方案，帮助开发者快速搭建多环境方案。

该方案已同步集成到了小程序初始模版中，开发者可以直接使用。

方案

通过代码自动判定小程序的运行环境，实现以下功能：

正式版 ：写死线上环境配置，不允许切换。
体验版和开发版 ：提供环境切换功能，允许在不同环境之间自由切换。

服务端准备三套域名，开发环境(test)、测试环境(pre)、生产环境(pro)

小程序版本	是否能环境切换	支持环境
开发版(develop)	是	test、pre、pro
体验版(trial)	是	test、pre、pro
正式版(release)	否	pro

流程图

效果

通过上述方案，不再需要手动修改代码来切换小程序环境，从而消除了人为导致的环境配置错误风险。小程序正式版配置固定，体验版和开发版提供灵活的环境切换功能，提升了开发和测试的效率。

配置解释

// config/index.js
// 获取小程序小程序的运行环境
const accountInfo = wx.getAccountInfoSync()
// 是否正式版
const isRelease = accountInfo?.miniProgram?.envVersion === 'release';
// 获取当前环境
const env = isRelease ? 'pro' : wx.getStorageSync('xs_app_env') || 'pro';

// 各环境配置（如域名）
const configMap = {
  test,
  pre,
  pro
};

export function changeEnv() {
  // 非正式版提供切换环境功能
  if (!isRelease) {
    const itemList = Object.keys(configMap);
    wx.showActionSheet({
      alertText: `切换环境(当前环境：${env})`,
      itemList
    })
      .then(({ tapIndex }) => {
        if (env !== itemList[tapIndex]) {
          // 清除缓存防止多环境缓存混杂
          wx.clearStorageSync();
          // 记住当前选择的环境
          wx.setStorageSync('xs_app_env', itemList[tapIndex]);
          // 重启小程序（基础库 3.0.1 以上）
          wx.restartMiniProgram({ path: '/pages/index/index' });
        }
      })
      .catch(() => {});
  }
}

多环境方案 #

方案 #

效果 #

配置解释 #

多环境方案

方案

效果

配置解释