一个好的 app 应该有缓存机制，尤其是网络图片，例如头像之类的。如果没有的话每次页面都要从网络加载，鉴于目前服务器的小水管带宽有限。于是还是加了个缓存功能（闺蜜圈安卓新版本已经加入缓存功能）。
当然，代码还是抄来的，不过稍微改了一下：
const img = {
cachingImage: function(filePath) {
// #ifdef APP-PLUS
const cacheIamge = uni.getStorageSync(filePath) //查看缓存是否有图片资源，没有则下载
if (cacheIamge) {
console.log("已缓存为：" + cacheIamge)
return cacheIamge
// return;
} else { //未缓存,进行下载保存
uni.downloadFile({
url: filePath,
success: (res) => {
if (res.statusCode === 200) { //下载成功
// 再进行本地保存
uni.saveFile({
tempFilePath: res.tempFilePath,
success: function(result) {
uni.setStorageSync(filePath, result.savedFilePath)
},
fail: function(erro) {
// console.log('保存失败')
}
})
} else {
// console.log('下载临时文件失败')
}
},
fail: (res) => {
// console.log('下载临时文件失败fail')
}
})
return filePath
}
// #endif
// #ifndef APP-PLUS
return filePath
// #endif
},
showImage: function(imageUrl) {
const url = uni.getStorageSync(imageUrl)
return url
},
}
export default img;
使用的时候直接用cachingImage方法即可，如果没有缓存返回的是 url 路径，如果已经缓存返回的是本地文件路径。
参考链接：https://blog.csdn.net/matchaa__/article/details/132860057
23 comments
厉害
你的 cdn 还没套好啊？
没有呢
赞
我以为图片缓存是系统自动实现的呢
并没有，搜了下发现也有一些插件，但是需要替换 image 标签，就抄了个代码，改了改。
我以为调用了 webview 类似的，然后自动调用浏览器缓存
h5是可以的，基于服务器的缓存策略，但是 app 并不会缓存，需要自己去缓存文件。不然就会每次都从服务器加载。
所以这个缓存使用宏定义包裹了一下，仅对 app 生效
出现了！面相csdn编程
说实话，真不爱看 csdn 的文章，不是针对作者，这个破网站现在是真烂。
确实是这样
这个是小程序嘛
跨平台，支持小程序~~不过这个优化是针对app的。
要不要科普下封装，想学
主要是我代码也是现抄的，哈哈哈。封装不了啊~~
细节满满。
追求极致体验，哈哈哈
确实app内图片要缓存，真为我们用户的流量操心哈
其实流量还好，就是个头像也没多大，但是每次都下载，主要是加载速度有点慢。
项目还是要有缓存功能的，不然每次打开速度都会很慢。
是哒，缓存功能有和没有差别还是比较大的。