【微信小程序篇】- 多环境（版本）配置

最近自己在尝试使用AIGC写一个小程序，页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制，会经常出现对于需求理解跑偏情况，需要不断的重复强调，并纠正错误，才能得到你想要的内容)。

因为最近某些原因，所处的环境网络没办法科学上网，剩下的网络交互需要自己完成。

多环境（版本）配置

我们都知道小程序开发主要有三个版本：开发版，体验版，正式版；我们如何让三个环境访问的环境信息不同呢？这个就需要进行多环境（版本）配置信息了。

1.多环境（版本）配置封装

最近在网上看到了很多人做多版本封装的时候，用到了这样的配置：
env.config.js

const envConf = {// 开发版-本地环境develop: {mode: 'dev',DEBUG: false,VCONSOLE: true,appid: 'appid',APP_BASE_URL: 'API地址',},// 体验版-测试环境trial: {mode: 'test',DEBUG: false,VCONSOLE: false,appid: 'appid',VUE_APP_BASE_URL: 'API地址',},// 正式版-正式环境release: {mode: 'prod',DEBUG: false,VCONSOLE: false,appid: 'appid',VUE_APP_BASE_URL: 'API地址',}
}
module.exports = {env: envConf[__wxConfig.envVersion]
}

2.配置需要注意的问题

我看到这里对于__wxConfig这个对象有点不太了解，就习惯性的把配置改为：
env.config.js

const envConf = {// 开发版-本地环境develop: {mode: 'dev',DEBUG: false,VCONSOLE: true,appid: 'appid',APP_BASE_URL: 'API地址',},// 体验版-测试环境test: {mode: 'test',DEBUG: false,VCONSOLE: false,appid: 'appid',APP_BASE_URL: 'API地址',},// 正式版-正式环境prod: {mode: 'prod',DEBUG: false,VCONSOLE: false,appid: 'appid',APP_BASE_URL: 'API地址',}
}
module.exports = {env: envConf[__wxConfig.envVersion]
}

通过下面的方式使用：

env.env.属性名

在把小程序代码发布到体验版的时候，我通过扫体验版的二维码，发现微信小程序的页面数据都没有加载出来，打开调试模式，发现抛出了一下错误：


Error during evaluating file "pages/***/***.js"
undefined is not an object (evaluating 't.default.env.APP_BASE_URL')

这才发现，获取APP_BASE_URL之前，env是undefined，这个时候感觉应该是__wxConfig.envVersion的值在envConf字典中没有，在微信小程序开发社区搜索了__wxConfig.envVersion，发现了这篇文章，文章中说明了__wxConfig.envVersion返回的值有哪些：

其中的envVersion为运行环境，有以下几个值
envVersion: ‘develop’, //开发版
envVersion: ‘trial’, //体验版
envVersion: ‘release’, //正式版
其中的platform为运行的平台
有Android ios devtools 等
之前一直不知道微信小程序可以用__wxConfig.envVersion区分小程序体验版，开发板，正式版
目前在官方文档没有查到相关资料，但是亲测可用
envVersion 类型为字符串
envVersion: ‘develop’, //开发版
envVersion: ‘trial’, //体验版
envVersion: ‘release’, //正式版

我把配置改了回去：
env.config.js

const envConf = {// 开发版-本地环境develop: {mode: 'dev',DEBUG: false,VCONSOLE: true,appid: 'appid',APP_BASE_URL: 'API地址',},// 体验版-测试环境trial: {mode: 'test',DEBUG: false,VCONSOLE: false,appid: 'appid',VUE_APP_BASE_URL: 'API地址',},// 正式版-正式环境release: {mode: 'prod',DEBUG: false,VCONSOLE: false,appid: 'appid',VUE_APP_BASE_URL: 'API地址',}
}
module.exports = {env: envConf[__wxConfig.envVersion]
}

3.微信小程序官方提供获取环境函数

我在想，__wxConfig.envVersion毕竟不是官方提供的，想看看官方是否提供获取小程序环境的函数，发现还真有：wx.getAccountInfoSync()
具体函数返回的内容，大家可以到官方函数地址自己详细阅读。
修改配置：
env.config.js

const envConf = {// 开发版-本地环境develop: {mode: 'dev',DEBUG: false,VCONSOLE: true,appid: 'wx07a393f798543df5',VUE_APP_BASE_URL: 'https://www.a1sck.com/jlimei',},// 体验版-测试环境trial: {mode: 'test',DEBUG: false,VCONSOLE: false,appid: 'wx07a393f798543df5',VUE_APP_BASE_URL: 'https://www.a1sck.com/jlimei',},// 正式版-正式环境release: {mode: 'prod',DEBUG: false,VCONSOLE: false,appid: 'wx07a393f798543df5',VUE_APP_BASE_URL: 'https://www.a1sck.com/jlimei',}
}
module.exports = {env: envConf[wx.getAccountInfoSync().miniProgram.envVersion]
}