4.环境变量配置.md

前言

在我们日常开发过程中，需要给项目配置一些环境变量，一般是通过dotenv这个库读取.env，但很遗憾的是微信小程序并不支持。

根据个人的开发经验，总结我是如何在小程序中配置环境变量的。如果你有更好的解决方案，也可以分享出来。

设置环境变量

在项目根目录新建config.js文件，用来存放我们的环境变量。以请求的域名baseUrl为例，配置不同环境的域名。

这里我们只配置两个环境，

• 开发环境develop

• 生产环境production

let env = "develop"

// 防止我们在上传代码的时候，没有将env改成production
const envVersion = wx.getAccountInfoSync().miniProgram.envVersion
if (envVersion === "release" && env !== "production") {
  env = "production"
}

export default {
  // 当前环境
  env,
  // 请求接口域名
  baseUrl: {
    develop: 'http://localhost:3000', 
    production: 'http://api.xxx.com',
  },
}

这个文件导出一个配置对象，env变量是当前的环境，baseUrl是网络请求域名，已每个环境作为key，分别配置参数。

为了防止我们在上传代码的时候，没有将env改成production，我们可以这样解决这个问题。

通过wx.getAccountInfoSync()获取当前小程序环境，如果是release并且env=develop，那我们就设置env为production

微信小程序有三个版本，具体如下：

develop	开发版，扫码预览二维码进去就是开发版
trial	体验版，上传代码后设置为体验版
release	正式版，上传代码-提交审核-发布，正式版小程序生效

获取环境变量

我们在app.js的App实例化对象中新建一个getConfig方法

import localConfigs from "./config"

App({
  // 获取配置
  getConfig(key = "") {
    // 不指定key，返回全部
    if (key === "") {
      return localConfigs
    }
    // 不存在配置
    if (!localConfigs[key]) {
      console.warn(`${key} config is no exist`)
      return undefined
    }
    // 配置是否区分环境
    if (typeof localConfigs[key] === "object" && typeof localConfigs[key] !== null) {
      // 获取当前环境类型
      const env = this.getConfig("env")
      return localConfigs[key][env]
    }
    return localConfigs[key]
  }
})

首先导入我们的配置文件，然后判断是否存在，之后判断是否是一个对象，是的话就返回当前环境的变量。

使用案例

util/request.js中，我们要获取baseUrl环境变量。

// 获取app对象
const app = getApp()

const baseUrl = app.getConfig("baseUrl")

ok，这就是我们对微信小程序环境变量的配置和获取。当然这可能不是最好的方案，如果有改进的地方，请大家多多指出。