小程序文档预览、文件缓存-即速应用

一、技术摘要

文件下载（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();  }})

小程序