uniapp手机端图片缓存方案

思路：定义缓存图片key值规则，每次加载网络图片时，首先根据key获取本地存储的数据，查询是否有对应文件路径，如果有缓存内容，直接返回本地图片路径去渲染显示，若没有缓存数据，就用图片网络路径去下载并保存到本地

定义获取缓存图片的全局js函数

/** @description 获取文件的缓存路径，如果文件未缓存，则直接返回网络路径，并下载缓存* @method getImageCache* @param {String} filePath 完整的图片下载路径，如果没有从缓存中获取到，则用这个路径去下载* @param {String} fileMd5 文件md5，必须唯一* @return {Object} promise对象
*/const getImageCache = function(filePath, fileMd5) {// 图片缓存key值let storageKey = 'IMAGE_CACHE_INFO_' + fileMd5// 首先获取本地存储的数据，查询是否有对应文件路径，如果有缓存内容，直接返回const cacheFileInfo = uni.getStorageSync(storageKey)if (cacheFileInfo) {console.log("已缓存为：" + cacheFileInfo)return cacheFileInfo} else {console.log("未缓存,进行下载保存")// 如果没有，执行下载，并存储起来后uni.downloadFile({url: filePath,success: (res) => {if (res.statusCode === 200) {console.log('下载成功');// 再进行本地保存uni.saveFile({tempFilePath: res.tempFilePath,success: function (res2) {console.log(res2.savedFilePath)uni.setStorageSync(storageKey, res2.savedFilePath)return res2.savedFilePath},fail: function (res2) {return filePath}})} else {console.log('下载临时文件失败')return filePath}},fail: (res) => {console.log(res)return filePath}})}
}

2.封装一个加载缓存图片的组件

<template><view class="wrap"><image :src="src" :style="{width: width,height:height,borderRadius:radius}"></image></view>
</template><script>export default {props: {url: {type: String,default(){return ''}},fileMd5: {type: String,default(){return ''}},width: {type: String,default(){return '';}},height: {type: String,default(){return '';}},radius: {type: String,default(){return '';}}},data() {return {src: '' // 图片地址}},watch: {// 监听头像md5值的变化fileMd5(val) { // 查找获取图片缓存this.getImageCache()}},created() {// 查找获取图片缓存this.getImageCache()},methods: {// 查找获取图片缓存async getImageCache() { // #ifdef APP-PLUSvar result = await this.$util.getImageCache(this.url, this.fileMd5)if (result) {this.src = result} else {this.src = this.url}// #endif// #ifndef APP-PLUSthis.src = this.url// #endif}}}
</script><style scoped lang="scss">.wrap {}
</style>

3.调用
正确引入组件后

<cache-image v-if="avatarMd5" :url="avatar" :fileMd5="avatarMd5" width="140rpx" height="140rpx" radius="100%"></cache-image>

便能实现手机端缓存网络图片功能，每次加载图片根据设定的key去查缓存数据，没有便下载并保存到本地，下次加载就会是直接拿的本地缓存图片的地址

uniapp手机端图片缓存方案相关推荐

php图片自适应手机屏幕,织梦手机端图片自适应设置方法
随着自适应网站使用量日趋上升,很多用户碰到这样的问题,内容里图片在PC端浏览器是正常的,但是用手机打开后会变形.今天我们就来一起解决下织梦手机站图片变形这个问题. 手机端图片变形原因: 由于织梦后台编 ...
手机端图片滑动切换效果
最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环 ...
手写图片缓存框架 ImageLoader
图片缓存是App开发中最常见的,本篇博文给大家带来自己手写的图片缓存框,大致的思路很简单,首先从内存中获取图片,如果内存中没有,就从手机本地进行获取,如果还没有,就从网络访问进行获取. 所以,我们在I ...
自己写的一个类淘宝手机端图片浏览双指缩放的功能
该组件已被弃用如有需求请选择最新组件最新组件previewImage-mobile-地址新组件-仿微信js-sdk wx.previewImage JavaScript实现,支持图片预览,滑动切 ...
uni-app 手机端定位问题
uni-app定位链接主要遇到的问题,app上android无法获取定位信息,ios可以,模拟器上都可以获取定位,H5浏览器中获取定位同样失败做法: uni.getLocation({type: ...
基于uni-app手机端后台管理系统uni-uadmin
Uni-Uadmin 一款uniapp+uviewUI开发的中后台管理系统模板实例. 全新毛玻璃UI视觉uniapp后台管理系统.使用了uni-app+uView-ui+uni-ui等技术开发架构,内 ...
uview中使用_使用uniapp自带的地图_实现地图点选位置功能---基于Vue的uniapp手机端_前端UI_uview工作笔记006
使用uniapp提供的地图功能,不需要导入任何插件. https://uniapp.dcloud.io/component/map 这里也有uniapp地图的,官方说明. <template&g ...
js手机端图片弹出方法
1 $("img").click(function(){ //获取窗口可视大小 2 var width=$(window).width(); 3 var height=$(wind ...
uniapp 手机端时禁止输入框弹出键盘，使用自定义键盘
前言:我是用uniapp写的,有些地方有使用uniapp语法. 源码: <template><view><view class=&

uniapp手机端图片缓存方案

uniapp手机端图片缓存方案

uniapp手机端图片缓存方案相关推荐

最新文章

热门文章