微信小程序FileSystemManager保存文件到本地并读取

微信小程序API中有一个 wx.getFileSystemManager() 的API，它返回一个文件管理器对象
写法：

const FileSystemManager = wx.getFileSystemManager()

这个里面包含文件读取，写入，删除等各种操作方式。
我遇到的项目需求是下载文件到本地，并读取文件里面的内容供JS使用，每次进入页面要动态比较文件MD5，根据MD5值判断是否下载有更新的文件。
1、请求文件的MD5

 getMd5 () {//验证MD5
    let _this = this;
    wx.request(app.loadDataToken({
      url: app.globalData.newUrl + '/Api/Update/List/',
      success(res) {
        if (res.statusCode == 200 && res.data) {
          //判断MD5是否一致
          _this.testMd5(res.data);
        }
      }
    }))
  },

2、验证MD5是否一致

async testMd5(arr) {//验证每个文件的MD5
    for(let i=0;i<arr.length;i++){
      for (let j = 0; j < arr[i].List.length; j++) {
        let res = await this.getFileInfo(arr[i].List[j])
      }
    }
  },
  getFileInfo(obj) {//获取本地文件的MD5，然后做比较
    let _this = this;
    return new Promise((resolve,reject) => {
      wx.getFileInfo({
        filePath: wx.env.USER_DATA_PATH + "/" + obj.NAME,
        success(resInfo) {
          if (obj.MD5 != resInfo.digest) {
            _this.downFile(obj.GUID, obj.NAME).then((res) => {
              resolve()
            }).catch((err) => {
              reject()
            });
          }
        },
        fail() {
          _this.downFile(obj.GUID, obj.NAME).then((res) => {
            resolve()
          }).catch((err) => {
            reject()
          });
        }
      })
    })
  }

3、下载更新的文件

downFile(guid,fileName) {//下载文件
    let _this = this;
    const FileSystemManager = wx.getFileSystemManager()
    return new Promise((resolve,reject) => {
      wx.downloadFile({
        url: app.globalData.newUrl + '/Api/Update/Item/' + app.globalData.token + "/?guid=" + guid, // 
        success(res) {
          if (res.statusCode === 200) {
            FileSystemManager.saveFile({//下载成功后保存到本地
              tempFilePath: res.tempFilePath,
              filePath: wx.env.USER_DATA_PATH + "/" + fileName,
              success(res2) {
                if (res2.errMsg == 'saveFile:ok') {
                  resolve()
                }else{
                  reject()
                }
              },
              fail() {
                reject()
              }
            })
          }else{
            reject()
          }
        },
        fail(){
          reject()
        }
      })
    })
  }

4、读取文件方法，这里我是封装好的方法

const loadFiles = (fileName) => { //加载本地文件存储数据
  return new Promise((resolve, reject) => {
    const FileSystemManager = wx.getFileSystemManager()
    FileSystemManager.readFile({ //读文件
      filePath: wx.env.USER_DATA_PATH + "/" + fileName,
      encoding: 'utf8',
      success(res) {
        if (res.data) {
          let obj = JSON.parse(res.data);
          resolve(obj)
        }
      },
      fail(err) {
        console.log('读取失败', err)
        reject(err)
      }
    })
  })
}

5、页面使用读取文件方法，这里onLoad使用了异步函数，因为createmultiArray方法要等拿到文件数据才能执行。

let { loadFiles } = require("../../../../utils/util.js");
const regeneratorRuntime = require('../../../../utils/regenerator/runtime-module');

Page({
  async onLoad(options) {
    await loadFiles('DamAreaMore.Json').then((addData) => {
      address = addData
    }).catch((err) => {
      console.log("加载失败")
    })
    this.createmultiArray(this.data.multiIndex[0], this.data.multiIndex[1], this.data.multiIndex[2], -1);
  },
})

总结：里面用到我async异步处理函数，有不懂得可以看我的另外一篇文章：https://www.jianshu.com/p/32b0afc88f22。这些代码片段整个流程还是很全的，只是个人前端功力还不够，知道代码还不够简洁，如有大神看到还请指点。

TIM图片20190419170157.jpg