[移动开发]微信小程序做一个文档预览

首先展示效果

图片预览：

视频预览

js页面

1. 首先在data中定义变量

    itemId:null,
    saveTopList:[],//存储顶层文件列表
    folderList:[], //存储当前显示的文件列表
    showLever:[], //存储文件的父文件id
    isTop:true, //是否是顶层

2. 先实现点击文件夹到下层文件去

  getFileDetail(e){
    // debugger
    let that = this;
    let fileId = e.currentTarget.dataset.fileid

    request('/fileNew/findChildFileList',{
      fileId:fileId,
      itemId:app.globalData.itemId,
      pageIndex: 1,
      pageSize: 1000,
    }).then(res=>{
      if(res.data.result){
        // debugger
        if(res.data.result.list.length===0){
          Toast('文件夹为空');
        }else{
          res.data.result.list.map(i=>{
            i.createDate =  tools.dateFormat(i.createDate,'YYYY-MM-DD')
           })
          that.data.showLever.push(fileId);
          that.setData({
            isTop:false,
            folderList:res.data.result.list,
            })
        }
      }
    })

  },

此处要记得把当前点击的文件夹fileId存到showLever数组中去。

3. 实现点击上一级，回到上一层。

goBack(){
    if(this.data.showLever.length<=1){  //判断此层的上一级是否是顶层
      this.data.showLever.pop()
      this.setData({
        isTop:true,
        folderList:this.data.saveTopList,
        })
    }else{
      this.data.showLever.pop()
      let length = this.data.showLever.length-1

      request('/fileNew/findChildFileList',{
        fileId:this.data.showLever[length],
        itemId:app.globalData.itemId,
        pageIndex: 1,
        pageSize: 1000,
      }).then(res=>{
        if(res.data.result.list.length){
          res.data.result.list.map(i=>{
            i.createDate =  tools.dateFormat(i.createDate,'YYYY-MM-DD')
           })
          this.setData({
          isTop:false,
          folderList:res.data.result.list,
          })
        }
      })
    }
  },

4.实现图片、视频以及文档的预览。
实现文件的预览是下载文件资源到本地。调用wx.downloadFile()方法。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB。

  getPreview(e){
    // debugger
    let file = e.currentTarget.dataset.filename
    tools.previewFile(file.fileName,file.fileUrl);
  },

tools.js页面

  //预览文件
    previewFile(fileName,fileUrl){
        let lastIndex = fileName.lastIndexOf('.');
        let extendName = fileName.substring(lastIndex+1,fileName.length);
        if (extendName.includes('mp')) {
            this.previewImageOrMedia(fileUrl,'video')
        } else if (extendName.includes('png') || extendName.includes('jpg')) {
          this.previewImageOrMedia(fileUrl,'image')
        } else {
            console.log('文档')
            this.downLoadFile(fileUrl,extendName)
        }
    },
     //下载文档到本地临时文件中并预览
  downLoadFile(fileUrl,fileExtendName){
     wx.downloadFile({
       url:tools.baseImgUrl()+fileUrl,
       success(res){
         let Path = res.tempFilePath                   
         wx.openDocument({
           fileType:fileExtendName,       
           filePath: Path,                               
           success: function (res) {
             console.log('打开文档成功');
           }
         })

       }
     })
  },

wxml页面

`<button wx:if="{{!isTop}}" bindtap="goBack" class="buttonstyle">上一级</button>   
   <view wx:for="{{folderList}}" wx:for-item="topName" wx:key="fileId">
   <view class="page-content" bindtap="{{topName.fileOrFolder===1?'getFileDetail':'getPreview'}}" data-fileName="{{topName}}" data-fileId="{{topName.fileId}}">
       页面样式.......
    </view>
    <view>`