收藏
回答

image里的图片数据能不能缓存起来,下次读取直接读缓存呢

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 需求 image 微信iOS客户端 Android 6.6.7 2.0.0

每次setdata,image都会重新去服务器拿数据,有没有什么机制可以缓存下来,直接缓存。目前图片加载缓慢,大佬们帮忙给个解决方案呗


回答关注问题邀请回答
收藏

2 个回答

  • wengxianxun
    wengxianxun
    2018-08-19

    wx.saveFile(OBJECT)

    我的做法是把请求回来的图片下载到本地,然后用saveFile存储在本地,下次直接根据图片id去本地读取localpath, image控件就加载localpath,


    谁有更好到办法也说说。

    2018-08-19
    有用
    回复 5
    • wengxianxun
      wengxianxun
      2018-08-19

      /*

       步骤:

       1.用wx.downloadFile下载到临时文件

       2.用wx.saveFile保存临时文件到长久文件

       3.用wx.setStorage把长久文件路径和fileurl匹配存储,外部可直接使用fileurl获取到文件路径使用(可多次使用)

      */


      function downloadFile(fileid,fileurl, callback){


      console.log('downloadFile:'+fileurl);

      wx.downloadFile({

      url: fileurl,

      success: function (res) {

      console.log('下载完成');

      console.log(res);

      // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容

      if (res.statusCode === 200) {

      wx.saveFile({

      tempFilePath: res.tempFilePath,

      success: function (res) {

      var savedFilePath = res.savedFilePath;

      wx.setStorageSync(fileid, savedFilePath)//保存

      callback(fileid,fileurl,savedFilePath);

      console.log('下载图片到本地,并返回本地路径:'+savedFilePath);

      }

      })

      }else{

      console.log('错误状态:'+res.statusCode);

      }

      }

      })

      }


      /**

      * 根据文件url去本地获取,如果本地没有先去下载回本地

      * callback: 回调本地路径的文件或者图片,图片使用fileurl作为key保存在本地

      */

      function getLocalFile(fileid,fileurl,callback){

      console.log('fileid:' + fileid + 'fileurl:' + fileurl );


      var localfileurl = wx.getStorageSync(fileid);//获取本地是否有缓存

      if(localfileurl){ //存在链接

      wx.getSavedFileInfo({

      filePath: localfileurl,

      success: function (res) {

      console.log('存在本地url:'+localfileurl);

      callback(fileid,fileurl,localfileurl);

      },

      fail: function (res) {


      wx.removeStorageSync(fileid); //不存在就删除文件


      localfileurl = '';

      console.log('本地缓存被清理,重新下载:' + localfileurl);

      if (!localfileurl) {

      downloadFile(fileid,fileurl, callback);

      }

      }

      })

      }else{

      console.log('开始下载');

      downloadFile(fileid,fileurl, callback);

      }


      }


      /*

       删除缓存文件

      */

      function removeSaveFile(){

      wx.getSavedFileList({

      success: function (res) {

      if (res.fileList.length > 0) {

      wx.removeSavedFile({

      filePath: res.fileList[0].filePath,

      complete: function (res) {

      console.log(res)

      }

      })

      }

      }

      })

      }


      module.exports.downloadFile = downloadFile;

      module.exports.getLocalFile = getLocalFile;

      module.exports.removeSaveFile = removeSaveFile;




      把上面到代码保存到一个js文件,然后就可以使用, 代码写的不好,欢迎指正

      2018-08-19
      回复
    • 2018-09-03

      最后没有采用这种方法,而是http直接缓存了

      2018-09-03
      回复
    • 2018-09-05回复

      请问如何使用http缓存,image里的src要是不变的话,由于小程序的缓存机制,服务器图片变更了在小程序是无法更新的

      2018-09-05
      1
      回复
    • 2018-10-30回复

      加版本控制

      2018-10-30
      回复
    • 2019-03-18回复wengxianxun

      downloadFile下载速度没直接在image组件src加地址加载快,而且还有并发限制。最致命的是这接口不经过http缓存而直接去请求服务器,如果这接口请求地址能在http缓存阶段拦截的话省很多事(个人猜测的),最主要还是搞不懂src加载后的图片存在哪

      2019-03-18
      回复
  • 是小白啊
    是小白啊
    2018-07-23

    你好,你可以使用缓存进行数据的存取,这是相关的文档链接:https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxsetstorageobject

    2018-07-23
    有用
    回复 1
    • 2018-09-03

      最后没有采用这种方法,而是http直接缓存了

      2018-09-03
      回复
登录 后发表内容