详解小程序缓存插件(mrc)

背景

wx.request是小程序提供的API，用于发起网络请求，在频繁并且响应较慢的业务中的请求，页面白屏或者loading时间也相应比较长，然而合理的利用缓存是个很好提升界面响应速度，减少网络资源占用的手段。

mrc提供2种换成模式用于业务中使用

短期缓存

对于实时性要求相对较低的业务场景而言，可以使用短期缓存。

短期缓存能够将接口数据在一定时间内缓存起来，在时间范围内再次请求的话，可以直接使用缓存数据，减少白屏或者loading时间。设置不同的缓存时间来适应不同的业务，还可以有效的节约网络资源

快照缓存

类比搜索引擎的快照，针对请求响应较慢的并且实时性又比较高的场景而言，可以使用快照缓存。

快照缓存每次请求都会先返回上一次缓存数据作为结果返回，然后再去请求，等到请求返回之后再更新缓存，业务方可以对比2次返回结果进行局部渲染

使用

mrc以一种侵入式最小的方式封装了原生的resquestAPI，扩展原生API的功能，可以支持promise以及2种缓存方式。

//app.js

//引入request缓存插件
import Mrc from './dist/mrc.min';

//实例化一个全局引用
App({
 wxp: new Mrc({
  prefix: '___CACHE___',   //选填，存储字段前缀，默认___CACHE___
  timeout: 600000,    //选填，缓存多长时间，单位ms，默认10分钟
 }),
})
//page.js
const app = getApp()
let {wxp} = app
Page({
 data: {

 },
 onLoad: function () {
  wxp.request({
   url: 'http://xxxxxx',
   cache: {
    enable: true,    //选填，是否开启缓存，默认false
    type: 'snapshot',   //选填，开启缓存类型，定时(timeout)、快照(snapshot)，默认定时
    timeout: 600000,    //选填，定时缓存时间，使用优先级，当前配置>全局配置>默认配置
   },
  })
   .then((res) => {
    //快照缓存时会多返回一个正式请求的promise对象，用于获取正式请求的数据
    return res.req;
   })
   .then((res) => {
    console.log(res);

   })
 },
})

特性

  1. 缓存类型为快照缓存时，缓存的数据为持久缓存，timeout设置无效
  2. 缓存类型为快照缓存时，第一个then回调会带上正式请求的promise对象，用于下个then回调获取正式请求的数据
  3. 不想使用缓存时（enable=false），一样可以用mrc实例化之后的对象正常请求，支持promise

对比

类型 是否持久化 是否每次都请求 实时性
快照缓存 是 是 高
短期缓存 否 否 低

配合骨架屏来使用效果更佳！！！

总结

缓存插件的使用可以有效的提升页面打开速度，并且在频繁的网络请求中可以有效的节约服务器资源。具体的调用方式和源码，请看 github，最后求start

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 缓存（本地缓存、异步缓存、同步缓存）详解

    微信小程序 缓存 关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync) 可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB 2.localStorage 是永久存储 一.异步缓存 wx.setStorage(OBJECT) 将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容 wx.setStor

  • IOS中微信小程序播放缓存的音频文件的方法

    很多时候我们都想把数据预先缓存到本地,节省带宽.但是最近在处理微信小程序播放缓存到本地的音频文件的时候,遇到一些小问题,然后对于安卓和IOS需要采用不同的播放策略. 首先,如果哪怕用audio标签来播放在线的音频文件,假如服务端没有实现断点续传,IOS是无法播放的,这个需要注意. 对于缓存在小程序的音频(wx.saveFile(OBJECT)保存的音频),IOS只能通过播放背景音乐的接口播放,其它播放方法都没有成功实践,而对于安卓,内部 audio 上下文 innerAudioContext 对

  • 微信小程序基于本地缓存实现点赞功能的方法

    本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法.分享给大家供大家参考,具体如下: wxml中的写法 注意: 1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果: 2. 为图片绑定点击事件bindtap="toCollect",两个image标签都要绑定! <image wx:if="{{collection}}" src="/images/icon/pic1.png" bind

  • 微信小程序之数据缓存的实例详解

    微信小程序之数据缓存的实例详解

    微信小程序之数据缓存的实例详解 前言: 在H5之前,缓存一般都是用cookie,但是cookie的存储空间太小.于是,H5增加了新的缓存机制,即localstorage 和 sessionstorage,具体的介绍就不在多说.在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难.下面我们来一起实现一下. 效果图展示: 我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面.具体代码如下: index页面: <span sty

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

    微信小程序本地缓存数据增删改查实例详解 数据如: 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

  • 微信小程序开发之数据存储 参数传递 数据缓存

    微信小程序开发之数据存储 参数传递 数据缓存

    微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用. 现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子. 先上GIF: 1.APP.js 我把常用且不会更改的参数放在APP.js的data里面了.在各个page中都可以拿到var app = getApp(

  • 微信小程序-详解数据缓存

    微信小程序-详解数据缓存

    每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB. 注意: localStorage 是永久存储的,但是我们不建议将关键信息全部存在 localStorage,以防用户换设备的情况. wx.setStorage(OBJECT) 将数据存储

  • 微信小程序实现缓存根据不同的id来进行设置和读取缓存

    微信小程序实现缓存根据不同的id来进行设置和读取缓存

    本文是根据不同的id来进行设置和读取缓存,是同步缓存的方式: jonNums.count 是接口返回的数据  是报名总人数 newNumber  新的报名总人数 - 缓存上次的报名总人数 = 新增报名人数 onLoad: function (options) { var that = this; var activityId = options.activityId; //报名表人数统计 wx.request({ url: domain + '/activityjoin/selectJoinCo

  • 详解小程序缓存插件(mrc)

    背景 wx.request是小程序提供的API,用于发起网络请求,在频繁并且响应较慢的业务中的请求,页面白屏或者loading时间也相应比较长,然而合理的利用缓存是个很好提升界面响应速度,减少网络资源占用的手段. mrc提供2种换成模式用于业务中使用 短期缓存 对于实时性要求相对较低的业务场景而言,可以使用短期缓存. 短期缓存能够将接口数据在一定时间内缓存起来,在时间范围内再次请求的话,可以直接使用缓存数据,减少白屏或者loading时间.设置不同的缓存时间来适应不同的业务,还可以有效的节约网络

  • 详解小程序横屏方案对比

    前言 随着小程序api开放的功能日渐增多,小程序可以做到的功能和展现形式也越来越多,其中横屏的展现形式就是其中的一种,而实现横屏的方案也有多种,但是每种方案都有一定的缺陷,恰巧最近也在横屏方案上踩了不少坑,接下来就来和大家分享一下小程序的不同横屏方案的优劣(踩坑心得) 组件自带横屏方法 小程序中的媒体组件一般都会提供全屏的方法,而且全屏方法中会提供一个direction的全屏参数,可以通过这全屏参数将小程序旋转90度横屏展示,这是小程序中最简单的横屏方法. 这个方法优点在于调用的组件全屏方法做的

  • 详解小程序设置缓存并且不覆盖原有数据

    详解小程序设置缓存并且不覆盖原有数据

    最近在写小程序的小项目,因为是刚上手小程序,这途中遇到了许多问题,所幸在自己的坚持不懈下基本都得到了解决,今天就记录一下怎么设置缓存数据并且不覆盖吧,如果有错误的地方麻烦大家指正,互相学习一下! 这是官方的关于缓存的说明,它会覆盖掉之前的内容.我还是直接上源码吧 这是writecomment.js文件 Page({ /** * 页面的初始数据 */ data: { }, submit: function (event) { var writecomment = event.detail.valu

  • 详解小程序之简单登录注册表单验证

    详解小程序之简单登录注册表单验证

    这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容 一.首先我是在util.js中引入表单正则验证规则,给予login.js来引用 function regexConfig() { var reg = { userid: /^[A-Za-z0-9]+$/, //邮箱正则验证 phone: /^1(3|4|5|7|8)\d{9}$/, //手机号正则验证 cards: /^[\u4e00-\u9fa5]{2,

  • 详解小程序毫秒级倒计时（适用于拼团秒杀功能）

    详解小程序毫秒级倒计时（适用于拼团秒杀功能）

    废话不多说直接上代码: 效果图: index.js Page({ /** * 页面的初始数据 */ data: { countdown:'' , endDate2: '2018-08-08 11:41:00' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; that.countTime() }, countTime() { var that = this; var date = new Date()

  • 详解小程序用户登录状态检查与更新实例

    这篇文章主要解决以下问题:用户每次登录小程序(包括第一次使用)及点击小程序的每个页面的时候,我们如何判断他当前的登录状态是否过期?如果过期,如何重新获取用户信息并发送至开发者服务器更新用户信息,以及设置新的用户登录状态? 将这个部分单独作为一篇文章有两个原因: ① wx.getUserInfo(OBJECT) 接口调整,废弃了以前直接获取用户信息的方法: ② 上篇文章授权.登录.session_key.unionId只梳理了登录流程而没有贴实际的代码,所以这篇文章以代码实现为主. 1. 代码逻辑

  • 详解小程序开发经验：多页面数据同步

    详解小程序开发经验：多页面数据同步

    导语:本文主要介绍在小程序中,多页面之间如何保持数据同步 在很多的产品中,都会存在跨页面间需要数据同步,如下示例: 为了更好的理解该场景,我们再详细描绘一下: 本场景包括4个页面:动态广场.个人中心.我的动态.动态详情 首先,进入动态广场页,请求加载数据,展示动态列表,其中,我们用绿色内阴影区分该条动态是"我的",其他未加内阴影的表示是"别人的": 然后,进入个人中心页,请求加载数据,展示获赞数量: 点击我的动态,进入我的动态页,请求加载数据,展示我的动态列表: 点

  • 详解小程序云开发数据库

    在云控制台操作云数据库,即创建数据库和插入数据等操作. 云开发数据库提供的数据类型:string.number.object.array.bool.GeoPoint(地理位置点).Date(时间).Null 其中的Date表示时间,精确到毫秒.小程序端用Javascript内置Date对象创建的时间是客户端时间,在需要用服务端时间的时候,用API中提供的serverDate对象来创建服务端当前的时间标记. GeoPoint:用于表示地理位置点,经纬度唯一标记一个点,可以把这个地理位置理解为平面直

  • 详解小程序退出页面时清除定时器

    详解小程序退出页面时清除定时器

    由于小程序页面退出时,定时器和长连接等不会自动清除断开,所以需要我们在生命周期函数中手动清除 但是定时器定义在函数中,我们无法在函数外清除,所以为了解决这个问题,我们需要把定时器定义在data中 比如:Loadingtime是一个定时器,在data中定义Loadingtime:''. 然后在time方法中使用 在onUnload监听页面卸载生命周期函数中清除 如此在退出该页面时,就可以清除该定时器了 以上所述是小编给大家介绍的小程序退出页面时清除定时器详解整合,希望对大家有所帮助,如果大家有任何

  • 详解小程序中h5页面onShow实现及跨页面通信方案

    小程序webview的现状 h5页面在小程序中的交互(跳转)场景 h5跳转小程序native页面(如:调用小程序地址选择能力,然后返回对应的地址信息给h5页面) h5跳转己方业务线的h5页面(内部页面交互,方式比较多样) h5跳转其它业务线的h5页面(如:交易流程,相关页面可能有其他业务线提供) 主要痛点 在完成相关操作后, 页面状态需要更新 ,目前常见的更新方式有如下两种: 第一种:通过url传参(如:url中加入__isonshowrefresh=1,告诉webview再次onshow时候刷

随机推荐