Vue中实现将页面生成微信二维码

1.这里用到的插件是：qr-code-with-logo，所以第一步先安装此插件

npm install --save qr-code-with-logo

2.写个div用来存放二维码图片

      <li><i class="wx"></i>微信扫一扫<div id="qrcodeCanvas"></div></li>

3.生成二维码的方法：（在mounted的时候调用一下此方法就可以了）

  weChatQrCode () {const qrcode = document.getElementById(`qrcodeCanvas`)const myCanvas = document.createElement('canvas')qrcode.appendChild(myCanvas)QrCodeWithLogo.toCanvas({canvas: myCanvas,content: this.url, // 这里的url就是要分享的页面width: 110,errorCorrectionLevel: 'L',borderSize: 0, //计算模式,margin: 0// 二维码里放的图标logo: {src: xxxx}})}

若url地址太长，生成的二微博不好扫描，可以将二维码宽度调大一些～

Vue中实现将页面生成微信二维码相关推荐

企业实战, java、spingboot微信扫码支付，页面生成微信二维码，微信扫码付款，websocket通知，处理订单！复制粘贴代码直接开干
一功能描述: 前端选择商品后生成二维码,用户微信扫码支付备注: 红色为后台给前端的接口 1.前端选择确认商品 2.调后台生成订单接口 (状态未付款) 3.返回订单的详情(订单确认页面 ...
qrcode.js生成微信二维码
①安装qrcodejs2 npm install qrcodejs2 --save ②在页面中引入 import QRCode from "qrcodejs2" ③在html中设置 ...
如何生成微信二维码？生成方法其实非常简单
如何生成微信二维码呢?生成微信二维码可以方便地分享微信号或公众号,让其他人可以快速添加你为好友或关注你的公众号.在商业领域中,可以将微信二维码作为营销手段,例如在文章中加入二维码,引导用户进入官方微信 ...
SpringBoot 生成微信二维码 B方案
SpringBoot 生成微信二维码 B方案今天主要分享一下如何使用 springBoot 来生成微信B方案的二维码.微信官方地址 (微信官方文档) 有其他方案需求的小伙伴可以进官方了解一下哈 ...
thinkphp用phpqrcode生成二维码（含中间带logo、临时二维码）或生成微信二维码海报的方法
前期准备: 1.phpqrcode类文件下载,下载地址:https://sourceforge.net/projects/phpqrcode/ 2.PHP环境必须开启支持GD2扩展库支持(一般情况下都 ...
python制作微信个人二维码_一个python自动生成微信二维码海报的轮子
由于最近需要做一个线上活动,所以策划了一个微信二维码海报的用户裂变方案.做好了需求以后交给我们可爱的程序媛妹妹.三天过后去问她,她的表情是这样的她是不是在说,"啊啊,真是不好意思" ...
页面悬浮微信二维码代码
<style type="text/css"> #floatTips{font-weight:bold;position:absolute;right:20px;/*调 ...
java生成微信二维码，带页面跳转功能
2019独角兽企业重金招聘Python工程师标准>>> package QRCode;import java.awt.image.BufferedImage; import java ...
vue3-pc端生成微信二维码、扫码支付监听支付回调（WebSocket）功能实现
项目场景:后台系统中采购订单列表需要支持微信扫描支付功能,支付成功需要返回到订单列表. 一.根据后端接口返回生成二维码(QRCode) 调用接口接收后端返回数据, npm install qrcode ...
vue 中使用 QRCode.js 链接转二维码带中间图片
前言项目中需要一个链接转二维码的功能,找了一下决定使用QRCode.js(很久以前的插件了) 下载引入1. <div id="qrcode" ref="qrco ...

Vue中实现将页面生成微信二维码

Vue中实现将页面生成微信二维码相关推荐

最新文章

热门文章