最近自己在尝试使用AIGC写一个小程序,页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制,会经常出现对于需求理解跑偏情况,需要不断的重复强调,并纠正错误,才能得到你想要的内容)。
因为最近某些原因,所处的环境网络没办法科学上网,剩下的网络交互需要自己完成。
我们都知道小程序开发主要有三个版本:开发版,体验版,正式版;我们如何让三个环境访问的环境信息不同呢?这个就需要进行多环境(版本)配置信息了。
最近在网上看到了很多人做多版本封装的时候,用到了这样的配置:
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]
}
我看到这里对于__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]
}
我在想,__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]
}
OK,大功告成。