小程序文档预览、文件缓存

一、技术摘要文件下载（wx.downloadFile）文档预览（wx.openDocument）文件本地存储（wx.saveFile）获取本地存储的文件（wx.getSavedFileList）文档分享（ios暂不支持，Android需要借助第三方文档工具）二、文件下载使用文件下载功能需要先在微信后台进行下载域名配置，具体操作请移步官方文档，下载文件时，需要调用wx.downloadFile()方法,其中的两个参数最为重要API wx.downloadFile()url->文件存放的服务器地址filePath->文件存放的本地地址（默认是存储到本地临时文件,离开即会删除）三、文档预览官方目前支持大部分格式的文档预览，包括常用的PDF，Word，PPT，（Excel目前暂不支持）API wx.openDocument()filePath->文件路径（本地和下载得到的临时路径都可以）fileType->（当前文件的类型）四、文件存储文件存储分为临时存储和本地存储，其中最大的区别就是文件分别存在的周期长短，但是需要注意的是用户如果删除当前小程序，那么对应的文件也会被删除，（文件存储不管是临时还是本地存储，文件大小总共不能超过10M，一旦超过，再次调用相关API，会一直走fail错误回调方法）tempFilePath->存储的路径（返回本地的存储路径，请注意此时返回的是一个数组列表，包含了文件的大小、文件路径、文件存储的初始时间）对于Android文件下载之后文件后缀变为unknown的解决办法是在地址后面拼接一个对应文档后缀名https://google.com?fileType=.pdf（地址是乱写的哈，主要用于展示）https://google.com?fileType=.word（地址是乱写的哈，主要用于展示）五、获取本地存储的文件当文件保存到了本地，那么在下次进入就需要进行文件列表的获取，此时获取文件分两种状态获取指定的某一个单独的文件详细信息（wx.getSavedFileInfo）* 需要传入访问的文件路径* 返回的结果是包含当前文件的存储时间和大小获取本地缓存的所有文件信息（wx.getSavedFileList）* 不需要传递参数* 返回的结果是当前本次存储的所有文件（文件大小、路径、时间）六、文档分享通过实践操作，发现在打开文档的窗口下只有Android可以进行当前文档的分享（Android默认打开的页面是通过QQ浏览器进行预览的），但是分享出去之后，发现文件缺失了对应的后缀，导致被分享人打开不了文档的问题，暂时解决方法文件分享之后,接受文档的用户手动添加后缀名通过第三方文件（wps）打开进行分享对于ios不能打开的问题，目前官方是不支持，具体可以访问下面链接进行查看https://developers.weixin.qq.com/community/develop/doc/000e2c2b37c940261a47032e758c00七、code//wxml<view class=’downloadView’>  <block wx:for=”{{storeFile}}” wx:key=”*this”>    <view class=’itemsView’ data-info=”{{storeFile[index]}}” bindtap=’openStoreFile’>打开本地缓存的第{{index+1}}个文件</view>  </block>  <!– 下载文件 –>  <button data-type=’0′ bindtap=’fileDownload’>临时文件下载并打开</button>  <button data-type=’1′ bindtap=’fileDownload’>存储文件下载</button></view>//wxss.downloadView{  width:100%;}.itemsView{  line-height:60rpx;  font-size:26rpx;  margin-bottom:10rpx;  border-bottom:1rpx solid #ccc;}button{  border-bottom:1rpx solid red;  border-radius:0;}//jsPage({  data: {    storeFile: null,  },  onShow: function () {    let that = this;    wx.getSavedFileList({      success(res) {        that.setData({          storeFile: res.fileList        })        console.log(that.data.storeFile)        console.log(‘本地缓存文件获取成功’,res)      },      fail(error) {        console.log(‘本地缓存文件获取失败’, error);      }    })  },  // 文件下载  fileDownload: function (e) {    let type = e.currentTarget.dataset.type;    if (type == 0) {      this.download(0);    } else {      this.download(1);    }  },  // 文件下载  download:function(val){    let that = this;    let filePath = ”;    that.showLoad();    //下载    wx.downloadFile({      url: ‘下载地址’,      filePath: filePath,      success(res) {        that.showLoadHid();        filePath = res.tempFilePath        console.log(‘临时文件地址’, filePath)        if(val==0){//临时存储并打开          that.fileOpen(filePath)        }else{//存储本地          wx.saveFile({            tempFilePath: res.tempFilePath,            success(res) {              that.data.storeFile.push(res.tempFilePaths);              that.setData({                storeFile: that.data.storeFile              })              console.log(that.data.storeFile)              console.log(‘文件存储成功’);            },            fail(error) {              console.log(‘本地文件存储失败’);            }          })        }      },      fail(error) {        that.showLoadHid();        console.log(‘文件下载失败’, error)      }    })  },  // 本地文档打开  openStoreFile:function(e){    let info = e.currentTarget.dataset.info;    console.log(info);    this.fileOpen(info.filePath);  },  // 打开文档  fileOpen:function(val){    wx.openDocument({      filePath: val,      fileType: ‘pdf’,      success(res){        console.log(‘打开文件成功’);      },      fail(error){        console.log(‘文件打开失败’);      }    })  },  showLoad:function(){    wx.showLoading({      title: ‘文件下载中’,      mask:true,    })  },  showLoadHid:function(){    wx.hideLoading();  }})小程序