vue——微信二维码显示vue-qr/qrcodejs2

微信二维码之vue-qr/qrcodejs2 区别

vue-qr

弊端：当后端微信返回二维码，不兼容IE浏览器

npm install vue-qr --save

main.js
import vueQr from 'vue-qr'
Vue.use(vueQr)

<vue-qr :text="qrCode" :margin="0" colorLight="#fff" :logoSrc="require('./../../assets/wpay.svg')" :logoScale="0.2" :size="200"></vue-qr>
// qrCode获取到的后端二维码

qrcodejs2 - canvas

优点：生成canvas二维码，兼容IE浏览器

npm install qrcodejs2 --save

import QRCode from 'qrcodejs2'

<div class="div-code"><div id="qrcode1" ref="qrcode1"></div> // 二维码容器<img src="./../../assets/wpay.svg" alt="" class="pay-logo">
</div>data () {return {QRCode: ''}
}
methods: {// 获取支付二维码async getPayInfo () {const { code, data } = await this.$api.api模块名.方法名()if (code === '0') {this.QRCode = data.QRCodethis.$nextTick(() => {document.querySelector('#qrcode1').innerHTML = ''return new QRCode(this.$refs.qrcode1, {width: 220, // 宽height: 220, // 高text: this.QRCode, // 生成二维码的内容render: 'canvas', // 设置渲染方式（canvas,table 默认canvas）correctLevel: QRCode.CorrectLevel.L // 二维码纠错级别（L,M,Q,H）})})}}}

vue——微信二维码显示vue-qr/qrcodejs2相关推荐

vue扫描二维码，真机调试
vue扫描二维码,真机调试 vue代码使用HBuilderX 运行界面 vue代码 <el-button>标签需要引用element-ui,如果没有,可以注释,打开下面的普通<bu ...
vue使用qrcodejs2生成带log的二维码图片，vue生成二维码图片中间带log，自定义log
安装插件 npm install qrcodejs2 --save 在页面中引入 import QRcode from 'qrcodejs2' 普通的二维码此处的id就是页面中要展示二维码容器的id ...
vue生成二维码并下载
vue生成二维码图片,这里使用的是qrcode.js 这个插件 1.下载插件 npm install --save qrcodejs2 2.组件内使用 <template> <B ...
【vue生成二维码】1.将后端返回的二维码字符串生成二维码；2.下载功能
vue使用qrcode插件一.只展示一张图的效果一.效果图: 二.具体代码: 1.安装 npm i qrcodejs2 --save 2.在页面使用 2.1.html <div id=&qu ...
vue实现二维码批量打印功能
vue实现二维码批量打印功能业务需求:客户需要给每个商品贴上二维码,为了更加高效的完成这项工作需要配合热敏打印机实现批量打印二维码的需求,因为是web项目后端会部署到服务器上,因此只能通过js的方式 ...
微信扫码登录自定义二维码显示信息
微信扫码登录,自定义二维码显示信息 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js& ...
原生Vue实现二维码扫一扫，兼容PC、安卓、IOS
原生Vue实现二维码扫一扫通过使用 vue-qrcode-reader 进行实现,必须是 Https 或 Localhost 文章目录原生Vue实现二维码扫一扫 vue-qrcode-reader ...
利用VUE生成二维码（两种方式）
利用Vue生成二维码 Author:kak vue有两种生成二维码的方式,qrcode.vue-qr(有icon): 1.qrcode npm ``install` `--save qrcodejs2 ...
android TV端如何读取微信网页版二维码显示生成一张图片
今天讲下TV端接二维码遇到的一些问题,由于是在微信平台申请的是以网站那种形式申请的,而不是服务号申请的,所以客户端显示的二维码是以网页的形式展现的,网页是用WebView加载实现的,但是我们的界面是这 ...
关于前端调用微信二维码支付，二维码无法显示的问题
昨天测试提交了一个bug,说是公司网站调用微信支付时无法显示微信二维码,于是去测试环境测试了一下,发现果然有问题: 此时后台日志打印了如下信息,微信接口返回的错误提示是:"invalid s ...

vue——微信二维码显示vue-qr/qrcodejs2

微信二维码之vue-qr/qrcodejs2 区别

vue-qr

qrcodejs2 - canvas

vue——微信二维码显示vue-qr/qrcodejs2相关推荐

最新文章

热门文章