使用uniapp开发商城小程序，首页图片加载都是通过后台接口，如果网络不好，首页会出现空白或者加载失败现象，影响用户体验和正常使用。
思路：
1、使用本地缓存存储图片路径。
2、页面加载时，从接口获取新的图片路径，然后再跟本地存储的缓存路径进行对比，如果有变化就替换，反之使用缓存路径（首次加载需要把图片下载到本地）。
代码：
1、对象对比
diffObject(obj1, obj2) {
let o1 = obj1 instanceof Object;
let o2 = obj2 instanceof Object;
// 判断是不是对象
if (!o1 || !o2) {
return obj1 === obj2;
}
if (Object.keys(obj1).length !== Object.keys(obj2).length) {
return false;
}
for (let o in obj1) {
// 遍历对象 fon in 循环 o 为 对象的属性名
let t1 = obj1[o] instanceof Object;
let t2 = obj2[o] instanceof Object;
if (t1 && t2) {
return this.diffObject(obj1[o], obj2[o]);
} else if (obj1[o] !== obj2[o]) {
// console.log('false')
return false;
}
}
return true;
},
2、文件下载
fDownLoadFileIos(url, sign) {
uni.downloadFile({
url: url,
success: (res) => {
if (res.statusCode === 200) {
// console.log('下载成功', res);
// console.log(res.tempFilePath);
uni.saveFile({
tempFilePath: res.tempFilePath,
success: (res) => {
// console.log('保存成功', res);
const savedFilePath = res.savedFilePath;
if (sign === 'topBanner') {
// console.log('下载。。。。。');
// console.log(savedFilePath);
// uni.showModal({
// title:'下载。。。'
// })
this.topBanner = savedFilePath;
uni.setStorageSync('top_banner_down', savedFilePath)
}
}
});
}
},
fail: (res) => {
console.log(res)
// return filePath
}
});
},
3、核心代码
const topBannerUrl = 后台接口图片路径
const topBannerUrlCache = uni.getStorageSync('top_banner_url') // 缓存图片路径
if (uni.getStorageSync('top_banner_down')) {
// console.log('有banner.....');
uni.getSavedFileList({
success: (res) => {
let hasBanner = false;
for (let i = 0; i < res.fileList.length; i++) {
if (uni.getStorageSync('top_banner_down') === res.fileList[i]
.filePath) {
hasBanner = true;
break;
} else {
hasBanner = false;
}
}
if (hasBanner) {
// 本地存在banner
if (topBannerUrl !== topBannerUrlCache) {
// 文件有变化
// 保存变化的远程URL
uni.setStorageSync('top_banner_url', topBannerUrl)
// 下载图片到手机
this.fDownLoadFileIos(imgPath, 'topBanner')
} else {
this.topBanner = uni.getStorageSync('top_banner_down')
}
} else {
// 下载图片到手机
this.fDownLoadFileIos(imgPath, 'topBanner')
}
}
});
} else {
// 下载图片到手机
this.fDownLoadFileIos(imgPath, 'topBanner')
}