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

一、技术摘要

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

//js
Page({
  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();
  }
})

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

猜你喜欢