专栏首页云市场·精选汇如何巧妙解决小程序缓存问题,这5点你都知道吗?
原创

如何巧妙解决小程序缓存问题,这5点你都知道吗?

一、什么是小程序缓存,它是怎么产生的呢?

1.开发者工具上的缓存:

清除缓存是我们开发者经常做的一个操作,我们需要在判断客户端在缺少缓存数据的情况下做出相应的处理

2.数据缓存:

数据缓存指的就是我们存在storage里面的缓存数据,也就是调用`getStorage`和`setStorage`这两种API所存储和获取到的缓存数据。

3.文件缓存:

指的是在wxml、wxss、js引入的一些网络文件,这些文件会进行缓存。

小程序播放音乐之后在手机文件夹中有缓存,目前是30天有效期,会自动清理。

4.授权数据:

授权数据指的是用户授权的一些状态,授权列表如下

5.网络缓存:

为了能用户有更好的使用体验,我们一般会设置网络缓存,将通过请求服务器得到的数据缓存到本地。

网络缓存也可以减少一定的网络请求,从而减轻服务器的压力。简单理解就是request得到的一些网络数据。

6.登录状态:

迫使session_key过期,从而需要重新登录。需要用wx.login得到的code去后台重新换取新的sessionid。

小程序启动流程图:

在小程序启动时,微信会为小程序展示一个固定的启动界面,界面内包含小程序的图标、名称和加载提示图标。此时,微信会在背后完成几项工作:下载小程序代码包、加载小程序代码包、初始化小程序首页。

(想了解更多行业小程序解决方案么?点击链接查看https://market.cloud.tencent.com/stores/1251619298

二、工程师面对小程序缓存应该做什么

1.缓存限制和隔离:

小程序宿主环境会管理不同小程序的数据缓存,不同小程序的本地缓存空间是分开的,每个小程序的缓存空间上限为10MB,如果当前缓存已经达到10MB,再通过wx.setStorage写入缓存会触发fail回调。

小程序的本地缓存不仅仅通过小程序这个维度来隔离空间,考虑到同一个设备可以登录不同微信用户,宿主环境还对不同用户的缓存进行了隔离,避免用户间的数据隐私泄露。

由于本地缓存是存放在当前设备,用户换设备之后无法从另一个设备读取到当前设备数据,因此用户的关键信息不建议只存在本地缓存,应该把数据放到服务器端进行持久化存储。

官方关于缓存的一些介绍:

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000a2c7c9f4a981b0086bd31e5b40a&highline=%E7%BC%93%E5%AD%98

2.利用本地缓存提前渲染界面:

讨论一个需求:我们要实现了一个购物商城的小程序,首页是展示一堆商品的列表。一般的实现方法就是在页面onLoad回调之后通过wx.request向服务器发起一个请求去拉取首页的商品列表数据,等待wx.request的success回调之后把数据通过setData渲染到界面上,如下代码所示。

设想一下当用户退出小程序再进来,界面仍然会有白屏现象,因为我们需要等待拉取商品列表的请求回来才能渲染商品列表。当然我们还可以再做一些体验上的优化,例如在发请求前,可能我们会在界面上显示一个Loading提示用户在加载中,但是并没有解决这个延迟渲染的现象,这个时候我们可以利用本地缓存来提前渲染界面。

我们在拉取商品列表后把列表存在本地缓存里,在onLoad发起请求前,先检查是否有缓存过列表,如果有的话直接渲染界面,然后等到wx.request的success回调之后再覆盖本地缓存重新渲染新的列表,如下代码所示。

这种做法可以让用户体验你的小程序时感觉加载非常快,但是你还要留意这个做法的缺点,如果小程序对渲染的数据实时性要求非常高的话,用户看到一个旧数据的界面会非常困惑。因此一般在对数据实时性/一致性要求不高的页面采用这个方法来做提前渲染,用以优化小程序体验。

(想了解更多行业小程序解决方案么?点击链接查看https://market.cloud.tencent.com/stores/1251619298

三、小程序如何清理缓存:

可以尝试直接删除小程序,达到缓存清理的目的。

具体的删除方法是:

iOS 微信:进入微信中的「发现」-「小程序」,将不想要的小程序从右往左划动,然后点击红色的「删除」按钮即可。

Android 微信:进入微信中的「发现」-「小程序」,长按不想要的小程序,然后点击「删除」按钮即可。

需要注意的是,删除小程序,会将对应小程序的本体、本地数据以及权限偏好删除,但不会删除小程序服务器上的数据。

也就是说,删除小程序后,你将永久丢失小程序中未备份、未上传的数据。在删除小程序之前,记得做好备份工作喔。

删除之后,如果想再次使用这个小程序,只需重新搜索、扫码,再打开小程序,就可以了。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 还在用朋友圈卖水果么?教你用小程序收获更多新流量

    足不出户就能便捷地买到水果,这不仅是用户的需求,也是商家的机遇。目前,很多水果生鲜商家已借助小程序平台打开线上市场,微盛某生鲜超市上线半年以来用户已破十万,让我...

    微盛企微管家
  • 行业 | 学校管理效率低怎么办?小程序四大能力助力学校智慧升级

    通知下达流程多、效率低,问题收集难,教学安排传达时效性差,宣传方式单一,校园活动参与率低、统计难………… 这些都是传统校园管理运营场景中经常遭遇的痛点,怎样才能...

    微盛企微管家
  • 小程序99问

    A:微信支付商户申请填写结算账户时如果找不到所在的银行,请选择“其他银行”后手动填写所在支行全称,例如:建设银行佛山市环市支行。

    微盛企微管家
  • Mybaitis 缓存的优化

    这段代码中, Mybatis一共发了两条SQL,这就好像说, Mybatis中没有缓存,然后我们打开Mybatis的文档一看,顿时震惊

    程序猿DD
  • 后端技能清单(草稿)

    昨天也顺手整理了一下我所需要的后端技能清单。不过,由于我离非常有经验的后端开发者有点距离,希望大家可以给点意见哈。 入门 HTML / CSS 编程语言:Ja...

    Phodal
  • ASP.NET MVC编程——缓存

    Web缓存分为服务端缓存和客户端缓存。 1 服务端缓存 1.1请求域内的缓存:HttpContext.Items 类型: HttpContext.Items的类...

    甜橙很酸
  • Redis6 最重要的新功能「客户端缓存」是个什么鬼?

    应用缓存通常分两种,本地缓存和远程缓存。本地缓存就是内存缓存 LocalCache,远程缓存就是分布式共享缓存比如 Redis。本地缓存在访问性能上远胜过远程缓...

    老钱
  • Spring Boot2(二):使用Spring Boot2集成Mybatis缓存机制

    学习SpringBoot集成Mybatis的第二章,了解到Mybatis自带的缓存机制,在部署的时候踩过了一些坑。在此记录和分享一下Mybatis的缓存作用。

    鸟不拉屎
  • 细说shiro之七:缓存

    Shiro作为一个开源的权限框架,其组件化的设计思想使得开发者可以根据具体业务场景灵活地实现权限管理方案,权限粒度的控制非常方便。 首先,我们来看看Shiro...

    2Simple
  • 缓存在高并发场景下的常见问题

    当数据时效性要求很高时,需要保证缓存中的数据与数据库中的保持一致,而且需要保证缓存节点和副本中的数据也保持一致,不能出现差异现象。这就比较依赖缓存的过期和更新策...

    java思维导图

扫码关注云+社区

领取腾讯云代金券