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

简介: 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

相关文章
|
2月前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
112 0
微信小程序多语言切换神器:简繁体切换功能完全指南
|
3月前
|
算法 JavaScript 前端开发
切西瓜法实现微信抢红包功能
该文章介绍了使用“切西瓜法”和“栅栏法”两种算法来模拟微信抢红包的随机分配机制,并通过具体的JavaScript代码实现了红包金额的公平随机分配过程。
切西瓜法实现微信抢红包功能
|
3月前
|
人工智能 前端开发 JavaScript
MacTalk 测评通义灵码,实现“微信表情”小功能
墨问西东创始人池建强分享了团队使用通义灵码的经验。
|
3月前
|
小程序 API 开发工具
使用python 实现微信签到提醒功能
【9月更文挑战第4天】使用python 实现微信签到提醒功能
82 2
|
4月前
|
Web App开发 缓存 小程序
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
|
4月前
|
小程序 前端开发 开发者
|
4月前
|
小程序 前端开发 API
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
118 1
|
4月前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
|
5月前
|
开发框架 移动开发 前端开发
在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
|
5月前
|
小程序 开发工具 开发者
入职必会-开发环境搭建31-微信开发者工具下载和安装
微信开发者工具是一款由微信官方推出的开发工具,旨在帮助开发者更高效地进行微信小程序和微信公众号的开发与调试。该工具集成了代码编辑、代码上传、实时预览、调试等功能,能够提供便捷的开发环境和调试工具,帮助开发者快速定位和解决问题。