微信小程序缓存图片

本文主要是介绍微信小程序缓存图片，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

近期公司的小程序有个需求，就是要把列表页的图片缓存在本地，下次在打开的时候就不用从网络进行请求了，因为用户的网络不是很好；

想法是先把图片缓存起来，然后把图片的路径和订单编号保存在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，哈哈哈。

这篇关于微信小程序缓存图片的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！