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

目录
  • 问题背景
  • 小程序版本
  • 小程序的本地存储
  • 方案1：读写加标志
  • 方案2：读写加标志 + 监测生产版本更新
  • 总结

问题背景

一款小程序默认会有三个版本（开发、体验、生产），而同一台手机打开同一个小程序只会对应一份本地存储（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，我们用

赞 (0)

相关推荐

  • 微信小程序结合Storage实现搜索历史效果

    微信小程序结合Storage实现搜索历史效果

    本文实例为大家分享了微信小程序实现搜索历史效果的具体代码,供大家参考,具体内容如下 实现目标 代码实现 集合wx.setStorageSync()和wx.getStorageSync()这两个同步函数来实现这个功能实际上非常简单. <!-- wxml --> <view class="search-box"> <view class='icon'> <image src='../../assets/search.png' mode='width

  • 微信小程序实现留言板（Storage）

    微信小程序实现留言板（Storage）

    本文为大家分享了微信小程序实现留言板的具体实现方法,供大家参考,具体内容如下 先说一下小程序的开发环境之类的基础东西 1.到微信公众平台下载开发者工具.安装 2.appID与没有appID的区别是,appID可以用真机预览,而没有就不行 3.目录解释: a)pages放页面,每个都必须含有js\json\wxml\wxss四个文件. js文件类似于js文件,json是配置,比如整个页面顶端的名字颜色之类的,wxml类似于html,wxss类似于css. 其中代码格式也相似. b)utils中放公

  • 微信小程序 Storage API实例详解

    微信小程序 Storage API实例详解

    其实这个存储在新建Demo的时候就已经用到了就是存储就是那个logs日志,数据存储主要分为同步和异步 异步存储方法: 存数据 wx.setStorage(object) 相同key会覆盖,可写回调方法 获取方法: wx.getStorage(object) 清除方法: wx.clearStorage()里面可以写回调函数 成功,失败,完成 同步存储方法: 存数据 相同key会覆盖 wx.setStorageSync(key,data) 读数据 wx.getStorageSync(key) 存储是

  • 如何在微信小程序中存setStorage

    这篇文章主要介绍了如何在微信小程序中存setStorage,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在js中存入setStorage,key是你的键,data是你的值 wx.setStorage({ key: 'mm', data: 1, }) // 获取getStorageSync的方式 console.log(wx.getStorageSync('mm')) #获取的方式 接下来是或数据中的存取 ,其实是一样的啦,直接上代码 js文件

  • 微信小程序 Storage更新详解

    微信小程序 Storage更新详解

    前言 1.近期项目开发中接触到微信小程序,其中有部分业务需要用到数据本地存储,而微信的官方文档中并没用提供直接更新Storage的API. 2.通过wx.setStorage(Object object)可以达到覆盖原有数据达到更新的目的,但是在只修改某个对象中某个属性的值中使用这个API总感觉有点蹩脚. 3.下面笔者简单封装了一个方法用来修改Storage,若是有人知道更好的方法或者我的写法有问题还望不吝赐教. 问题描述 小程序首次登录时需要输入账号密码,首次登录成功后将账号与token保存本

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

    目录 问题背景 小程序版本 小程序的本地存储 方案1:读写加标志 方案2:读写加标志 + 监测生产版本更新 总结 问题背景 一款小程序默认会有三个版本(开发.体验.生产),而同一台手机打开同一个小程序只会对应一份本地存储(storage),这就会导致当我们在本地存储中记了某些信息时,因为使用过不同版本的小程序,本地存储就会出现不匹配或是被覆盖的情况.为了解决这个问题,我们来设计一个可行的方案. 小程序版本 官方文档点这里 开发版 develop:本地预览,本地真机调试 所对应的小程序版本,只有在

  • 微信小程序获取用户信息并保存登录状态详解

    微信小程序获取用户信息并保存登录状态详解

    前言 微信小程序的运行环境不是在浏览器下运行的.所以不能以cookie来维护登录态.下面我就来说说我根据官方给出的方法来写出的维护登录态的方法吧. 一.登录态维护 官方的文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject 通过 wx.login() 获取到用户登录态之后,需要维护登录态.开发者要注意不应该直接把 session_key.openid 等字段作为用户的标识或者 session

  • 微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解 上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面.这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面. 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属

  • 微信小程序 页面跳转事件绑定的实例详解

    微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap

  • 微信小程序 消息推送php服务器验证实例详解

    微信小程序 消息推送php服务器验证实例详解 微信文档(靠下有个"接入指引"):https://mp.weixin.qq.com/debug/wxadoc/dev/api/custommsg/callback_help.html 设置页面("设置">>"开发设置"): https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN 1.设置服务器域名 比如:

  • 微信小程序 监听手势滑动切换页面实例详解

    微信小程序 监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时

  • 微信小程序本地缓存数据增删改查实例详解

    微信小程序本地缓存数据增删改查实例详解 数据如: var user = { name: 'Lion', sex: 'guy' } CRUD: // 添加 wx.setStorageSync('user', user); // 查询 var developer = (wx.getStorageSync('user') || []); // 更改 developer.name = 'Lion01'; wx.setStorageSync('user', user); // 删除 wx.removeSt

  • 微信小程序request请求后台接口php的实例详解

    微信小程序request请求后台接口php的实例详解 后台php接口:http://www.vueyun.com/good/info 没有处理数据,直接返回了,具体再根据返回格式处理 public function getGoodInfo(Request $request) { $goods_datas = $this->Resource->get(); return response()->json(['status' => 'success','code' => 200,

  • 微信小程序点击控件修改样式实例详解

    微信小程序点击控件修改样式实例详解

    微信小程序点击控件修改样式实例详解 现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. 第一步:在wxss中定义被点击和未被点击的样式,如下: .service_selection .is_checked{ border: 1px solid #FE0002 ; color: #FE0002 ; background: #fff; } .service_selection .norm

  • 微信小程序wx:for和wx:for-item的用法详解

    wx:for="{{list}}"用来循环数组,而list即为数组名wx:for-item="items" 即用来定义一个循环过程中每个元素的变量的 如果是一维数组,按照如下方式循环出来: <view wx:for="{{list}}"> {{index}} {{item.name}} </view> 以上代码中,item即为list的别名. 如果是二维甚至多维数组,按照如下方式循环: <view wx:for=&q

随机推荐