一、前言
在uniapp的APP日常开发中,我们时常遇到一些兼容性问题,正如本文所提到的图片的预览和下载。在此功能的开发中,我常遇到以下四个问题:
- 图片预览功能实现,但是PDF,word,xls文件无法打开。
- 安卓的图片预览和文件查看功能正常,ios系统的手机却问题频出,时不时的无法打开文件。
- 图片第一次可以打开,第二次就报404,找不到文件。
- 预览不仅要满足安卓和ios系统,也要使浏览器+企业微信H5也要可以打开文件预览。
二、 图片预览功能实现,但是PDF,word,xls文件无法打开
uni.previewImage()
是uniapp的图片预览API,经常与uni.chooseImage()
一起使用,不过本文中我们只用到uni.previewImage()
即可。注:此API只支持打开图片类型文件。
根据官网文档所说,他只有一个必填参数,那就是urls
,也就是图片的路径,因为这个参数是一个数组,我用时,直接把路径放到了一个数组里用,current
这个参数是url的索引值,不写就默认是0。
// 预览图片
let url = 'https://www.123.com/'
uni.previewImage({
current: 0,
urls: [url],
success: function(data) {
console.log('预览成功');
},
fail: function(err) {
console.log(‘预览失败+’+err.errMsg);
}
});
三、安卓的图片预览和文件查看功能正常,ios系统的手机却问题频出,时不时的无法打开文件。
uni.downloadFile()
:把文件下载到本地,返回的是文件下载后的临时路径。必传参数url,string类型。uni.saveFile(OBJECT)
:把文件保存到本地。uni.openDocument()
:在新页面打开打开文件,支持doc, xls, ppt, pdf, docx, xlsx, pptx格式,常常与文件下载连用。
使用简例如下:
uni.downloadFile({
url: url,
success: function(res) {
var filePath = res.tempFilePath;
uni.saveFile({
tempFilePath:filePath,
success:function(res){
//保存成功并打开文件
uni.openDocument({
filePath: filePath,
success: (res) => console.log('成功打开文档'),
fail:(res)=>{
uni.showToast({
icon:'none',
title:'文件打开失败',
duration:2000
})
}
})
}
})
}
});
在此功能是初始版本中,因为我发现此方法jpg,png等图片格式也都可以打开,抱着侥幸心理,我就不管是什么类型,就都用的这一套代码下载预览,后来安卓的图片预览和文件查看功能正常,ios系统的手机却问题频出,时不时的无法打开文件,改了好几个版本,都没从根本上解决问题。
后来我发现,每次打开图片,安卓手机都是直接打开到相册,但是ios的却是在app页面基础上直接打开,我怀疑是ios系统下载缓存机制与安卓不同,才会出现这样的问题,后来想了一套更加完善的方法(在第六章中展现)。
四、图片第一次可以打开,第二次就报404,找不到文件
这个问题好像是因为我们后端的原因,根据后端要求,让我在每次访问图片链接时,后面都拼接上时间戳,保证每次访问的链接结尾都不一样即可解决。
五、预览不仅要满足安卓和ios系统,也要使浏览器也可以打开文件预览
浏览器使用window.open(url,'_blank')
即可打开,_blank
是规定在新开页面打开文件,_self
是在当前页面打开文件。
注:此方法在浏览器可以打开,但是发布到H5时,不一定有效。原以为H5的打开就类似于浏览器的打开方式,因此见浏览器可以打开,便没有测试。最近突然发现,此方法只能用于浏览器。企业微信H5端想要打开的话,则需要用window.location.assign(url);
。
六、最终版本-兼容安卓、ios、浏览器
下面便是我屡败屡战,实践出来的最终结果,既满足了安卓、ios、浏览器三端的兼容问题,又满足了不管图片还是文件都可以预览的条件。
知识补充:通过使用#ifdef、#endif、#ifdef指示符,我们可以区隔一些特定的代码。文章来源:https://www.toymoban.com/news/detail-409173.html
let url = data.url
let type = data.type
//如果是app走这里
//#ifdef APP-PLUS
let times = Date.parse(new Date());//拼接时间戳(根据自己项目需要考虑是否拼接)
uni.downloadFile({
url: url+'?code='+times,
success: function(res) {
var filePath = res.tempFilePath;
if (type=== 'jpg' || type === 'jpeg' || type === 'png' || type === 'gif' ) {
//如果是图片走这里
uni.previewImage({
current: 0,
urls: [url],
})
}else{
//如果是文件走这里
uni.openDocument({
filePath: filePath,
success: (res) => console.log('成功打开文档'),
fail:(res)=>{
uni.showToast({
icon:'none',
title:'文件打开失败',
duration:2000
})
}
})
}
}
});
//#endif
//#ifdef H5
//如果是浏览器走这里
window.open(url,'_blank');
//如果是H5走这里,如果这里没效果,可以把window.open(url,'_blank');注释掉试试
window.location.assign(url);
//#endif
创作不易,可以朝我竖一个大拇指嘛~文章来源地址https://www.toymoban.com/news/detail-409173.html
到了这里,关于uniapp图片或文件的预览和下载,兼容ios+安卓+浏览器+企业微信H5的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!