小程序内一些固定的图片存放于cdn上面，通过设置缓存来减少cdn流量和提升加载速度

直接上代码

/*
 * @Description: 图片缓存
 */
const IMAGE_CACHE = 'imageCache'
/** 获取图片缓存路径 */
const getImgCacheByStorage = () => wx.getStorageSync(IMAGE_CACHE) ?? {}
/** 设置图片缓存路径 */
const setImgCacheByStorage = (data: object) =>
  wx.setStorageSync(IMAGE_CACHE, data)

const env = {
    /** 图片缓存最大空间 190MB 预留10MB */
    CACHE_TOTAL_SIZE: 199229440
}
/**
 * 下载图片
 */
const downloadFile = (url: string) => {
  if (!url) return

  wx.downloadFile({
    url,
    success(res) {
      // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
      if (res.statusCode === 200) {
        const fs = wx.getFileSystemManager()
        // 获取文件大小
        fs.getFileInfo({
          filePath: res.tempFilePath,
          success: (result) => {
            if (result.size) {
              // 读取缓存
              const cache = getImgCacheByStorage()
              // 总缓存大小
              let totalSize = cache.totalSize ?? 0
              // 文件列表 按照使用时间大小排序
              let fileList = Object.keys(cache)
                .filter((n) => n == 'totalSize')
                .map((n) => ({ ...cache[n], key: n }))
                .sort(
                  (a: { time: number }, b: { time: number }) => a.time - b.time
                )
              // 将要删除的文件key列表
              let delKeys = []

              // 如果存储超限
              if (totalSize + result.size > env.CACHE_TOTAL_SIZE) {
                for (let i = 0; i < fileList.length; i++) {
                  const e = fileList[i]
                  // 减去待删除文件大小
                  totalSize -= e.size
                  delKeys.push(e.key)
                  // 如果满足空间需要则退出循环
                  if (totalSize + result.size < env.CACHE_TOTAL_SIZE) {
                    break
                  }
                }
              }

              // 删除多余文件
              if (delKeys.length) {
                for (const i of delKeys) {
                  fs.unlinkSync(cache[i].path)
                  delete cache[i]
                }
              }

              // 保存新文件
              const path = fs.saveFileSync(res.tempFilePath)
              const newCache = {
                totalSize: totalSize + result.size,
                ...cache,
                // 远程文件路径为key
                [url]: {
                  // 本地文件路径
                  path,
                  // 最近使用时间
                  time: Date.now(),
                  // 文件大小
                  size: result.size,
                },
              }
              setImgCacheByStorage(newCache)
            }
          },
        })
      }
    },
    fail(res){
      console.log("🚀 ~ 文件下载失败:", res)
    }
  })
}

/**
 * 获取单个图片缓存
 * @param img 图片地址
 */
export const getImgCache = (img: string) => {
  if (!img) return

  const cache = getImgCacheByStorage()
  if (cache[img]) {
    console.log('🚀 ~ 命中缓存', cache[img])
    // 更新使用时间
    const newCache = {
      ...cache,
      [img]: {
        path: cache[img].path,
        time: Date.now(),
        size: cache[img].size,
      },
    }
    setImgCacheByStorage(newCache)
    return cache[img].path
  }

  wx.nextTick(() => {
    console.log('🚀 ~ 重新下载', img)
    downloadFile(img)
  })

  return img
}

使用

getImgCache('https://cdn.bg7zag.com/wp-content/uploads/2023/07/1690365809-mp_app678437.png')