小程序资源下载、解压、保存到本地及本地文件的使用

小程序对资源存储有限一般10M，不要超过限制
思路解析：将资源保存到本地，首先 需要获取到 本地路径 ，然后将文件下载（下载前需要判断文件是否更新，第一次和更新则需要下载，如果存在之前的资源则将其删除），解压（压缩包需要解压，解压完成将压缩包删除，非压缩包略过）， 保存到本地路径， （可以自行创建本地目录，把资源统一保存在改目录下），页面中使用本地路径中的资源。

小程序中获取用户本地路径 ： wx.env.USER_DATA_PATH      
let fm = wx.getFileSystemManager();    // 文件系统管理器
删除文件夹及文件下的文件使用 fm.rmdir()

下面为整个流程结构代码
一、判断资源是否更新

var isUpdate = '判断资源是否更新的字段';
 if (!isUpdate ) {  // 第一次进入程序
 		wx.setStorageSync('isUpdate', isUpdate );     //
      this.isFile()    //是否创建目录
    } else if (resourcesFileMd5 != newFileMd5) {  //资源更新了
     wx.setStorageSync('isUpdate', isUpdate );
      this.isFile()   
    }else{    // 没有更新，则还是用原来的路径
      var cachePath = '本地路径'
      this.setData({ cachePath: cachePath});
      return;
    }

二、创建本地保存资源的目录
本地目录有了之后，需要判断是否要重新下载资源

var savePath ='需要保存资源的本地目录'
isFile() {
    var that = this;
    fm.access({  //判断目录是否存在
      path: savePath,
      success: function (res) {  //存在
        //存在直接下载文件到该目录
        that.downloadFile()    
      },
      fail: function (err) { //不存在
        fm.mkdir({ //不存在就创建目录
          dirPath: savePath,
          recursive: true,
          success: function (res) {
            that.downloadFile()
          }
        });
      }
    });
  },

三、资源下载
下载前判断是否存在之前的资源，if 存在，则删除再下载

downloadFile() { //下载资源
    var that = this;
    let fileUrl = '下载资源的地址';
    wx.showLoading({
      title: '资源加载中...',
    })
    var unlinkUrl = '需要删除资源的路径'
    this.isUnlink(unlinkUrl);  //删除文件的方法

    wx.downloadFile({
      url: fileUrl,
      filePath: '下载后保存的地址',
      success: function (res) {
        // 压缩包需要解压，非则略过
        that.fileUnzip();  //解压
      },
      fail: function (err) {
        wx.hideLoading();
        wx.showToast({
          title: '下载失败，请稍后重新',
        })
      }
    });
  },

删除文件的方法

isUnlink(unlinkUrl) { //删除文件
    fm.access({  //判断目录是否存在
      path: unlinkUrl,
      success: function (res) {  //存在之前的资源删除重新下载
        fm.rmdir({  //删除目录       删除文件夹及文件下的文件使用rmdir，unlink不能实现改功能
          dirPath: unlinkUrl,
          recursive:true,
          success(res) {
            console.log('旧资源删除成功')
          },
          fail(res) { 
            console.log(res);
          }
        })
      }
    })
  },

四，解压完之后，将资源保存在本地
解压的方法，解压完之后将压缩包删除

  fileUnzip() {  //解压
    var that = this;
    fm.unzip({
      zipFilePath: '需要解压的文件路径',
      targetPath: cashPath,   //解压后保存的地址
      success(res) {
        wx.setStorageSync('cashPath', cashPath)
        that.setData({ cachePath: cashPath});
        
        //解压成功后将压缩包删除
        fm.unlink({
          filePath: orginCachePath + '/' + id +'resource.zip',
          success(res) {
          },
          fail(res) {
            wx.showToast({
              title: '解压失败，请稍后重新',
            })
          }
        })
      }
      complete() {
        wx.hideLoading();
      }
    })
  },

到此，资源下载，解压，保存在本地已经完成，如何使用本地路径下的文件呢？

eg:   cachePath 是你保存在本地的路径地址 ，FileName 改文件下的内容
<image class='bg-pic' mode="widthFix"  src='{{cachePath}}/{{FileName}}'></image>

至此ok