思路:
最近遇到项目图片很多导致加载数据很慢,所以想到了缓存图片到本地,然后直接加载本地的图片。具体思路大概就是首先加载本地图片,如果本地图片不存在image组件会调用error事件,error事件中处理两件事。
1. 把路径修改为服务器地址的路径
2. 将图片保存到本地
讲解之前需要了解一下后台返回的图片地址,如图所示。这里我都是直接修改的返回后的Attachment属性,马赛克部分实际就是你的服务器地址。最主要的就是多张图片的路径使用了逗号隔开。三种路径的文件名(形如 2781c620-af5e-4293-b73d-f254e989b9f2.jpg)是不会改变的,所以就根据这个找到对应的图片。
获取并将图片修改为本地图片路径
每次获取后台数据时就会调用getLocalPath方法。list是后台返回的数组对象(包括图片路径)
this.getLocalPath(list, this.fixPath)
如下时getLocalPath和fixPath的方法
// 获取本地图片地址, 使用callback的原因传递data
// requestFileSystem方法可去HTML5查询
getLocalPath(list, callback) {
plus.io.requestFileSystem(plus.io.PUBLIC_DOWNLOADS, (fs) => {
// 在外部定义变量获取fullPath属性无法成功,所以需要使用回调函数
fs.root.createReader().readEntries((entries) => {
let data = [];
for (var i = 0; i < entries.length; i++) {
data.push(entries[i].fullPath);
}
callback && callback(data, list)
});
})
},
fixPath(data, list) {
list.forEach(item => {
let arr = item.Attachment.split(',')
// 因为项目需要我都只是将返回的图片数组的首个图片改为本地路径
let pathArr = arr[0].split('/')
// filename就是文件名(形如 2781c620-af5e-4293-b73d-f254e989b9f2.jpg)
let filename = pathArr[pathArr.length - 1]
let filePath = data.find(path => path.includes(filename))
filePath && arr[0] = 'file://' + filePath
item.Attachment = arr.join(',')
})
},
网络路径和图片缓存
image组件未加载出来图片(此时的图片路径实际已经被修改成本地路径),调用error事件,代码如下:
imageError(item, httpUrl) {
// httpUrl其实就是服务器的主机名(形如 http://198.168.1.1/)。
let arr = item.Attachment.split(',')
// 防止轮播图原因触发四次,这个可以忽略
if (arr[0].includes(httpUrl)) return
// 修改第一张图片路径为服务器地址(实际就是加上httpUrl)
arr[0] = httpUrl + arr[0]
// 调用set方式让Attachment属性实现响应式
this.$set(item, 'Attachment', arr.join(','))
// #ifdef APP-PLUS
// 直接下载图片到本地,具体可以查看HTML5+的文档
plus.downloader.createDownload(item.Attachment.split(',')[0], {}, (d, status) => {
status != 200 && console.log('error')
}).start()
// #endif
最后,自己也是边学边做,初入职场的小菜鸡一枚,所以可能会有很多问题。希望指正。