在開發(fā)項(xiàng)目的過程中，微信小程序需要實(shí)現(xiàn)網(wǎng)絡(luò)圖片的本地緩存。因?yàn)閳D片大小>1M,所以用戶每次打開小程序都要重新下載，由于圖片比較大，下載時(shí)間比較久，就容易造成不好的用戶體驗(yàn)。那么，在小程序里面具體怎么實(shí)現(xiàn)圖片的緩存呢，接下來(lái)看具體實(shí)現(xiàn)代碼邏輯。
剛看到這個(gè)需求的時(shí)候，我的第一反應(yīng)是通過小程序提供的數(shù)據(jù)緩存api來(lái)實(shí)現(xiàn)，

wx.setStorageSync(string key, any data)

但是api的限制就是data只能是原生類型，date，或者可以JSON序列化的對(duì)象。這樣的話就不可能把image當(dāng)成文件來(lái)存儲(chǔ)了。那么，我們?cè)趺磳?shí)現(xiàn)把image當(dāng)成一個(gè)文件來(lái)存儲(chǔ)到本地緩存呢?接下來(lái)，將介紹如何使用小程序的文件系統(tǒng)來(lái)實(shí)現(xiàn)圖片的文件緩存。

// 第一步： 既然要緩存圖片，那么我們要先將圖片下載下來(lái)。
// wx.downloadFile 必填參數(shù)url: 圖片的地址。
//當(dāng)圖片下載成功以后，會(huì)返回給我們一個(gè)tempFilePath。臨時(shí)的文件路徑
//那么問題來(lái)了，這個(gè)臨時(shí)的文件路徑到底怎么理解呢？
//本地臨時(shí)文件只能通過調(diào)用特定接口產(chǎn)生，不能直接寫入內(nèi)容。本地臨時(shí)文件產(chǎn)生后，
//僅在當(dāng)前生命周期內(nèi)有效，重啟之后即不可用。因此，不可把本地臨時(shí)文件路徑存儲(chǔ)起來(lái)下次使用
//上面的是微信小程序 文檔對(duì)臨時(shí)的文件路徑的解釋。
//所以到這一步， 這個(gè)臨時(shí)的文件路徑不滿足我們的需求。那么接下來(lái)我們?cè)趺蠢眠@個(gè)臨時(shí)文件路徑實(shí)現(xiàn)本地緩存呢？
wx.downloadFile({
      url: 'xxxxxxx',
      success: function(res) {
        if (res.statusCode === 200) {
          console.log('圖片下載成功' + res.tempFilePath)
          // 第二步: 使用小程序的文件系統(tǒng)，通過小程序的api獲取到全局唯一的文件管理器
          const fs = wx.getFileSystemManager()
          //  fs為全局唯一的文件管理器。那么文件管理器的作用是什么，我們可以用來(lái)做什么呢？
         //   文件管理器的作用之一就是可以根據(jù)臨時(shí)文件路徑，通過saveFile把文件保存到本地緩存.
          fs.saveFile({
            tempFilePath: res.tempFilePath, // 傳入一個(gè)臨時(shí)文件路徑
            success(res) {
              console.log('圖片緩存成功', res.savedFilePath) // res.savedFilePath 為一個(gè)本地緩存文件路徑  
              // 此時(shí)圖片本地緩存已經(jīng)完成，res.savedFilePath為本地存儲(chǔ)的路徑。
              //小程序的本地文件路徑標(biāo)準(zhǔn)： {{協(xié)議名}}://文件路徑
              //協(xié)議名在 iOS/Android 客戶端為 "wxfile"，在開發(fā)者工具上為 "http"，
              //開發(fā)者無(wú)需關(guān)注這個(gè)差異，也不應(yīng)在代碼中去硬編碼完整文件路徑。
              //好了，到此為止，我們已經(jīng)把圖片緩存到本地了，而且我們也得到了本地緩存的路徑。
              // 那么我們把本地緩存的路徑，通過小程序的數(shù)據(jù)緩存服務(wù)保存下來(lái)。
              // 下次打開小程序 首先去緩存中檢查是否存在本地文件的緩存路徑
              // 如果有，直接image src賦值本地緩存路徑。
              //如果沒有，則是第一次下載圖片，或者用戶手動(dòng)清理緩存造成的。
              wx.setStorageSync('image_cache', res.savedFilePath)
            }
          })
        }else {
          console.log('響應(yīng)失敗', res.statusCode)
        }
      }

下面代碼是使用緩存給Image賦值的簡(jiǎn)短邏輯

/// 重新啟動(dòng)小程序，去緩存中獲取圖片的緩存地址。 然后給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>

接下來(lái)用一張圖片來(lái)解釋一下整體緩存思路。

wechat_cache.png