微信小程式首頁圖檔本地緩存

來源

最近寫小程式的時候，因為首頁有輪播圖、廣告圖等等，導緻我的首屏加載太慢了，想着将一部分圖檔做下本地緩存。

解決辦法

1. 查詢api
   1. FileSystemManager.saveFile

      FileSystemManager.saveFile(Object object)

      儲存臨時檔案到本地。此接口會移動臨時檔案，是以調用成功後，tempFilePath 将不可用。

   2. wx.getSavedFileList

      wx.getSavedFileList(Object object)

      擷取該小程式下已儲存的本地緩存檔案清單

   3. FileSystemManager.removeSavedFile

      FileSystemManager.removeSavedFile(Object object)

      删除該小程式下已儲存的本地緩存檔案

2. 使用localstorage記錄緩存檔案
3. 合理利用接口擷取的圖檔清單（fileList）和目前localstorage的記錄
   1. localstorage存在，且fileList不存在，則删除localstorage的記錄，移除本地緩存
   2. localstorage不存在，且fileList存在，則先給img标簽網絡請求位址，并且把改圖檔緩存到本地，加入localstorage以便下次使用

代碼（這裡使用mpvue開發的小程式，小程式文法自行轉化）

callBackBanAd(o) {
        let _this = this;
        _this.imgArrAd = o.data;
        let cacheImgList = wx.getStorageSync("cacheImgList");
        let saveFileList = [];// 所有需要緩存的圖檔
        let downloadFileList = [];// 未緩存，需要下載下傳的圖檔
        _this.imgArrAd.forEach(item => {
          saveFileList.push(item.image);
          let encodeUrl = encodeURIComponent(item.image);// 将圖檔url做編碼，否則在做json的key會有問題
          if (cacheImgList[encodeUrl]) {
            item.image = cacheImgList[encodeUrl];
          } else {
            downloadFileList.push(item.image);  
          }
        });
        _this.downloadImg(saveFileList, downloadFileList);
      },
           

/**
       * fileList 所有需要儲存的圖檔，包括已經儲存的圖檔
       * downloadFileList 需要下載下傳的圖檔清單
       */
      downloadImg(fileList, downloadFileList) {
        const fs = wx.getFileSystemManager();
        let cacheImgList = wx.getStorageSync('cacheImgList') || {};
        for (let key in cacheImgList) {
          if (!fileList.includes(decodeURIComponent(key))) {
            fs.removeSavedFile({ filePath: cacheImgList[key] });
            delete cacheImgList[key];
          }
        }
        wx.setStorageSync('cacheImgList', cacheImgList);
        downloadFileList.forEach(url => {
          wx.downloadFile({
            url,
            success(res) {
              if (res.statusCode === 200) {
                fs.saveFile({
                  tempFilePath: res.tempFilePath,
                  success(res) {
                    let cacheImgList = wx.getStorageSync('cacheImgList') || {};
                    cacheImgList[encodeURIComponent(url)] = res.savedFilePath;
                    wx.setStorageSync('cacheImgList', cacheImgList)
                  }
                })
              }
            }
          });
        })
      },
           

注意事項

1. 該方法隻有10m的空間，要合理利用和回收，否則空間超過限制後，比加載慢還難過。
2. 這裡存在localstorage的資料是個Object，key是圖檔原位址，value是本地緩存的位址。也可以使用Array存儲，需要儲存key和value兩個值