【vue】移动端扫描二维码

参考链接：

https://github.com/gruhn/vue-qrcode-reader
https://blog.csdn.net/zhangtian_tian/article/details/105226716

1. 效果图

2. 开启 https

需要在 https 协议下才可以调用相机，实现扫码。
可以通过配置 vue.config.js 中的 devServer:{https:true}
或前端使用Nuxt框架，配置本地https访问配置本地证书

3. 安装 vue-qrcode-reader

npm i vue-qrcode-reader --save

4. 代码实现

<template><div class="container"><!-- 扫描中心的盒子 --><qrcode-stream class="qrcode" @decode="onDecode" @init="onInit"><div class="center"><span class="border"></span><span class="border"></span><span class="border"></span><span class="border"></span><div class="animate"></div></div></qrcode-stream></div>
</template><script>
import { QrcodeStream } from 'vue-qrcode-reader'export default {components: { QrcodeStream},data() {return {}},methods: {onDecode(result) {window.location.href = result},async onInit(promise) {try {await promise} catch (error) {if (error.name === 'NotAllowedError') {alert('ERROR: 您需要授予相机访问权限')} else if (error.name === 'NotFoundError') {alert('ERROR: 这个设备上没有摄像头')} else if (error.name === 'NotSupportedError') {alert('ERROR: 所需的安全上下文(HTTPS、本地主机)')} else if (error.name === 'NotReadableError') {alert('ERROR: 相机被占用')} else if (error.name === 'OverconstrainedError') {alert('ERROR: 安装摄像头不合适')} else if (error.name === 'StreamApiNotSupportedError') {alert('ERROR: 此浏览器不支持流API')}}}}
}
</script><style lang="less" scoped>
.container {height: 100%;overflow: hidden;.qrcode {height: 100%;background-color: rgba(0, 0, 0, 0.3);.center {width: 200px;height: 200px;position: fixed;background-color: rgba(255, 255, 255, 0.5);top: 50%;left: 50%;transform: translate(-50%, -50%);}.animate {width: 150px;background-color: #41b482;height: 2px;margin: 0 auto;animation: animate 3s infinite;}@keyframes animate {0% {margin-top: 50px;}100% {margin-top: 150px;}}.border {position: absolute;}.border:nth-child(1) {top: 0;left: 0;border-top: 2px solid #41b482;border-left: 2px solid #41b482;width: 10px;height: 10px;}.border:nth-child(2) {top: 0;right: 0;border-top: 2px solid #41b482;border-right: 2px solid #41b482;width: 10px;height: 10px;}.border:nth-child(3) {bottom: 0;left: 0;border-bottom: 2px solid #41b482;border-left: 2px solid #41b482;width: 10px;height: 10px;}.border:nth-child(4) {bottom: 0;right: 0;border-bottom: 2px solid #41b482;border-right: 2px solid #41b482;width: 10px;height: 10px;}}
}
</style>

【vue】移动端扫描二维码相关推荐

百度网盘PC端扫描二维码登录时无法加载二维码问题解决方法
问题: 今天在PC端扫描登录百度网盘时,二维码无法加载出来,具体情况如图: 解决方法: 1.打开IE浏览器 2.打开工具 3.打开Internet选项 4.打开高级选项,重置IE设置 5.点击确定,打 ...
移动端扫描二维码下载app
核心代码: <div id="testid"></div> <script type="text/javascript"> ...
Vue中实现扫描二维码和条形码
如何使用Vue实现一个H5扫码功能? 安装 @zxing/library 依赖 npm i @zxing/library --save; 需要注意的是一定要在https环境下使用!一定要在https ...
电脑端扫描二维码（java）
说明:js调去电脑摄像头拍照,然后获取图片base64位编码,再将base64为编码转为bolb,通过定时异步上传到后台,在后台对图片文件进行解码,返回解码结果到页面,然后页面重新加载结果(url) ...
【JavaScript】移动端扫描二维码检测浏览器（微信、支付宝、Safari、其他浏览器）
// 检测客户端类型 // 注意:19年6月份iPad出了专门的操作系统iPadOS // 它的userAgent中不是iPad,也没有下文中的mobile,而是Macintosh,类似Mac.需要兼 ...
浅谈扫描二维码登录微信网页版与摇一摇传图的实现原理
前言:简单体验了下微信网页版通过二维码登录和摇一摇传图功能,从技术角度看,网上专家吹捧的 [隔空取物]其实并不神秘,我先简单分析一下. 1. 微信移动端扫描二维码登录(C-S-C模式) CSC模式为: ...
Vue 移动端实现调用相机扫描二维码或条形码
一.开发前的准备实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能(详见概述 | 微信开放文档),或者支付宝 H5 开放的API(详见?支付宝H5开放文档). 但是 ...
vue websocket 公众号扫描二维码登录PC端
首先使用的是websocket进行消息的传递,当我们在pc端请求到二维码图片后,打开微信扫一扫,扫描二维码后,就可以在websocket里接收到扫描消息,然后进行自己的业务逻辑处理,具体代码如下: w ...
在Vue中调用微信的扫描二维码功能
在Vue中调用微信的扫描二维码功能步骤新建vue文件(这里采用mint的标签库--就一个按钮~~) 关键代码 <template><div class="login_d ...

【vue】移动端扫描二维码

1. 效果图

2. 开启 https

3. 安装 vue-qrcode-reader

4. 代码实现

【vue】移动端扫描二维码相关推荐

最新文章

热门文章