近期公司的小程序有个需求,就是要把列表页的图片缓存在本地,下次在打开的时候就不用从网络进行请求了,因为用户的网络不是很好;
想法是先把图片缓存起来,然后把图片的路径和订单编号保存在storage里面;
用订单编号进行对比,id相同的话就把网络路径替换成本地缓存路径;
检查缓存里面之前有没有存这张照片,有的话就直接赋值,没有的话就先缓存,然后把路径和订单号存起来,再赋值
如果有新的要替换,就把最前面的给删除了
查阅了官方文档,发现可缓存可以存200MB;
所以先决定给缓存前十张试试水;
返回的列表数据是数组里面套对象,图片地址为reserve4;
在util.js里面写
// 文件系统管理器 const fs = wx.getFileSystemManager(); // 已提交列表的存储方法 async function setorderlistimg(data) { let arr = data.slice(0, 10); if (!wx.getStorageSync('listcache')) { wx.setStorageSync('listcache', []) } let ss = wx.getStorageSync('listcache'); let arr2 = []; for (let index = 0; index < arr.length; index++) { let res = await checkstor(ss, arr[index]); arr2.push(res); } wx.setStorageSync('listcache', ss); return arr2; } // 检查有没有列表的缓存 function checkstor(ss, obj) { return new Promise(async (resolve, reject) => { // 先判断数组里面有没有缓存这个订单 let flag = true; for (let index = 0; index < ss.length; index++) { if (ss[index].id == obj.id) { // 有的话直接赋值 let flag4; // 先判断图片有么有,有没有被手机主动清除 try { flag4 = await checkimgis(ss[index].path) } catch (error) { flag4 = false; } if (flag4) { obj.reserve4 = ss[index].path; } else { // 说明被清除了,将图片重新下载 let res = await imgstor2(api.ApiRootUrl + obj.reserve4); obj.reserve4 = ss[index].path = res.savedFilePath; } flag = false; } } // 没有的话先判断数组长度 if (flag) { if (ss.length > 10) { // 数组长度超过十,去缓存中把图片删除 let flag2 = false; let flag3; // 先判断图片有么有,有没有被手机主动清除 try { flag3 = await checkimgis(ss[0].path) } catch (error) { flag3 = false; } // 图片还在的话就主动删掉 if (flag3) { try { let del = await delimgstor(ss[0].path); flag2 = true; } catch (error) { console.log(error, '删除报错'); } } // 图片删除成功的话把数组里面存的路径也给删除 if (!flag3 || flag2) { ss.splice(0, 1); } else { console.log('删除失败'); } } // 将新的图片存入缓存和存入storage数组 let res = await imgstor2(api.ApiRootUrl + obj.reserve4); obj.reserve4 = res.savedFilePath; ss.push({ time: Date.parse(new Date()) / 1000, id: obj.id, path: res.savedFilePath }); } resolve(obj); }) } //检查照片有没有 function checkimgis(path) { return new Promise((resolve, reject) => { fs.getSavedFileInfo({ filePath: path, success(res) { resolve(true); }, fail(res) { reject(false) }, }) }) } // 删照片 function delimgstor(path) { return new Promise((resolve, reject) => { fs.removeSavedFile({ filePath: path, success(res) { resolve(res); }, fail(res) { reject(res) } }) }) } // 存网络路径照片 function imgstor2(path) { return new Promise((resolve, reject) => { wx.downloadFile({ url: path, success: function (res) { if (res.statusCode === 200) { fs.saveFile({ tempFilePath: res.tempFilePath, success(res) { resolve(res); }, fail(res) { reject(res) } }) } else { console.log('响应失败', res.statusCode) } }, fail(err) { console.log(err, 'rrrrrr'); } }) }) } module.exports = { setorderlistimg }
然后在请求数据的地方调用这个方法
const util = require('../../utils/util.js'); //接口请求到数据时 if (res.data.code == 0) { let arr = await util.setorderlistimg(res.data.data.records); res.data.data.records.splice(0, 10, ...arr); . . . . }
时间紧迫写的比较粗糙,用于记录。但我觉得肯定有bug,哈哈哈。