一、技术摘要
- 文件下载(wx.downloadFile)
- 文档预览(wx.openDocument)
- 文件本地存储(wx.saveFile)
- 获取本地存储的文件(wx.getSavedFileList)
- 文档分享(ios暂不支持,Android需要借助第三方文档工具)
二、文件下载
使用文件下载功能需要先在微信后台进行下载域名配置,具体操作请移步官方文档,下载文件时,需要调用wx.downloadFile()方法,其中的两个参数最为重要
- API wx.downloadFile()
- url->文件存放的服务器地址
- filePath->文件存放的本地地址(默认是存储到本地临时文件,离开即会删除)
三、文档预览
官方目前支持大部分格式的文档预览,包括常用的PDF,Word,PPT,(Excel目前暂不支持)
- API wx.openDocument()
- filePath->文件路径(本地和下载得到的临时路径都可以)
- fileType->(当前文件的类型)
四、文件存储
文件存储分为临时存储和本地存储,其中最大的区别就是文件分别存在的周期长短,但是需要注意的是用户如果删除当前小程序,那么对应的文件也会被删除,(文件存储不管是临时还是本地存储,文件大小总共不能超过10M,一旦超过,再次调用相关API,会一直走fail错误回调方法)
- tempFilePath->存储的路径(返回本地的存储路径,请注意此时返回的是一个数组列表,包含了文件的大小、文件路径、文件存储的初始时间)
对于Android文件下载之后文件后缀变为unknown的解决办法是在地址后面拼接一个对应文档后缀名
https://google.com?fileType=.pdf(地址是乱写的哈,主要用于展示)
https://google.com?fileType=.word(地址是乱写的哈,主要用于展示)
五、获取本地存储的文件
当文件保存到了本地,那么在下次进入就需要进行文件列表的获取,此时获取文件分两种状态
- 获取指定的某一个单独的文件详细信息(wx.getSavedFileInfo)
* 需要传入访问的文件路径
* 返回的结果是包含当前文件的存储时间和大小 - 获取本地缓存的所有文件信息(wx.getSavedFileList)
* 不需要传递参数
* 返回的结果是当前本次存储的所有文件(文件大小、路径、时间)
六、文档分享
通过实践操作,发现在打开文档的窗口下只有Android可以进行当前文档的分享(Android默认打开的页面是通过QQ浏览器进行预览的),但是分享出去之后,发现文件缺失了对应的后缀,导致被分享人打开不了文档的问题,
暂时解决方法
- 文件分享之后,接受文档的用户手动添加后缀名
- 通过第三方文件(wps)打开进行分享
对于ios不能打开的问题,目前官方是不支持,具体可以访问下面链接进行查看
https://developers.weixin.qq.com/community/develop/doc/000e2c2b37c940261a47032e758c00
七、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();
}
})