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

最近自己在尝试使用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',
        APP_BASE_URL: 'API地址',
    },
    // 正式版-正式环境
    release: {
        mode: 'prod',
        DEBUG: false,
        VCONSOLE: false,
        appid: 'appid',
        APP_BASE_URL: 'API地址',
    }
}
module.exports = {
    env: envConf[__wxConfig.envVersion]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

通过下面的方式使用：

env.env.属性名
1

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

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

这才发现，获取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',
        APP_BASE_URL: 'API地址',
    },
    // 正式版-正式环境
    release: {
        mode: 'prod',
        DEBUG: false,
        VCONSOLE: false,
        appid: 'appid',
        APP_BASE_URL: 'API地址',
    }
}
module.exports = {
    env: envConf[__wxConfig.envVersion]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

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

const envConf = {
    // 开发版-本地环境
    develop: {
        mode: 'dev',
        DEBUG: false,
        VCONSOLE: true,
        appid: '***',
        APP_BASE_URL: 'API地址',
    },
    // 体验版-测试环境
    trial: {
        mode: 'test',
        DEBUG: false,
        VCONSOLE: false,
        appid: '***',
        VUE_APP_BASE_URL: 'API地址',
    },
    // 正式版-正式环境
    release: {
        mode: 'prod',
        DEBUG: false,
        VCONSOLE: false,
        appid: '***',
        VUE_APP_BASE_URL: 'API地址',
    }
}
module.exports = {
    env: envConf[wx.getAccountInfoSync().miniProgram.envVersion]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

OK，大功告成。