博客
关于我
微信小程序 实现网络图片本地缓存
阅读量:163 次
发布时间:2019-02-28

本文共 2094 字,大约阅读时间需要 6 分钟。

在开发项目的过程中,微信小程序需要实现网络图片的本地缓存。因为图片大小>1M,所以用户每次打开小程序都要重新下载,由于图片比较大,下载时间比较久,就容易造成不好的用户体验。那么,在小程序里面具体怎么实现图片的缓存呢,接下来看具体实现代码逻辑。

刚看到这个需求的时候,我的第一反应是通过小程序提供的数据缓存api来实现,

wx.setStorageSync(string key, any data)

但是api的限制就是data只能是原生类型,date,或者可以JSON序列化的对象。这样的话就不可能把image当成文件来存储了。那么,我们怎么实现把image当成一个文件来存储到本地缓存呢?接下来,将介绍如何使用小程序的文件系统来实现图片的文件缓存。

// 第一步: 既然要缓存图片,那么我们要先将图片下载下来。// wx.downloadFile 必填参数url: 图片的地址。//当图片下载成功以后,会返回给我们一个tempFilePath。临时的文件路径//那么问题来了,这个临时的文件路径到底怎么理解呢?//本地临时文件只能通过调用特定接口产生,不能直接写入内容。本地临时文件产生后,//仅在当前生命周期内有效,重启之后即不可用。因此,不可把本地临时文件路径存储起来下次使用//上面的是微信小程序 文档对临时的文件路径的解释。//所以到这一步, 这个临时的文件路径不满足我们的需求。那么接下来我们怎么利用这个临时文件路径实现本地缓存呢?wx.downloadFile({      url: 'xxxxxxx',      success: function(res) {        if (res.statusCode === 200) {          console.log('图片下载成功' + res.tempFilePath)          // 第二步: 使用小程序的文件系统,通过小程序的api获取到全局唯一的文件管理器          const fs = wx.getFileSystemManager()          //  fs为全局唯一的文件管理器。那么文件管理器的作用是什么,我们可以用来做什么呢?         //   文件管理器的作用之一就是可以根据临时文件路径,通过saveFile把文件保存到本地缓存.          fs.saveFile({            tempFilePath: res.tempFilePath, // 传入一个临时文件路径            success(res) {              console.log('图片缓存成功', res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径                // 此时图片本地缓存已经完成,res.savedFilePath为本地存储的路径。              //小程序的本地文件路径标准: {  {协议名}}://文件路径              //协议名在 iOS/Android 客户端为 "wxfile",在开发者工具上为 "http",              //开发者无需关注这个差异,也不应在代码中去硬编码完整文件路径。              //好了,到此为止,我们已经把图片缓存到本地了,而且我们也得到了本地缓存的路径。              // 那么我们把本地缓存的路径,通过小程序的数据缓存服务保存下来。              // 下次打开小程序 首先去缓存中检查是否存在本地文件的缓存路径              // 如果有,直接image src赋值本地缓存路径。              //如果没有,则是第一次下载图片,或者用户手动清理缓存造成的。              wx.setStorageSync('image_cache', res.savedFilePath)            }          })        }else {          console.log('响应失败', res.statusCode)        }      }

下面代码是使用缓存给Image赋值的简短逻辑

/// 重新启动小程序,去缓存中获取图片的缓存地址。 然后给Imagesrc赋值const path = wx.getStorageSync('image_cache')    if (path != null) {        console.log('path====', path)        this.setData({            image_filepath: path        })    }else {       console.log('去缓存图片')      }}    

 

接下来用一张图片来解释一下整体缓存思路。

 

 

转载地址:http://xmad.baihongyu.com/

你可能感兴趣的文章
MYSQL 幻读(Phantom Problem)不可重复读
查看>>
mysql 往字段后面加字符串
查看>>
mysql 快速自增假数据, 新增假数据,mysql自增假数据
查看>>
Mysql 报错 Field 'id' doesn't have a default value
查看>>
MySQL 报错:Duplicate entry 'xxx' for key 'UNIQ_XXXX'
查看>>
Mysql 拼接多个字段作为查询条件查询方法
查看>>
mysql 排序id_mysql如何按特定id排序
查看>>
Mysql 提示:Communication link failure
查看>>
mysql 插入是否成功_PDO mysql:如何知道插入是否成功
查看>>
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>
MySQL 数据库设计总结
查看>>
Mysql 数据库重置ID排序
查看>>
Mysql 数据类型一日期
查看>>
MySQL 数据类型和属性
查看>>
mysql 敲错命令 想取消怎么办?
查看>>