微信小程序版本机制和storage如何平滑兼容详解

问题背景

一款小程序默认会有三个版本（开发、体验、生产），而同一台手机打开同一个小程序只会对应一份本地存储（storage），这就会导致当我们在本地存储中记了某些信息时，因为使用过不同版本的小程序，本地存储就会出现不匹配或是被覆盖的情况。为了解决这个问题，我们来设计一个可行的方案。

小程序版本

官方文档点这里

• 开发版 develop：本地预览，本地真机调试 所对应的小程序版本，只有在当前开发者的设备上使用，一般都是开发阶段调试功能一次性生成并使用。
• 体验版 trial：本地开发完成后，一般会上传当前版本至小程序后台，小程序后台会有对应的版本记录，可以将上传的该版本设置成体验版，供有体验版权限的项目人员使用。
• 生产版 release：即发布后的线上版本，所有人可使用。

小程序的本地存储

官方文档点这里

如果熟悉web的同学，应该很容易理解，小程序的本地存储就和web本地存储一样，会有本地的 storage，具体 api 使用可以直接看官方文档，存储格式就是一个 key 对应一个 value。就像上文背景中说到的，因为小程序有多个版本，但是本地存储一个小程序只会有一个 storage，所以使用 api 去读写 storage 的时候，就没法区分小程序版本，尤其是当拥有体验版权限的项目人员，在第一次使用生产版本时，会因为存在过体验版的本地存储而影响第一次打开正式版的体验效果。 下面我们就列一下可行的解决方案。

方案1：读写加标志

因为 storage 的数据格式是 键值对 one key one value，那我们就可以在读写 storage 的时候都加上 版本 区分，这样自然而然就键值就都分开了。

我简单写下大概的伪代码

// 本地存储键名map
const STORAGE_KEY_MAP = {
  /** api环境 */
 API_HOST: '__api_host__'
};

// 设置 开发版 字段
wx.setStorageSync(STORAGE_KEY_MAP.API_HOST + '@develop', 'dev1');

// 设置 体验版 字段
wx.setStorageSync(STORAGE_KEY_MAP.API_HOST  + '@trial', 'dev1');

// 设置 生产版 字段（就不带版本后缀了）
wx.setStorageSync(STORAGE_KEY_MAP.API_HOST , 'dev1');

// 读取
wx.getStorageSync(STORAGE_KEY_MAP.API_HOST + '@develop');
wx.getStorageSync(STORAGE_KEY_MAP.API_HOST  + '@trial');
wx.getStorageSync(STORAGE_KEY_MAP.API_HOST)

通过给键名加上版本的标志后，读写 storage 都不会再受版本的影响。这是最基础最直接的一种方式，因为本地存储的大小为10M，我们用