微信小程序优化体验之实现本地图片存储

在微信小程序开发中，体验评分总是上不来？手把手教你优化。

问题一 : 存在网络图片资源未开启HTTP缓存控制。
开启HTTP缓存控制后，下一次加载同样的图片，会直接从缓存中读取，提升加载速度。

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

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

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
}

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

接下来是无脑使用说明
Step1：引入，后面路径根据自己的文件路径改一下

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
            })
      })