在開發(fā)項目的過程中肮蛹，微信小程序需要實現(xiàn)網(wǎng)絡(luò)圖片的本地緩存。因為圖片大小>1M,所以用戶每次打開小程序都要重新下載螺垢，由于圖片比較大堤结，下載時間比較久，就容易造成不好的用戶體驗饼问。那么，在小程序里面具體怎么實現(xiàn)圖片的緩存呢，接下來看具體實現(xiàn)代碼邏輯配猫。
剛看到這個需求的時候，我的第一反應(yīng)是通過小程序提供的數(shù)據(jù)緩存api來實現(xiàn)杏死，
wx.setStorageSync(string key, any data)
但是api的限制就是data只能是原生類型泵肄，date，或者可以JSON序列化的對象淑翼。這樣的話就不可能把image當(dāng)成文件來存儲了腐巢。那么，我們怎么實現(xiàn)把image當(dāng)成一個文件來存儲到本地緩存呢?接下來玄括，將介紹如何使用小程序的文件系統(tǒng)來實現(xiàn)圖片的文件緩存冯丙。
// 第一步： 既然要緩存圖片，那么我們要先將圖片下載下來。
// wx.downloadFile 必填參數(shù)url: 圖片的地址胃惜。
//當(dāng)圖片下載成功以后泞莉，會返回給我們一個tempFilePath。臨時的文件路徑
//那么問題來了船殉，這個臨時的文件路徑到底怎么理解呢鲫趁？
//本地臨時文件只能通過調(diào)用特定接口產(chǎn)生，不能直接寫入內(nèi)容利虫。本地臨時文件產(chǎn)生后挨厚，
//僅在當(dāng)前生命周期內(nèi)有效，重啟之后即不可用糠惫。因此疫剃，不可把本地臨時文件路徑存儲起來下次使用
//上面的是微信小程序 文檔對臨時的文件路徑的解釋。
//所以到這一步硼讽， 這個臨時的文件路徑不滿足我們的需求巢价。那么接下來我們怎么利用這個臨時文件路徑實現(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為全局唯一的文件管理器蹄溉。那么文件管理器的作用是什么，我們可以用來做什么呢您炉？
// 文件管理器的作用之一就是可以根據(jù)臨時文件路徑柒爵，通過saveFile把文件保存到本地緩存.
fs.saveFile({
tempFilePath: res.tempFilePath, // 傳入一個臨時文件路徑
success(res) {
console.log('圖片緩存成功', res.savedFilePath) // res.savedFilePath 為一個本地緩存文件路徑
// 此時圖片本地緩存已經(jīng)完成，res.savedFilePath為本地存儲的路徑赚爵。
//小程序的本地文件路徑標(biāo)準(zhǔn)： {{協(xié)議名}}://文件路徑
//協(xié)議名在 iOS/Android 客戶端為 "wxfile"棉胀，在開發(fā)者工具上為 "http"，
//開發(fā)者無需關(guān)注這個差異冀膝，也不應(yīng)在代碼中去硬編碼完整文件路徑唁奢。
//好了，到此為止窝剖，我們已經(jīng)把圖片緩存到本地了麻掸，而且我們也得到了本地緩存的路徑。
// 那么我們把本地緩存的路徑赐纱，通過小程序的數(shù)據(jù)緩存服務(wù)保存下來脊奋。
// 下次打開小程序 首先去緩存中檢查是否存在本地文件的緩存路徑
// 如果有，直接image src賦值本地緩存路徑疙描。
//如果沒有诚隙，則是第一次下載圖片，或者用戶手動清理緩存造成的起胰。
wx.setStorageSync('image_cache', res.savedFilePath)
}
})
}else {
console.log('響應(yīng)失敗', 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
