+
80
-

小程序如何对图片进行缓存减少对cdn的请求产生的流量费用?

小程序如何对图片进行缓存减少对cdn的请求产生的流量费用?

网友回复

+
0
-

写一个下载到localStorage的辅助函数

const fileSystem = wx.getFileSystemManager()

const getStorageImage = (web_image) => {
  let webImages = wx.getStorageSync('webImages') || []
  let webImage = webImages.find(y => y.web_path === web_image)
  if (webImage) {
    try {
      fileSystem.accessSync(webImage.local_path)
      return webImage.local_path
    } catch(e) { 
      let webImageIdx = webImages.findIndex(y => y.web_path === web_image)
      webImages.splice(webImageIdx, 1)
      wx.setStorageSync('webImages', webImages)
    }
  } else {
    wx.downloadFile({
      url: web_image,
      success (res) {
        if (res.statusCode === 200) {
          let filePath = res.tempFilePath
          let webImageStorage = wx.getStorageSync('webImages') || []
          let storage = {
            web_path: web_image,
            local_path: filePath,
            last_time: Date.parse(new Date()),
          }
          webImageStorage.push(storage)
          wx.setStorageSync('webImages', webImageStorage)
        }
      }
    })
  }
  return web_image
}

module.exports = {
  getStorageImage
}

在显示图片地址的地方调用一下即可

<image src="{{image_filepath}}"></image>
<script>
this.setData("image_filepath",getStorageImage("http://test.com/test.png"));
</scrript>

我知道答案,我要回答