微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片

简介: 微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片

背景

微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片:

let a = document.createElement('a')
a.style.display = 'none'
a.href = ‘https://www.图片地址.com’
a.setAttribute('download', '我的图片.jpg')
document.body.appendChild(a)
a.click() //执行下载
window.URL.revokeObjectURL(a.href)
document.body.removeChild(a)

但是在微信浏览器,上面那段代码是无效的,这是微信浏览器的限制。

微信的JS-SDK提供 wx.downloadImage() 的方法,是用来下载图片的。但其实我觉得应该是用来耍猴的。该方法不接受一个 url 参数,而是接受一个 serverId。serverId 从哪来,从另一个方法wx.uploadImage() 里面获得。wx.uploadImage() 方法用于上传本地的图片,但上传成功后,回调函数就能拿到一个 serverId。上传到哪?微信自己的服务器。如果你想保存到自己公司的服务器,你还得让公司服务器调用多媒体接口,从微信服务器拿回图片。而且,微信服务器只给你保存 3 天时间。是的,你能下载的图片的图片来自用户的上传,且只有三天有效期。另外,下载的图片貌似也不会保存到相册里,而是保存在用户找不到的地方。结论就是完全没法用。

但是,在微信浏览器中,长按图片是可以保存的。

实际上,图片、视频以及文档文件(pdf、word 等)都无法通过js原生方法进行下载,而是打开一个新的页面让你预览。但对于其他微信不能预览的文件(如果 zip 压缩包)来说,则会将其下载下来。对于展示出来的图片,用户可以长按图片保存下来。

解决方案

  1. 首先要判断浏览器是否为微信浏览器,如果不是微信浏览器,下载保持原来逻辑。
  2. 如果是图片,点击下载按钮时弹出弹窗,提示用户长按图片下载。
  3. 如果是视频或文档文件,提示用户使用默认浏览器去下载文件。考虑到用户用新的浏览器又要登陆很麻烦,引导用户点击右上角将链接用默认浏览器打开并不是好方案。我们可以在点击下载按钮时,复制文件链接,然后让用户自行打开默认浏览器粘贴链接下载。这种占用用户剪贴板的行为其实不太好。或者直接将下载按钮屏蔽掉算了,又或是弹出只能在 PC 端下载的提示。
  4. 如果是其他类型文件,可以直接下载,无限制。

文章参考

https://zhuanlan.zhihu.com/p/485755669?utm_id=0

目录
相关文章
|
5天前
|
机器学习/深度学习 小程序 前端开发
微信小程序——实现对话模式(调用大模型图片生成)
微信小程序——实现对话模式(调用大模型图片生成)
58 3
|
5天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
18 0
|
5天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
13 1
|
5天前
|
小程序 容器
微信小程序echart图片不显示 问题解决
微信小程序echart图片不显示 问题解决
11 0
|
5天前
|
小程序 前端开发 JavaScript
轻松学会微信小程序开发(一)
轻松学会微信小程序开发(一)
|
5天前
|
JSON 小程序 JavaScript
微信小程序开发1
微信小程序开发1
|
5天前
|
数据采集 存储 人工智能
【Python+微信】【企业微信开发入坑指北】4. 企业微信接入GPT,只需一个URL,自动获取文章总结
【Python+微信】【企业微信开发入坑指北】4. 企业微信接入GPT,只需一个URL,自动获取文章总结
43 0
|
5天前
|
人工智能 机器人 API
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
34 0
|
5天前
|
缓存 人工智能 API
【Python+微信】【企业微信开发入坑指北】2. 如何利用企业微信API主动给用户发应用消息
【Python+微信】【企业微信开发入坑指北】2. 如何利用企业微信API主动给用户发应用消息
23 0
|
5天前
|
XML 人工智能 数据安全/隐私保护
【Python+微信】【企业微信开发入坑指北】1. 数据链路打通:接收用户消息处理并回复
【Python+微信】【企业微信开发入坑指北】1. 数据链路打通:接收用户消息处理并回复
17 0

热门文章

最新文章

相关实验场景

更多