写在前面

小程序网络图片读取:

  1. 在读取OSS图片CDN分发时流量大量消耗,导致资金费用增加。
  2. 网络图片比较大时,图片加载缓慢。

为了尽量减少上面两个问题,所以对已读的图片进行缓存处理,减少多次访问不必要的流量消耗。

小程序的文件系统

文件主要分为两大类:

  • 代码包文件:代码包文件指的是在项目目录中添加的文件。
  • 本地文件:通过调用接口本地产生,或通过网络下载下来,存储到本地的文件。

其中本地文件又分为三种:

  1. 本地临时文件:临时产生,随时会被回收的文件。不限制存储大小。
  2. 本地缓存文件:小程序通过接口把本地临时文件缓存后产生的文件,不能自定义目录和文件名。跟本地用户文件共计,普通小程序最多可存储 10MB,游戏类目的小程序最多可存储 50MB。
  3. 本地用户文件:小程序通过接口把本地临时文件缓存后产生的文件,允许自定义目录和文件名。跟本地缓存文件共计,普通小程序最多可存储 10MB,游戏类目的小程序最多可存储 50MB。

而我们要使用的文件缓存方式就是 本地临时文件

实现原理

图片缓存流程:

  1. 将要图片/文件通过wx.downloadFile(Object object)下载到本地,成为本地临时文件。
  2. 使用小程序的Storage记录网络地址本地地址,做映射。
  3. 使用时,在Storage读取映射表。如果存在本地文件,并通过FileSystemManager.accessSync(string path)判断文件存在,则读取本地地址;不存在,删除该映射。

图片缓存流程图

注意

  • 图片缓存只针对多次访问的图片,请按照实际情况调用。如果访问一次的也做,CDN流量消耗反倒翻倍,得不偿失。
  • 小程序缓存最大10M。为防止将缓存写满,小程序初始化时,如果超过1000条,清空缓存记录,重新开始。
  • 1000条。该数不是固定数字,请根据自己的实际情况自定。如果你本身就会往Storage放数据,请自行判断需要多少条,不要导致其他数据无法存入,影响其他功能正常使用。
  • 为什么不用LRU最近使用删除?没必要。1000本身是个虚数,留存1~2M做其他代码备用,而文件异步保存,本身会导致有好多文件无法检测到,如果通过循环去判断最近时间,太耗费性能,还不如进入小程序时,直接清空,从头开始。小程序本身是轻量级的,一段时间清空一次即可。

代码

const fileSystem = wx.getFileSystemManager()

const getStorageImage = (web_image) => {
let webImages = wx.getStorageSync('webImages') || []
let webImage = webImages.find(y => y.web_path === web_image)
if (webImage) {
try {
fileSystem.accessSync(webImage.local_path)
return webImage.local_path
} catch(e) {
let webImageIdx = webImages.findIndex(y => y.web_path === web_image)
webImages.splice(webImageIdx, 1)
wx.setStorageSync('webImages', webImages)
}
} else {
wx.downloadFile({
url: web_image,
success (res) {
if (res.statusCode === 200) {
let filePath = res.tempFilePath
let webImageStorage = wx.getStorageSync('webImages') || []
let storage = {
web_path: web_image,
local_path: filePath,
last_time: Date.parse(new Date()),
}
webImageStorage.push(storage)
wx.setStorageSync('webImages', webImageStorage)
}
}
})
}
return web_image
} module.exports = {
getStorageImage
}

写在后面

本文参照博客

  • https://juejin.im/post/5b42d3ede51d4519277b6ce3

(幽蛰 写于 2020.06.10)

小程序-图片/文件本地缓存,减少CDN流量消耗的更多相关文章

  1. 微信小程序如何修改本地缓存key中的单个数据

    假如用户注册后,获得用户手机号和userid,realName默认为0,然后进入B页面进行实名认证,认证成功后realName变为1,再更新缓存里的用户信息. A页面用户注册后,存储用户信息: var ...

  2. 微信小程序图片保存到本地

    微信小程序图片保存到本地是一个常用功能: 这里讲解下完整实现思路: 因为微信官方的授权只弹一次,用户拒绝后再次调用,就需要结合button组件的微信开放能力来调起,以下方案在微信各种授权中可参考. w ...

  3. 微信小程序--图片相关问题合辑

    图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...

  4. 微信小程序图片选择,预览和删除

    这里均用的是小程序原生api 废话不多说直接上栗子: <view class="addImv"> <!--这个是已经选好的图片--> <view wx ...

  5. 微信小程序上传图片及本地测试

    前端(.wxml) <view id="view1"> <view id="btns"> <image id="ima1 ...

  6. (SSM框架)实现小程序图片上传(配小程序源码)

    阅读本文约"2分钟" 又是一个开源小组件啦! 因为刚好做到这个小功能,所以就整理了一下,针对微信小程序的图片(文件)上传! 原业务是针对用户反馈的图片上传.(没错,本次还提供小程序 ...

  7. 微信小程序 图片裁剪

    微信小程序 图片裁剪 分享一个微信小程序图片裁剪插件,很好用,支持旋转 文档:https://github.com/wyh19931106/image-cropper 1.json文件中添加image ...

  8. 小程序--->小程序图片上传阿里OSS使用方法

    小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到 ...

  9. 微信小程序图片上传和裁剪

    本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等. 图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cr ...

随机推荐

  1. Spark_Streaming整合Kafka

    Spark Streaming 整合 Kafka ​ 一.版本说明二.项目依赖三.整合Kafka        3.1 ConsumerRecord        3.2 生产者属性        3 ...

  2. 若依微服务版本 Windows下开发环境搭建

    看了若依官网的教程,搭建环境还是踩了坑,简单整理一下 1.下载地址:https://gitee.com/y_project/RuoYi-Cloud 2.本地环境(仅供参考) JDK1.8 Mysql  ...

  3. 基于 abp vNext 和 .NET Core 开发博客项目 - 再说Swagger,分组、描述、小绿锁

    在开始本篇正文之前,解决一个 @疯疯过 指出的错误,再次感谢指正. 步骤如下: 删掉.Domain.Shared层中的项目引用,添加nuget依赖包Volo.Abp.Identity.Domain.S ...

  4. Windows Terminal安装并美化

    介绍 Windows Teminal是一款新式.快速.高效.强大的终端应用程序,适用于命令行工具.命令提示符.PowerShell.WSL(Linux子系统)等等的Shell用户,主要功能包括多选项卡 ...

  5. 检查可执行App类型是否为executable (腾讯上线预审核报错)otool工具使用

    https://blog.csdn.net/lovechris00/article/details/81561627 查看IPA文件的路径 1,解压缩 xcode导出的xxx.ipa文件 2,然后在解 ...

  6. 哈理工新生赛 马拉车+贪心 最大密度子图 AC自动机+DP

    J.Symmys Time Limit: 1000 MS Memory Limit: 262144 K Total Submit: 50 (13 users) Total Accepted: 2 (2 ...

  7. 【网络安全】【02】Windows系统如何屏蔽自动更新

    一.win键 + r   ==>  输入  services.msc 二. win键 + r   ==>  输入  gpedit.msc PS:我的电脑基本两年没有更新过了  -_-

  8. Kubernetes学习笔记(六):使用ConfigMap和Secret配置应用程序

    概述 本文的核心是:如何处理应用程序的数据配置. 配置应用程序可以使用以下几种途径: 向容器传递命令行参数 为每个容器配置环境变量 通过特殊的卷将配置文件挂载到容器中 向容器传递命令行参数 在Kube ...

  9. web自动化之alert弹窗操作

    from selenium import webdriver from selenium.webdriver.support.wait import WebDriverWait from seleni ...

  10. Java中的集合(七)双列集合顶层接口------Map接口架构

    Java中的集合(七)双列集合顶层接口------Map接口 一.Map接口的简介 通过List接口,我们知道List接口下的集合是单列集合,数据存储是单列的结构.Map接口下是一个键值对(key-v ...