Applet document preview, file cache

I. Technical Summary

• Download (wx.downloadFile)
• Document Preview (wx.openDocument)
• Files stored locally (wx.saveFile)
• Obtain locally stored files (wx.getSavedFileList)
• Document Sharing (ios not support, Android need to use third-party documentation tool)

Second, file download

Download the file using the download function need to be configured in the domain of micro letter backstage, the specific operation of the venue and official documents, download files, you need to call wx.downloadFile () method, in which the two most important parameters

• API wx.downloadFile()
• url-> file storage server address
• filePath-> local address file is stored (default is stored in a local temporary file is deleted to leave)
  

Third, the document preview

The official document preview currently supports most formats, including the popular PDF, Word, PPT, (Excel currently not supported)

• API wx.openDocument()
• filePath-> file path (path of the local temporary and can be obtained by downloading)
• fileType -> (current type of file)

Fourth, file storage

File storage into temporary storage and local storage, the biggest difference is the length of the files are present cycle, but should be noted that if the user deletes the current applet, the corresponding file will be deleted (file storage, whether temporary or local storage, the file size can not exceed a total of 10M, more than once, again call the relevant API, will always fail to go wrong callback method)

• tempFilePath-> stored path (return path to the local storage, note that at this time the return is an array list that contains the file size, the initial time the file path, file storage)

After the file is downloaded to the Android file suffix becomes unknown solution is to address a corresponding document behind splicing extension
https://google.com?fileType=.pdf (address scrawl Kazakhstan, mainly for show)
https://google.com?fileType=.word (address scrawl Kazakhstan, mainly for show)

V. acquired locally stored files
when saved to a local file, then the next time you need to get into the file list, then get file two states

• Get one single file details specify (wx.getSavedFileInfo)
  * require incoming access the file path
  * contains the result returned is the storage time and the size of the current file
• Get all the locally cached file information (wx.getSavedFileList)
  * need to pass parameters
  * returns the current result of this all of the files stored in the (file size, route, time)

Sixth, document sharing

Through hands-on, open the document found in the windowAndroid can only share the current document(Android default page that opens is a preview by QQ browser), but after sharing out and found the missing file corresponding suffix, resulting in the share of people can not open the document the problem,
workarounds

• After the file-sharing users to manually accept the document name suffix
• Open the file sharing through a third party (wps)

For ios can not open the issue, the official is not supported, you can visit the following link specific view
https://developers.weixin.qq.com/community/develop/doc/000e2c2b37c940261a47032e758c00

Seven, 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();
  }
})