巧妙解决微信里进行下载功能

简介: https://juejin.cn/post/7101137101655113736 巧妙解决微信里进行下载功能

微信不支持download下载功能,下载功能如果需要的话可以调用的是wx自己的api,但需要chooseId ,chooseId 的获取是要使用上传接口获得。
所以可以采用通用的方案,长按保存,隐藏一个透明度为0的 img 区域置在最顶部(本文代码引用vue-qriously 用于生成项目所需的二维码,html2canvas,通过将生成的二维码部分的html转成图片路径。)
因为透明度为0的图片在最上面,所以长按会触发微信的保存图片功能。

<img class="qr_code-image" :src="imageUrl" v-if="imageUrl" />
import html2canvas from "html2canvas"; // html  -> canvas
import VueQriously from "vue-qriously"; // 生成二维码

html2canvas(this.$refs["qr_code-contain"], {
    useCORS: true,
    scale: 2,
    dpi: window.devicePixelRatio * 2,
  }).then((canvas) => {
    console.time("start:1");
    let data = canvas.toDataURL("image/jpeg", 1);
    if (this.isWX) {
      this.imageUrl = data;
    } else {
      // 用于兼容程序在h5环境的下载
      let a = document.createElement("a");
      a.download = "检查二维码";
      a.href = data;
      a.click();
    }
    console.timeEnd("start:1");
  });
结束语:关注我,少走弯路!

image.png

相关文章
|
19天前
|
小程序
微信小程序如何实现进入小程序自动连WiFi功能
微信小程序如何实现进入小程序自动连WiFi功能
|
2月前
|
小程序 JavaScript
微信小程序图片预览功能?
微信小程序图片预览功能?
|
7天前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
8 0
|
1月前
|
小程序
微信小程序下载代码
微信小程序下载代码
|
3月前
|
小程序 Android开发
Appium微信小程序自动化之开启webview调试功能方法封装
Appium微信小程序自动化之开启webview调试功能方法封装
81 0
|
3月前
|
小程序 API
微信小程序返回到顶部功能实现
微信小程序返回到顶部功能实现
|
3月前
|
小程序 定位技术 API
微信小程序实现地图功能(腾讯地图)
微信小程序实现地图功能(腾讯地图)
|
3月前
|
小程序 JavaScript
微信小程序实现一个音乐播放器的功能
微信小程序实现一个音乐播放器的功能
|
3月前
|
小程序 数据安全/隐私保护
微信小程序实现一个简单的登录功能
微信小程序实现一个简单的登录功能
|
3月前
|
小程序 前端开发 开发者
小程序端接入企微客服 【微信客服】支持接入企微客服功能
小程序端接入企微客服 【微信客服】支持接入企微客服功能
188 0

热门文章

最新文章