微信小程序实现网络图片本地缓存

男娘i 2024-04-18 10:34 100阅读 0赞

在开发项目的过程中，微信小程序需要实现网络图片的本地缓存。因为图片大小>1M,所以用户每次打开小程序都要重新下载，由于图片比较大，下载时间比较久，就容易造成不好的用户体验。那么，在小程序里面具体怎么实现图片的缓存呢，接下来看具体实现代码逻辑。  
刚看到这个需求的时候，我的第一反应是通过小程序提供的数据缓存api来实现，

wx.setStorageSync(string key, any data)

但是api的限制就是data只能是原生类型，date，或者可以JSON序列化的对象。这样的话就不可能把image当成文件来存储了。那么，我们怎么实现把image当成一个文件来存储到本地缓存呢?接下来，将介绍如何使用小程序的文件系统来实现图片的文件缓存。

// 第一步： 既然要缓存图片，那么我们要先将图片下载下来。
    // wx.downloadFile 必填参数url: 图片的地址。
    //当图片下载成功以后，会返回给我们一个tempFilePath。临时的文件路径
    //那么问题来了，这个临时的文件路径到底怎么理解呢？
    //本地临时文件只能通过调用特定接口产生，不能直接写入内容。本地临时文件产生后，
    //仅在当前生命周期内有效，重启之后即不可用。因此，不可把本地临时文件路径存储起来下次使用
    //上面的是微信小程序 文档对临时的文件路径的解释。
    //所以到这一步， 这个临时的文件路径不满足我们的需求。那么接下来我们怎么利用这个临时文件路径实现本地缓存呢？
    wx.downloadFile({
          url: 'xxxxxxx',
          success: function(res) {
            if (res.statusCode === 200) {
              console.log('图片下载成功' + res.tempFilePath)
              // 第二步: 使用小程序的文件系统，通过小程序的api获取到全局唯一的文件管理器
              const fs = wx.getFileSystemManager()
              //  fs为全局唯一的文件管理器。那么文件管理器的作用是什么，我们可以用来做什么呢？
             //   文件管理器的作用之一就是可以根据临时文件路径，通过saveFile把文件保存到本地缓存.
              fs.saveFile({
                tempFilePath: res.tempFilePath, // 传入一个临时文件路径
                success(res) {
                  console.log('图片缓存成功', res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径  
                  // 此时图片本地缓存已经完成，res.savedFilePath为本地存储的路径。
                  //小程序的本地文件路径标准： {
       {协议名}}://文件路径
                  //协议名在 iOS/Android 客户端为 "wxfile"，在开发者工具上为 "http"，
                  //开发者无需关注这个差异，也不应在代码中去硬编码完整文件路径。
                  //好了，到此为止，我们已经把图片缓存到本地了，而且我们也得到了本地缓存的路径。
                  // 那么我们把本地缓存的路径，通过小程序的数据缓存服务保存下来。
                  // 下次打开小程序 首先去缓存中检查是否存在本地文件的缓存路径
                  // 如果有，直接image src赋值本地缓存路径。
                  //如果没有，则是第一次下载图片，或者用户手动清理缓存造成的。
                  wx.setStorageSync('image_cache', res.savedFilePath)
                }
              })
            }else {
              console.log('响应失败', res.statusCode)
            }
          }

下面代码是使用缓存给Image赋值的简短逻辑

/// 重新启动小程序，去缓存中获取图片的缓存地址。 然后给Imagesrc赋值
    const path = wx.getStorageSync('image_cache')
        if (path != null) {
            console.log('path====', path)
            this.setData({
                image_filepath: path
            })
        }else {
           console.log('去缓存图片')  
        }
    }
        
    <image src="{
       {image_filepath}}"></image>

接下来用一张图片来解释一下整体缓存思路。

![format_png][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy83NTQ3MTY3LTkxYjZhYjZlNzM5ZTViNDgucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTAyNC9mb3JtYXQvd2VicA?x-oss-process=image/format,png