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