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

这篇具有很好参考价值的文章主要介绍了【微信小程序篇】- 多环境（版本）配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近自己在尝试使用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]
}

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',
        APP_BASE_URL: 'API地址',
    },
    // 正式版-正式环境
    release: {
        mode: 'prod',
        DEBUG: false,
        VCONSOLE: false,
        appid: 'appid',
        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: '***',
        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]
}