当前位置: 首页 > news >正文

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

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

OK,大功告成。

http://www.lryc.cn/news/155088.html

相关文章:

  • ssh配置(一、GitLabGitHub)
  • 开了抖店后就可以直播带货了吗?想在抖音带货的,建议认真看完!
  • 【深度学习实验】数据可视化
  • 【Golang】函数篇
  • 在ubuntu上安装ns2和nam(ubuntu16.04)
  • SpringCloudAlibaba之Sentinel介绍
  • 苹果微信聊天记录删除了怎么恢复?果粉原来是这样恢复的
  • JVM的故事——虚拟机字节码执行引擎
  • 设计模式之适配器与装饰器
  • 服务器数据恢复- Ext4文件系统分区挂载报错的数据恢复案例
  • 19-springcloud(上)
  • 前端基础---HTML笔记汇总一
  • 智汇云舟亮相中国安防工程商集成商大会
  • 使用 Sealos 在离线环境中光速安装 K8s 集群
  • 算法-模拟
  • 如何通过Instagram群发消息高效拓展客户?
  • 基于springboot实现多线程抢锁的demo
  • Java I/O模型发展以及Netty网络模型的设计思想
  • 智能电网时代:数字孪生的崭露头角
  • 每日一题 501二叉搜素树中的众数(中序遍历)
  • 测试理论与方法----测试流程第三个环节:设计测试用例
  • C++多态案例2----制作饮品
  • 机械零件保养3d模拟演示打消客户购买顾虑
  • SpringBoot的自动装配源码分析
  • Linux常用命令——csplit命令
  • React 组件的3大属性: state
  • vscode 上传项目到gitlab
  • [羊城杯 2020] easyphp
  • QT 常用类与组件
  • C#控制台连接Mysql数据库,有配置数据库连接字符串的配置文件