思路

uni-app的Storage在不同端的实现不同:

  • H5端为localStorage,浏览器限制5M大小,是缓存概念,可能会被清理
  • App端为原生的plus.storage,无大小限制,不是缓存,是持久化的
  • 各个小程序端为其自带的storage api,数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。
  • 微信小程序单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
  • 支付宝小程序单条数据转换成字符串后,字符串长度最大200*1024。同一个支付宝用户,同一个小程序缓存总上限为10MB。
  • 百度、字节跳动小程序文档未说明大小限制

当前项目主要用于app端, 所以整体思路以app为主。没有大小的限制,而且是持久化。脑海中立马浮现一个想法。使用 uni.setStorage , 以key 作为图片的原地址, data 作为图片缓存到本地后的地址。

代码

当前发布的插件(app-image)也是以此想法所实现的。源码:https://github.com/ymzcode/app-image 其中主要实现代码如下。

        // 对图片进行缓存的方法
        catchImg() {
            let _self = this;
            let imgSrc = this.src; // 拿到图片的原地址
            try {
                // 异步方法
                uni.saveFile({
                    tempFilePath: this.imgInfo.path
                })
                    .then(data => {
                        // console.log(data);
                        //data为一个数组,数组第一项为错误信息,第二项为返回数据
                        let [saveFile_error, saveFile_res] = data;
                        // console.log(data, error, res);
                        if (saveFile_error) {
                            console.error(`保存 下载图片: ${downloadFile_res.tempFilePath}, 错误信息:`, saveFile_error);
                            return;
                        }
                        if (saveFile_res) {
                            let imgObj = Object.assign({}, _self.imgInfo);
                            imgObj.path = saveFile_res.savedFilePath;
                            _self.saveImgStorage(_self.src, imgObj);
                            // console.log('图片更换为本地地址');
                            _self.compSrc = saveFile_res.savedFilePath;
                            return saveFile_res.savedFilePath;
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    });
            } catch (e) {
                // error
                console.error('error 缓存图片时遇到问题', e);
            }
        }

        // 保存图片的方法
        saveImgStorage(key, value) {
            uni.setStorage({
                key: key,
                data: value
            })
                .then(data => {
                    // console.log(data);
                })
                .catch(err => {
                    console.error(err);
                });
        }
最后修改:2020 年 11 月 23 日 06 : 12 PM
生活需要一些仪式感,比如手冲一杯咖啡:)