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

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=thiswx.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:'下载失败',})}
})