小程序区分开发版、体验版、正式版环境

437 阅读2分钟

因为我们公司上次有遇到小程序体验版和正式版Token混淆的问题,所以最近在招聘前端开发工程师的时候都会问一个问题:如何区分小程序开发版,体验版,正式版环境?


我们的Token都是存储在本地缓存localStorage的,也就是如果更换域名,Token还是会存在,但是因为cookie的种种区别,我们还是决定不改缓存方式。

很多面试者都会说,我们公司都是手动修改请求域名或者缓存Key值,在后缀加个_dev,这种方式太蠢了,小程序有提供对应的变量来区分,可以直接使用,不论是API还是缓存。


实现方法:

// 微信自带的信息
const accountInfo = wx.getAccountInfoSync();
const baseApi = {
	// 开发版
	develop: 'http://192.168.0.109:8897',
	// 体验版
	trial: "https://test-baidu.com",
	// 正式版
	release: "https://baidu.com"
};
let api;
if (!accountInfo.miniProgram.envVersion) {
  api = baseApi['develop'];
} else {
  let env = accountInfo.miniProgram.envVersion;
  api = baseApi[env];
}
export default api;

通过微信的getAccountInfoSync可以获取基本信息,然后通过envVersion可以直接区分三个环境,这样就可以实现了。

很多人会问那缓存怎么解决?其实都一样,我都能拿到envVersion,那我就能直接区分了呀。就三个值: developtrialrelease,根绝这些字符串去判断环境就好了。

const DEVELOP_STORAGE_KEY = {
	ACCESS_TOKEN: "access_token_key_develop",
};
const TRIAL_STORAGE_KEY = {
	ACCESS_TOKEN: "access_token_key_trial",
};
const RELEASE_STORAGE_KEY = {
	ACCESS_TOKEN: "access_token_key",
};

这是我自己创建的一个StroageKey.js,里面有三个Map,分别对应三个环境缓存的key值,跟Api一样,写个if去选择使用哪个环境的Key值就完成了。

你也可以专门再封装一个Tools,去判断环境,再选择Api或者Storage,这样会更帅,这里我就不展示具体封装的代码了。


总结:

这个问题还是基于对小程序开发的了解程度,还有实战经验。我们公司之前完全没有考虑过有这个混淆BUG所以也没有怎么处理,也是在企业项目中发现的问题。看文档虽然很累,很烦。但是还是要看啊~