uniapp微信小程序区分不同开发环境方法

在 uni-app 微信小程序开发中，可以通过以下几种方法实现开发版本与正式发布版本调用不同的接口地址：

方法一：使用 uni.getAccountInfoSync() 获取当前环境

通过 uni.getAccountInfoSync() 获取当前小程序的运行环境版本（develop、trial、release），然后根据环境设置不同的接口地址。

示例代码：

// App.vue
export default {
  globalData: {
    baseUrl: null, // 动态 baseUrl 变量
    prodBaseUrl: 'https://prod.example.com', // 生产环境的 baseUrl
    devBaseUrl: 'https://dev.example.com', // 开发环境的 baseUrl
  },

  onLaunch() {
    console.log('App Launch');
    // 初始化 baseUrl
    this.initializeBaseUrl();
  },

  methods: {
    initializeBaseUrl() {
      if (!this.globalData.baseUrl) {
        // 获取账号信息
        const accountInfo = uni.getAccountInfoSync();
        // 获取小程序的当前环境版本
        const envVersion = accountInfo.miniProgram.envVersion;

        // 根据环境版本设置 baseUrl
        this.globalData.baseUrl = envVersion === 'release'
          ? this.globalData.prodBaseUrl
          : this.globalData.devBaseUrl;
        console.log(
          `[App] 当前环境：${envVersion === 'release' ? '【正式版】' : '【非正式版】'}，baseUrl 设置为: ${this.globalData.baseUrl}`
        );
      } else {
        console.log('[App] baseUrl 已初始化:', this.globalData.baseUrl);
      }
    },
  },
};

方法二：自定义环境配置

在 package.json 中定义不同环境的配置，并在代码中根据环境变量获取对应的接口地址。

修改 package.json：

{
  "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/"
        }
      }
    }
  }
}

创建环境配置文件 src/utils/envConfig.js：

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,
};

在代码中使用：

import { dev, test, pro } from '@/utils/envConfig.js';

const env = process.env.ENV_TYPE; // 获取当前环境
const baseUrl = env === 'dev' ? dev.VITE_BASE_API : env === 'test' ? test.VITE_BASE_API : pro.VITE_BASE_API;

方法三：手动切换环境

在项目中定义一个环境变量，通过手动修改环境变量的值来切换接口地址。

示例代码：

// env.js
const config = 1; // 1 正式 0 体验 2 开发

let env = {};

if (config === 1) { // 正式版
  env = {
    api_host: 'https://prod.example.com',
  };
} else if (config === 2) { // 开发版
  env = {
    api_host: 'https://dev.example.com',
  };
} else { // 体验版
  env = {
    api_host: 'https://test.example.com',
  };
}

export default env;

在其他页面或模块中，可以通过 import env from './env' 引入环境配置文件，使用 env.api_host 获取当前环境的接口地址。

方法四：使用 __wxConfig.envVersion

通过 __wxConfig.envVersion 获取当前环境版本，然后根据环境版本设置不同的接口地址。

示例代码：

// App.vue
export default {
  globalData: {
    baseUrl: null, // 动态 baseUrl 变量
    prodBaseUrl: 'https://prod.example.com', // 生产环境的 baseUrl
    devBaseUrl: 'https://dev.example.com', // 开发环境的 baseUrl
  },

  onLaunch() {
    console.log('App Launch');
    // 初始化 baseUrl
    this.initializeBaseUrl();
  },

  methods: {
    initializeBaseUrl() {
      if (!this.globalData.baseUrl) {
        // 获取当前环境版本
        const envVersion = __wxConfig.envVersion;

        // 根据环境版本设置 baseUrl
        this.globalData.baseUrl = envVersion === 'release'
          ? this.globalData.prodBaseUrl
          : this.globalData.devBaseUrl;
        console.log(
          `[App] 当前环境：${envVersion === 'release' ? '【正式版】' : '【非正式版】'}，baseUrl 设置为: ${this.globalData.baseUrl}`
        );
      } else {
        console.log('[App] baseUrl 已初始化:', this.globalData.baseUrl);
      }
    },
  },
};

注意事项

1. 接口调用时机：确保在 baseUrl 初始化完成后再执行接口调用，否则可能因未正确设置 baseUrl 导致调用失败。
2. 测试账号提交审核：在提交审核时，审核人员使用的版本通常为 develop（开发版）。请务必填写开发版对应的测试账号和环境信息，否则可能会审核不通过。

通过以上方法，你可以方便地在 uni-app 微信小程序开发中根据不同的环境版本调用不同的接口地址。