分享一個小程序網絡大圖加載慢的解決方案

用到的相關api

1. getSavedFileList 獲取已保存的文件列表；
2. getStorageSync 獲取本地緩存；
3. downloadFile 下載網絡圖片；
4. saveFile 保存文件到本地；
5. setStorage 將數據儲存到小程序本地緩存；

整體思路如下：

先獲取已保存的本地文件，如果從來沒有保存過，就先下載網絡圖片并保存到本地，同時將文件路勁緩存到小程序，等下次需要的時候直接拿文件路徑去匹配本地文件的路徑，實現圖片秒開的效果；

遺留問題：需要先加載再緩存，初次加載還是會加載比較慢？

代碼實現

uni.getSavedFileList({complete: (res)=> {console.log(res)const cacheImgKey = uni.getStorageSync('cacheImgKey')if(res.fileList.length) {const data = res.fileList.find(item=> item.filePath == cacheImgKey)if(data) {this.imagePath = data.filePathreturn}}// 首次加載等待uni.showLoading({title: '加載中...'})uni.downloadFile({url: '要加載的網絡文件地址',success: ({ tempFilePath })=> {this.imagePath = tempFilePathuni.saveFile({tempFilePath,success: ({ savedFilePath })=> {this.imagePath = savedFilePath},complete: ()=> {uni.hideLoading()uni.setStorage({key: 'cacheImgKey',data: this.imagePath})}})}})}
})

解決遺留的問題，即 初次加載也能達到秒開的效果，如何處理？

解決方案：可在前置頁面預先加載并緩存文件
前置頁面判斷本地緩存，如果沒有可先下載文件保存

const cacheImgKey = uni.getStorageSync('cacheImgKey')
if(!cacheImgKey) {uni.downloadFile({url: '要加載的網絡文件地址',success: ({ tempFilePath })=> {uni.saveFile({tempFilePath,success: ({ savedFilePath })=> {uni.setStorage({key: 'cacheImgKey',data: savedFilePath})}})}})
}

END.

如果覺得有用隨手點個贊吧，謝謝

關注我，不定時分享技術干貨~