更新记录

2.0（2020-04-28）

1. 新增delay属性，避免同一时间下资源缓存下载抢夺带宽而对其它资源加载速度的影响

1.0（2020-04-08）

发布图片缓存组件easy-cacheimage 1.0

平台兼容性

图片缓存组件

组件特性

• 支持设置缓存时间
• 支持动态图片，动态使用缓存
• 支持缓存过期后自动清除过期缓存进行新缓存
• H5环境下不支持缓存
• 支持图片加载失败后的加载失败占位图
• 示例提供清除图片缓存方法和调试方法

组件属性

delay属性说明

避免同一时间下资源缓存下载抢夺带宽而对其它资源加载速度的影响

引用示例

实现图片缓存7天

<template>
    <view>
      <easy-cacheimage :image-src="xxxx" :cacheTime="7"></easy-cacheimage>
    </view>
</template>
<script>
    import easyCacheimage from '@/components/easy-cacheimage/easy-cacheimage.vue'
    export default{
        components:{ easyCacheimage },
    }
</script>

调试示例

示例项目 附带清除缓存方法，打印调试信息

<template>
    <view>
        <view class="list">
            <view class="item" v-for="(item,index) of list" :key="index">
                <easy-cacheimage :image-src="item.image" :cache="cache" :cacheTime="0.002"></easy-cacheimage>
                <text>{{item.content}}</text>
            </view>
        </view>
        <view><h2 @click="clearSavedFiles">clearAll</h2><h2 @click="Info">Info</h2></view>
    </view>
</template>
<script>
    const MockData = require('@/static/easy-cacheimage/mock-data.json')
    import easyCacheimage from '@/components/easy-cacheimage/easy-cacheimage.vue'
    export default{
        components:{
            easyCacheimage
        },
        data(){
            return {
                list:MockData.slice(0,1),//建议逐张图片调试方便观察打印信息
                cache:true,//动态缓存调试
            }
        },
        methods:{
            clearCachedImage(){
                // 清除全部缓存图片saveFile
                try {
                    const storage = uni.getStorageInfoSync();
                    const cachedKeys = storage.keys.filter(key => key.includes('cached-image'))
                    cachedKeys.forEach(key=>{
                        const cachedUrl = uni.getStorageSync(key);
                        uni.removeStorageSync(key);
                        uni.removeSavedFile({filePath:cachedUrl}).then(res=>{
                            console.log("res: " + JSON.stringify(res));
                        })
                    })
                } catch (err) {
                    console.log("err: " + JSON.stringify(err));
                }
            },
            async clearSavedFiles(){
                // 清除所有saveFile
                const res = await uni.getSavedFileList()
                const fileList = res[1]&&res[1].fileList;
                if(!fileList.length){
                    uni.showToast({title:'无图片缓存可清',icon:'none'})
                    return
                }
                fileList.forEach((file,index)=>{
                    uni.removeSavedFile({filePath:file.filePath}).then(res=>{
                        console.log("res: " + JSON.stringify(res));
                        if(index == fileList.length-1){
                            uni.showToast({title:'已清除全部图片缓存',icon:'none'})
                        }
                    })
                })
            },
            Info(){
                // 调试查看缓存信息
                const res = uni.getStorageInfoSync();
                console.log("res: " + JSON.stringify(res));
                uni.getSavedFileList().then(res=>{
                    console.log("res: " + JSON.stringify(res));
                })
            }
        },
        onLoad() {
        }
    }
</script>
<style scoped>
    .list{display: flex;justify-content: space-between;flex-wrap: wrap;padding: 32rpx;background: #F1F1F1;}
    .list .item{width: 48%;background: #fff;margin-bottom: 80rpx;border-radius: 20rpx;}
    .list .item image{
        width: 100%;
        height: 500rpx;
    }
</style>

注意

  组件依赖于uni.downloadFile(OBJECT)API获取临时路径，在调用uni.saveFile(OBJECT)进行持久保存。API的平台或者环境差异性决定了插件使用场景的差异性。

更多

  起初是打算把这个缓存功能扩展在我之前开发的图片预加载和懒加载组件上的，后面想了下缓存过后的图片预加载懒加载没意义，而且H5不支持缓存，合并起来耦合度会很大后面就独立了开发这个组件，这个组件非常适用于轮播图、banner图等大图的应用