近期公司的小程序有个需求，就是要把列表页的图片缓存在本地，下次在打开的时候就不用从网络进行请求了，因为用户的网络不是很好；
想法是先把图片缓存起来，然后把图片的路径和订单编号保存在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，哈哈哈。