uni-app 系列文章推荐:
一. 前言
在微信小程序开发中,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('开发版小程序')
break
case 'trial': // 体验版小程序
console.log('体验版小程序')
break
case 'release': // 线上小程序
console.log('线上小程序')
break
default:
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 = false
environment.baseURL = 'https://api.development.com'
break
case 'trial': // 体验版小程序
environment.isProd = false
environment.baseURL = 'https://api.release.com'
break
case 'release': // 线上小程序
environment.isProd = true
environment.baseURL = 'https://api.production.com'
break
default:
environment.isProd = true
environment.baseURL = 'https://api.production.com'
break
}
// #endif
console.log('环境变量:', environment)
export { environment }
五. 问题
在使用 wx.getAccountInfoSync()
获取 envVersion
判断微信小程序所处环境时。在某些未知的情况下,当我们提交体验版审核时,可能会出现判断出现错误的情况,影响审核人员的审核!
这个问题曾经在社区问烂了,到如今可能未必解决,如下图所示:
所以遇到这个问题不必惊讶,可以探寻适合自己的方案解决!我最近还遇到了一次,登录无响应,想来是判断环境和预期不一致导致的。
六. 总结
通过以上的了解,在微信小程序开发中,我们可以根据微信官方的小程序 API wx.getAccountInfoSync()
这个方法而得到当前运行的小程序环境变量 envVersion
,根据他来判断是开发版、体验版、正式版,从而实现不同环境下使用不同的全局变量,进而实现自动化配置。
其实不只是小程序,在 uni-app
的多端开发中,在开发 H5 端、App 端时,也可以使用类似的思想实现这种自动化,同时也不仅限于全局环境变量。我们可以将这种自动化配置的思想延续到其他方面,从而实现更加高效的开发。
如果本文对你有帮助,麻烦动手点关注,点收藏,点点赞。感谢!