在vue中使用 qrcodejs2

1.安装

npm install qrcodejs2 --save

2.引入

import QRCode from "qrcodejs2"

3.生成二维码

（一）放二维码的标签

<div class="qrcode" ref="qrCodeUrl"></div>

（二）生成二维码

methods: {creatQrCode() {var qrcode = new QRCode(this.$refs.qrCodeUrl, {text: 'content',  //需要转换为二维码的内容width: 100, //二维码宽度height: 100,  //二维码高度colorDark: '#000000', //前景色   colorLight: '#ffffff', //后景色correctLevel: QRCode.CorrectLevel.L //容错级别})}
},
mounted() {this.creatQrCode()
}

实现功能：用手机app扫码，实现pc端扫码登录

pc端扫码可以便捷地实现登录，避免了过多地输入。但是手机APP扫pc端的二维码时只能pc端向手机传递信息，而pc端无法获取到手机登录的权限，如果让pc端再去输入登录的token是不现实的。因此pc在APP传递信息时需要将自己的信息传给APP，APP在拿到信息以后同时携带APP的信息一并传给服务器。这样服务器才能知道是哪个pc端需要登录。

功能实现大致过程：

过程1，2，3中pc端携带着pc端设备的信息向服务端发起请求，服务端返回token1。而pc端需要用token1生成二维码，让手机APP扫码的时候可以获取到token1。

过程4，5。手机端APP扫码后拿到token1，然后携带着token1和APP自身的token2一起向服务端发起请求，让服务端将手机APP和pc端绑定在一起。接着还需要确认登录，告诉服务器允许当前的pc端登录。

过程6。pc端需要不断轮询，查看手机是否扫码，当扫成功后pc端页面展示“扫码成功”并继续轮询，当APP确认登录后，pc端展示“成功登录”并跳转页面

轮询代码：

const interval = setInterval(() => {//此处换成你服务器自己的地址qrcodeState.get("http://192.168.0.103:8888/qrcode/getStatus?code=" + this.code).then((res) => {if (res.data.data.status == "yes") {this.text = "扫描成功，请确认登陆";this.isScan = true;}if (res.data.data.status == "success") {this.text = "登陆成功";this.userName = res.data.data.userName;clearInterval(interval); //停止}});}, 1000);

这是个较为简单的二维码登录，还需要完善“二维码过期”等功能。

vue qrcodejs2生成二维码实现手机APP扫码进行web网页登录相关推荐

vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
Vue项目生成二维码
场景: [民主测评.闭卷测试] Vue项目生成二维码,使用手机浏览器扫码录入答题一,创建vue项目,样式布局,接口联调, npm run build 打包成dist 文件,让后台发送到服务器中,页面 ...
使用 qrcodejs2 生成二维码详细API和参数
使用 qrcodejs2 生成二维码安装 qrcodejs2 cnpm install qrcodejs2 --save 使用 qrcodejs2 页面引入 import QRCode from ' ...
vue实现生成二维码，并生成图片
vue实现生成二维码,并生成图片 1.安装插件 npm install qrcodejs2 --save npm install --save html2canvas 2.导包 import html ...
Vue批量生成二维码并分页打印，组件形式实现
Vue批量生成二维码并分页打印,组件形式实现一. 最终效果二. 实现方式一. 最终效果二. 实现方式安装qrcodejs2插件: // 终端执行 npm install qrcodejs2 ...
Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
vue 前端生成二维码，并转换为图片
这篇文章主要是分享下自己的收获,也是自己遇到的问题: 前端如何自己生成二维码? 前端如何将生成的二维码转成图片并展示? 如何控制二维码的显隐? 话不多说,直接上干货 base64如何转换成图片 npm ...
在H5中使用qrcode, qrcodejs2生成二维码
在H5中使用qrcode生成二维码安装插件 ```javascript npm install --save qrcode ``` 使用插件按需引入 //index.html<html> ...
vue中生成二维码并自动批量下载
项目中经常又这样的需求,要求将字符串生成二维码,并下载下来一般分为生成一个二维码展示并下载,对于这种你只需调用 qrcodejs2生成二维码就可以了下载也是按钮触发今天我们要说的是批量下载, ...

vue qrcodejs2生成二维码实现手机APP扫码进行web网页登录

在vue中使用 qrcodejs2

实现功能：用手机app扫码，实现pc端扫码登录

vue qrcodejs2生成二维码实现手机APP扫码进行web网页登录相关推荐

最新文章

热门文章