一. 前言
在微信小程序开发中，uni-app 作为一个开发利器，方便了广大开发者，越来越多的公司开始使用 uni-app 进行开发，尤其是在开发小程序的时候，今天给大家分享一个使用 uni-app 高效开发小程序的技巧，如何自动化切换环境变量，无缝适配微信小程序的各种版本！
二. 背景
在 uni-app 进行开发小程序时，需要在不同的环境中配置不同的域名，比如开发环境，测试环境，生产环境。以微信小程序开发为例，有开发版、体验版、正式版环境的区分，通常情况下，测试人员会在体验版中进行，同时对应我们测试环境。测试通过后，发布正式版，则是对应生产环境。
因此，在常规的测试发布应用过程中，可能我们需要先将体验版的域名配置到测试环境，等待测试通过后，再将体验版的域名配置到生产环境，进而提交审核上线。这个过程，需要我们手动修改环境去操作微信小程序的开发工具，然后再去提交审核。这样的操作，不仅繁琐，而且容易出错，很有可能在修改之后，因为没有及时改回去，导致线下测试操作了线上数据，引发生产问题。
因此为了持续集成自动化，我们可以使用一些方式来判断微信所处的运行环境，根据环境自动切换连接对应后端接口地址。
本篇文章，我们将学习到如何自动代替手动，无缝快速切换微信小程序的环境，根据不同环境使用全局定义的环境变量。
三. 解决方案
对于根据微信小程序的环境（开发版，体验版，正式版）自动化切换环境变量，代替手动切换的繁琐和易错性。其实微信小程序的官方 API ：wx.getAccountInfoSync() 已经提供了这个功能，可以根据返回 envVersion 来进行判断。
我们可以看一下如下的代码：
const accountInfo = wx.getAccountInfoSync()
console.log('小程序appId：', accountInfo.miniProgram.appId) // 小程序 appId
console.log('小程序版本：', accountInfo.miniProgram.envVersion) // 小程序版本
console.log('线上小程序版本号：', accountInfo.miniProgram.version) // 线上小程序版本号
envVersion 可以取三个值之一：'develop'、'trial' 和 'release'。这些值代表了小程序当前的运行环境：
-
develop: 表示开发版环境，即在开发者工具中预览或者通过wx.preview方法预览的环境。 -
trial: 表示体验版环境，即通过微信公众平台将小程序提交后发布为体验版，用户可以在微信中体验到的环境。 -
release: 表示正式版环境，即通过微信公众平台审核通过后正式发布的环境，用户可以在微信中搜索到并使用的环境。
在微信开发者工具中运行的小程序，envVersion 的值为 'develop'，如下图所示：
四. 实现流程
1. 定义环境变量
首先我们先在项目目录下，新建一个 environment.js 文件，用于定义环境变量。这些环境变量一经定义，可以全局使用。可以主要有以下几个：
-
isProd：是否是生产环境 -
baseURL：API 接口的基础 URL
在这里，我简单定义了两个环境变量，后续可以根据项目的开发需要，自行定义。
// API 环境变量配置
const environment = {isProd: true,baseURL: 'http://api.production.com'
}export { environment }
2. 判断小程序环境
在 uni-app 中，我们可以通过 #ifdef 和 #endif 来判断当前的环境，从而进行不同的操作。我们可以在 environment.js 文件中，设置不同的环境变量，从而实现不同环境下的不同操作。
在微信小程序环境下，根据微信环境变量，不同的版本设置不同的域名。
// #ifdef MP-WEIXIN
// 在微信小程序环境下，根据微信环境变量，根据不同的版本设置不同的域名const accountInfo = wx.getAccountInfoSync()switch (accountInfo.miniProgram.envVersion) {case 'develop': // 开发版小程序console.log('开发版小程序')breakcase 'trial': // 体验版小程序console.log('体验版小程序')breakcase 'release': // 线上小程序console.log('线上小程序')breakdefault:console.log('判读出错')break
}
// #endif
在微信开发者工具中运行的小程序，可以看到输出的是体验版小程序，如下图所示：
3. 设置环境变量
根据以上的判断结果，我们可以在 environment.js 文件中，设置不同的环境变量，从而实现不同环境下对应的变量值是预期的值。
const environment = {isProd: true,baseURL: 'http://api.production.com'
}
// #ifdef MP-WEIXIN
// 在微信小程序环境下，根据微信环境变量，根据不同的版本设置不同的域名
const accountInfo = wx.getAccountInfoSync()switch (accountInfo.miniProgram.envVersion) {case 'develop': // 开发版小程序environment.isProd = falseenvironment.baseURL = 'https://api.development.com'breakcase 'trial': // 体验版小程序environment.isProd = falseenvironment.baseURL = 'https://api.release.com'breakcase 'release': // 线上小程序environment.isProd = trueenvironment.baseURL = 'https://api.production.com'breakdefault:environment.isProd = trueenvironment.baseURL = 'https://api.production.com'break
}
// #endif
console.log('环境变量：', environment)
export { environment }
五. 问题
在使用 wx.getAccountInfoSync() 获取 envVersion 判断微信小程序所处环境时。在某些未知的情况下，当我们提交体验版审核时，可能会出现判断出现错误的情况，影响审核人员的审核！
这个问题曾经在社区问烂了，到如今可能未必解决，如下图所示：
所以遇到这个问题不必惊讶，可以探寻适合自己的方案解决！我最近还遇到了一次，登录无响应，想来是判断环境和预期不一致导致的。
六. 总结
通过以上的了解，在微信小程序开发中，我们可以根据微信官方的小程序 API wx.getAccountInfoSync() 这个方法而得到当前运行的小程序环境变量 envVersion，根据他来判断是开发版、体验版、正式版，从而实现不同环境下使用不同的全局变量，进而实现自动化配置。
其实不只是小程序，在 uni-app 的多端开发中，在开发 H5 端、App 端时，也可以使用类似的思想实现这种自动化，同时也不仅限于全局环境变量。我们可以将这种自动化配置的思想延续到其他方面，从而实现更加高效的开发。
微信官方文档-小程序 API
如果本文对你有帮助，麻烦动手点关注，点收藏，点点赞。感谢！
