微信小程式 實現網路圖片本地快取

在開發專案的過程中，微信小程式需要實現網路圖片的本地快取。因為圖片大小>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>

接下來用一張圖片來解釋一下整體快取思路。

wechat_cache.png