• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序缓存图片

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
用Python写一个模拟qq聊天小程序的代码实例发布时间:2022-07-18
下一篇:
微信小程序创建项目及配置文件发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap