微信小程序实现文件的预览

1，最简单的直接使用<web-view src='网络文件地址'><web-view>文件如果有在线地址，直接用web，但是要在小程序的管理平台中增加文件地址到业务域名当中

2、使用微信本身自带方法

图片预览

wx.previewImage({

  urls:[this.data.ossPath+file.ossid],//图片地址
  success: function(res) {
    console.log('预览成功');
  },
  fail: function(err) {
    console.error('预览失败:', err);
  }
})

视频预览：

方法一、使用微信本身自带的视频预览方式，

  wx.previewMedia({
   current: FILE_URL+res.data.storePath,
  sources: [{url:FILE_URL+res.data.storePath,type:'video'}],
  success: function(res) {
   // 预览成功后的回调
    console.log('预览成功');
   },
  fail: function(err) {
    // 预览失败后的回调
   console.error('预览失败', err);
  }
 });

但是有时候会出现视频无法预览，打开失败，想着是不是地址问题，文件打开不来，所以想着吧文件临时下来下来，用临时地址打开

下载文件方法入下：

 //下载文件
  dowlon(e,ossid){
    let that=this
     wx.downloadFile({
  // 文件地址
  url: that.data.ossPath+ossid,
  success: function (res) {
    console.log('下载成功！获取到临时地址',res.tempFilePath)
  },
  fail: function(err) {
   console.log('下载失败',err)
  }
})
  },

这时候可以用获取到的临时地址预览视频，但是会发现，还是有一部分的视频不能正常打开，预览状态是成功，但是提示视频打开失败，黑屏，这时候可以用方法二，就是用临时地址，然后调用打开手机文件，这样也可以实现预览的功能

  wx.openDocument({
      filePath: file.fileurl,//文件的临时地址
      success: function (res) {
         console.log("打开文档成功");
      },
    });

方法三、用video的方式实现预览功能

<video src="{{showeurl}}" style='width: 100%;height: 100vh;' id='myVideo' autoplay="false"  enable-play-gesture="true"	enable-progress-gesture="true" 	object-fit="contain"></video> 

mp3

  this.innerAudioContext = wx.createInnerAudioContext()
      this.innerAudioContext.autoplay = true //是否自动播放
      this.innerAudioContext.src =path//mp3播放地址
      console.log(path,'mp3地址')
      this.innerAudioContext.onPlay(() => {//绑定开始播放的函数
        console.log('开始播放')
        this.setData({
          mp3isplay:true,//控制是否是播放
          isshowMp3:true,//控制是否展示自定义mp3播放界面
        })
      })
      this.innerAudioContext.onEnded(() => {
        console.log('开始播放')
        this.setData({
          isshowMp3:false,
        })
      })
      this.innerAudioContext.onError((res) => {
        console.log('音频播放失败',res)
      })

但是这个没有界面，直接音乐就在后台打开，得要界面上自己写一个简易的暂停开始的功能

离开界面一定要记得把事件释放掉，不然会在后台一直播放，还会引起内存泄露

if(this.innerAudioContext){
      this.innerAudioContext.destroy()
     }

还有一个就是使用微信自带的audio组件，

另外的文档，doc，ppt，txt，execl等文件

1、下载文件后，调用界面并且打开打开新界面文件，

 wx.downloadFile({
  url: 文件地址,
  success: function (res) {
  wx.openDocument({
    filePath:res.tempFilePath,
    showMenu: true,
    success: function (res) {
      console.log('打开文档成功')
      this.setData({loading:false})
    }
  })

  },
  fail: function(err) {
    that.setData({fail:true,loading:false,text:'下载失败',})

  }
})