当前位置: 主页 > 建站知识 > APP开发

小程序本地存储-画图程序不能存储

发布时间:2023-03-22 07:26   浏览次数:次   作者:佚名

处理思路很简单,判断该图片缓存过,若已缓存过、从storage中取出,没有的话、下载并缓存。

废话不多说,上代码。已封好成组件啦!各位小主放心食用~

画图程序不能存储_小程序本地存储_酷派d530,程序内存,存储内存

let getImageCache =( key,url ) =>{
    return new Promise((resolve,reject) => {
        const path = wx.getStorageSync ( key )
        if ( path ) {
            resolve ( path )
        } else {
            wx.downloadFile ( {
                url : url,
                success : function ( res ) {
                    if ( res.statusCode === 200 ) {
                        // console.log ( '图片下载成功')
                        const fs = wx.getFileSystemManager ()
                        fs.saveFile ( {
                            tempFilePath : res.tempFilePath,
                            success ( res ) {
                                // console.log ( '图片缓存成功')
                                wx.setStorageSync ( key, res.savedFilePath )
                                resolve( res.savedFilePath)
                            }
                        } )
                    } else {
                        reject( res.statusCode)
                    }
                }
            } )
        }
    })
}
module.exports = {
    getImageCache
}

画图程序不能存储_小程序本地存储_酷派d530,程序内存,存储内存

把上面的代码放在一个js里扔进工具库里就可以了~我取名是imageCache.js

画图程序不能存储_酷派d530,程序内存,存储内存_小程序本地存储

接下来是无脑使用说明

酷派d530,程序内存,存储内存_画图程序不能存储_小程序本地存储

Step1:引入小程序本地存储,后面路径根据自己的文件路径改一下

酷派d530,程序内存,存储内存_小程序本地存储_画图程序不能存储

import { getImageCache } from '../../utils/imageCache.js'

Step2:使用,getImageCache ()需要传两个参数小程序本地存储,一个是存在storage里的key值,一个是value值(也就是要缓存的网络图片路径)res返回的是缓存在小程序的路径。

getImageCache ( 'image_defaultUserImg',
          'https://wport.oss-cn-beijing.aliyuncs.com/67643bc9fac7821fca354c73c1e81659.png?x-oss-process=image/resize,w_500' ).then(res=>{
              this.setData ( {
                defaultUserImg: res
            })
      })