uniapp 小程序本地缓存区分开发版、体验版、线上版

转自公众号：前端帮

原文链接：mp.weixin.qq.com/s/HVGd1ai05…

我们在开发小程序时，经常会把登录的token存到localStorage中，但微信小程序的开发版、体验版、线上版是共用缓存的，同一个key的值在不同环境中是一样的，这就导致我们访问不同版本小程序时会出现访问不了的情况。

好在我们可以通过代码拿到当前小程序的版本：

const accountInfo = wx.getAccountInfoSync()
// uniapp可以直接uni.getAccountInfoSync()
// 结果是一样的
console.log(accountInfo.miniProgram.envVersion)
// develop	开发版
// trial	体验版
// release	正式版

还可以通过小程序的全局变量来判断：

const envVersion = __wxConfig.envVersion
console.log(envVersion)
// develop	开发版
// trial	体验版
// release	正式版

于是我们就可以重写uni.setStorageSync和uni.getStorageSync方法，直接给每个key都加个版本号前缀，避免在每个地方都去加。

在main.js中执行以下代码即可：

const originSetStorageSync = uni.setStorageSync
const originGetStorageSync = uni.getStorageSync

uni.setStorageSync = function setStorageSync(k, v) {
  const envVersion = __wxConfig.envVersion
  originSetStorageSync(envVersion + '_' + k, v)
}
uni.getStorageSync = function getStorageSync(k) {
  const envVersion = __wxConfig.envVersion
  return originGetStorageSync(envVersion + '_' + k)
}

以上代码都很好理解，其实只做了一件事，就是改写key。

开发版就是这样

亲测没问题！

📢：值得注意的事，这个办法仅仅在uniapp中有效，如果试图去改写小程序原生的wx.xxxx，会报以下错误，因为它是只读的。

Cannot assign to read only property 'setStorageSync' of object

原生的就老老实实在每个调用的地方加吧，或者自己封装一个存储和取值的方法，再调用自己的方法。

不得不感叹，用uniapp开发小程序比原生的舒服太多了！