文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

uniapp图片或文件的预览和下载,兼容ios+安卓+浏览器+企业微信H5

2023-08-17 19:32

关注

在uniapp的APP日常开发中,我们时常遇到一些兼容性问题,正如本文所提到的图片的预览和下载。在此功能的开发中,我常遇到以下四个问题:

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);}});

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系统下载缓存机制与安卓不同,才会出现这样的问题,后来想了一套更加完善的方法(在第六章中展现)。

这个问题好像是因为我们后端的原因,根据后端要求,让我在每次访问图片链接时,后面都拼接上时间戳,保证每次访问的链接结尾都不一样即可解决。

浏览器使用window.open(url,'_blank')即可打开,_blank是规定在新开页面打开文件,_self是在当前页面打开文件。
注:此方法在浏览器可以打开,但是发布到H5时,不一定有效。原以为H5的打开就类似于浏览器的打开方式,因此见浏览器可以打开,便没有测试。最近突然发现,此方法只能用于浏览器。企业微信H5端想要打开的话,则需要用window.location.assign(url);

下面便是我屡败屡战,实践出来的最终结果,既满足了安卓、ios、浏览器三端的兼容问题,又满足了不管图片还是文件都可以预览的条件。

知识补充:通过使用#ifdef、#endif、#ifdef指示符,我们可以区隔一些特定的代码。

let url = data.urllet type = data.type//如果是app走这里//#ifdef APP-PLUSlet 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://blog.csdn.net/qq_45091359/article/details/127727201

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯