微信小程序——环境变量

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

微信小程序中对版本的控制有开发版、体验版和正式版，但我们一般在开发的过程中会设有开发环境、测试环境、仿真环境和生产环境，开发过程中这些环境并不能和小程序设置的版本一一对应，所以我们的环境变量不能依赖于微信版本来进行控制。在实际的开发过程中，我们往往会设置一些参数，比如，接口域名、业务参数、appid等，而这些参数在不同的环境中，可能对应着不同的值，这时候就需要有个环境变量在代码中来进行区分环境，以便于我们获取不同环境下的配置文件。

配置文件

首先我们先建立一个配置文件config.js，将不同环境下要配置的参数写进去，如下代码：

// 此配置中的值为假数据
const config = {
    dev: {
      appId: '123456',
      API_HOST: 'http://a.dev.com',
    },
    test: {
      appId: '123456',
      API_HOST: 'http://a.test.com'
    },
    prd: {
      appId: '123456',
      API_HOST: 'https://a.prd.com'
    }
  }
  
  module.exports = config;

上述代码中，我们建立一个对象，里面包含dev开发环境、test测试环境和prd生产环境，在其对应的环境对象中配置上其需要的参数即可。后面我们通过控制环变量，就可以取到对应环境下的配置参数了。

ps：此配置写在了一个配置下，也可以像vue和react项目中每个环境对应一个单独的配置文件。

环境变量

有了不同环境下的参数配置，那么还需要一个环境变量来获取不同环境下的配置，我们建立一个envConfig.js，导出一个env变量：

module.exports = {
  env: 'dev'
};

这样我们只需要更改env的值就可以通过Config[env]来获取不同环境下的配置，但这种方式我们需要手动更改env变量来切到不同的环境，不是很智能，查看文档发现微信小程序支持npm脚本，所以后面可通过脚本来控制环境变量。

脚本控制

编写不同环境下的脚本文件，dev.js、test.js、prd.js，这些脚本文件主要是获取不同环境下的配置，然后将其导出到一个特定的文件中，后续需要使用配置的地方，直接从导出的文件中读取即可。 然后在微信小程序的本地设置中勾选“启动自定义处理命令”选项，然后在下面的编译前预处理、预览前预处理和上传前预处理中配置其对应的脚本文件，比如，我们上传时需要生产环境，那么就可以将其脚本配置成npm run prd，然后上传的就是对应的生产环境代码。