当前位置: 首页 > article >正文

小程序网络大文件缓存方案

分享一个小程序网络大图加载慢的解决方案

用到的相关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.filePath
				return
			}
		}

		// 首次加载等待
		uni.showLoading({
			title: '加载中...'
		})
		uni.downloadFile({
			url: '要加载的网络文件地址',
			success: ({ tempFilePath })=> {
				this.imagePath = tempFilePath
				uni.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.

如果觉得有用随手点个赞吧,谢谢

关注我,不定时分享技术干货~


http://www.kler.cn/a/588914.html

相关文章:

  • Qt MainWindow简单例子(文本编辑)
  • k8s 修改节点驱逐阈值
  • 笔记:基于springboot+ShardingSphere-jdbc5.0.0的分库分表(偏yml配置)
  • 考研系列-408真题计算机网络篇(18-23)
  • JSON 语法详解
  • 用Embassy库编写的自动化下载程序
  • C++28--特殊类设计
  • 汽车零部件行业研发管理体系化建设:全星研发管理 APQP 软件系统来助力
  • 扩散模型DDPM
  • 全国医院数据可视化分析系统
  • 以 ArcGIS Pro 为笔,绘就水墨地图画卷
  • C/C++实现工厂模板设计模式(Factory Pattern)
  • 如何配置 Docker 以实现无需 sudo 使用
  • 《解锁 Lodash:简化复杂逻辑的实战技巧》​
  • 浏览器对一个资源设置了缓存,如何清除缓存,且后续请求不命中缓存
  • 深入浅出TCP与UDP:三次握手、四次挥手及面试通关指南
  • 哈尔滨算力服务器托管推荐-青蛙云
  • 运行Clip多模态模型报错:OSError: Can‘t load tokenizer for ‘bert-base-chinese‘
  • Spring Cloud Eureka - 高可用服务注册与发现解决方案
  • 在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法