位置: IT常识 - 正文

vue2移动端使用vue-qrcode-reader实现扫一扫功能(vue 移动端)

编辑:rootadmin
vue2移动端使用vue-qrcode-reader实现扫一扫功能

推荐整理分享vue2移动端使用vue-qrcode-reader实现扫一扫功能(vue 移动端),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:基于vue的移动端怎么开发,vue移动端项目实例,vue3移动端ui,vue如何做移动端适配,vuetify 移动端,vue如何做移动端适配,基于vue的移动端怎么开发,vue如何做移动端适配,内容如对您有帮助,希望把文章链接给更多的朋友!

移动端实现扫一扫   扫码功能

第一种:如果是用uniapp开发  可以直接使用uni的语法 并且兼容多端

第二种:如果是开发浏览器的网页,基于微信的话,也可以用微信的weixin-js-sdk

        具体流程参考官网:概述 | 微信开放文档

第三种:用第三方vue-qrcode-reader实现扫一扫功能,

        详细流程参考官网:Simple | Vue Qrcode Reader

vue2移动端使用vue-qrcode-reader实现扫一扫功能(vue 移动端)

以下内容为用vue-qrcode-reader实现扫一扫功能步骤

1.下载vue-qrcode-reader依赖

//   npm 下载

npm install --save vue-qecode-reader

//   cnpm 下载

cnpm install --save vue-qrcode-reader

 2.此次流程是在A页面添加扫一扫button,然后点击跳转到B页面,然后扫一扫写在B页面,进入B页面初始化,然后同意使用相机,在扫描到二维码后携带扫到的内容跳转到A页面

代码如下

<template> <div class="saoma"> <qrcode-stream @decode="onDecode" @init="onInit" style="height: 100vh;width:100vw"> <div> <div class="qr-scanner"> <div class="box"> <div class="line"></div> <div class="angle"></div> </div> </div> </div> </qrcode-stream> </div></template><script> import { QrcodeStream } from 'vue-qrcode-reader'; export default { components: { QrcodeStream }, data() { return { result: '', // 扫码结果信息 error: '' // 错误信息 } }, methods: { onDecode(result) { if(result){ this.$router.push({ path:'/', query: { code:result, } }) } }, async onInit(promise) { try { await promise } catch (error) { if (error.name === 'NotAllowedError') { window.alert('您需要授予相机访问权限') this.$router.push({path:'/'}) } else if (error.name === 'NotFoundError') { this.$router.push({path:'/'}) window.alert('这个设备上没有摄像头') } else if (error.name === 'NotSupportedError') { this.$router.push({path:'/'}) window.alert('所需的安全上下文(HTTPS、本地主机)') } else if (error.name === 'NotReadableError') { this.$router.push({path:'/'}) window.alert('相机被占用') } else if (error.name === 'OverconstrainedError') { this.$router.push({path:'/'}) window.alert('安装摄像头不合适') } else if (error.name === 'StreamApiNotSupportedError') { this.$router.push({path:'/'}) window.alert('此浏览器不支持流API') } } }, } }</script><style scoped> .saoma { width: 100vw; height: 100vh; } .qr-scanner { background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.1) 25%, rgba(32, 255, 77, 0.1) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.1) 75%, rgba(32, 255, 77, 0.1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.1) 25%, rgba(32, 255, 77, 0.1) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.1) 75%, rgba(32, 255, 77, 0.1) 76%, transparent 77%, transparent); background-size: 3rem 3rem; background-position: -1rem -1rem; width: 100%; /* height: 100%; */ height: 100vh; position: relative; background-color: #1110; /* background-color: #111; */ } .qr-scanner .box { width: 213px; height: 213px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; border: 0.1rem solid rgba(0, 255, 51, 0.2); /* background: url('') no-repeat center center; */ } .qr-scanner .line { height: calc(100% - 2px); width: 100%; background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%); border-bottom: 3px solid #00ff33; transform: translateY(-100%); animation: radar-beam 2s infinite alternate; animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99); animation-delay: 1.4s; } .qr-scanner .box:after, .qr-scanner .box:before, .qr-scanner .angle:after, .qr-scanner .angle:before { content: ''; display: block; position: absolute; width: 3vw; height: 3vw; border: 0.2rem solid transparent; } .qr-scanner .box:after, .qr-scanner .box:before { top: 0; border-top-color: #00ff33; } .qr-scanner .angle:after, .qr-scanner .angle:before { bottom: 0; border-bottom-color: #00ff33; } .qr-scanner .box:before, .qr-scanner .angle:before { left: 0; border-left-color: #00ff33; } .qr-scanner .box:after, .qr-scanner .angle:after { right: 0; border-right-color: #00ff33; } @keyframes radar-beam { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } }</style>

以上内容即为使用vue-qrcode-reader实现扫一扫功能的流程

可以直接复制粘贴使用哦

如果此文章对您有用,请留下您宝贵的一键三连,给作者一点鼓励

本文链接地址:https://www.jiuchutong.com/zhishi/288937.html 转载请保留说明!

上一篇:nvidia显卡驱动、cuda、cudnn、tensorflow对应版本(nvidia显卡驱动怎么安装)

下一篇:vue 计算属性未重新计算 / computed 未触发 / computed 原理&源码分析(vue3 计算属性)

  • macbook如何镜像投屏(macbook如何镜像安装vscode)

    macbook如何镜像投屏(macbook如何镜像安装vscode)

  • iqoo 3的屏幕刷新率是90hz吗(iqoopro屏幕刷新率)

    iqoo 3的屏幕刷新率是90hz吗(iqoopro屏幕刷新率)

  • 华为p30咋样升级emui10(华为p30咋样升级系统版本)

    华为p30咋样升级emui10(华为p30咋样升级系统版本)

  • 猫上面的灯亮几个正常(猫上面的灯一直闪)

    猫上面的灯亮几个正常(猫上面的灯一直闪)

  • caj用什么软件能打开(caj文件用什么阅读器)

    caj用什么软件能打开(caj文件用什么阅读器)

  • asf格式视频正确的扩展名(视频asf格式怎么转换mp4格式)

    asf格式视频正确的扩展名(视频asf格式怎么转换mp4格式)

  • ipad pro 2020新款可以当笔记本用吗(ipad pro 2020新款型号号码)

    ipad pro 2020新款可以当笔记本用吗(ipad pro 2020新款型号号码)

  • sim卡没有工具包服务是什么意思(sim卡没有工具包服怎么办)

    sim卡没有工具包服务是什么意思(sim卡没有工具包服怎么办)

  • 怎么成为优酷受邀用户(优酷如何成为会员)

    怎么成为优酷受邀用户(优酷如何成为会员)

  • 登录别人qq空间别人知道吗(登录别人qq空间要验证)

    登录别人qq空间别人知道吗(登录别人qq空间要验证)

  • 苹果双卡可以同时接收电话嘛(苹果手机双卡可以一起用吗)

    苹果双卡可以同时接收电话嘛(苹果手机双卡可以一起用吗)

  • word文档页面位置调整(word文档页面位置怎么左右拉动)

    word文档页面位置调整(word文档页面位置怎么左右拉动)

  • 苹果11pro怎么信任软件(iphone11pro信任在哪里设置)

    苹果11pro怎么信任软件(iphone11pro信任在哪里设置)

  • 手机呼吸灯在哪里设置(手机呼吸灯在哪里开)

    手机呼吸灯在哪里设置(手机呼吸灯在哪里开)

  • 华为手机插耳机的地方在哪里(华为手机插耳机有滋滋的声音怎么回事)

    华为手机插耳机的地方在哪里(华为手机插耳机有滋滋的声音怎么回事)

  • 合并单元格怎么让所有数据带着(合并单元格怎么保留全部内容)

    合并单元格怎么让所有数据带着(合并单元格怎么保留全部内容)

  • oppoa5耳机模式怎么解除(oppoa5耳机模式怎么开)

    oppoa5耳机模式怎么解除(oppoa5耳机模式怎么开)

  • 计算机病毒是计算机系统中自动产生的吗(计算机病毒是计算机中一类隐藏)

    计算机病毒是计算机系统中自动产生的吗(计算机病毒是计算机中一类隐藏)

  • 看资料卡有访客记录吗(qq访问资料卡会有访问记录吗)

    看资料卡有访客记录吗(qq访问资料卡会有访问记录吗)

  • i58265u是低端处理器吗(i58265u性能)

    i58265u是低端处理器吗(i58265u性能)

  • 怎么阻止网络电话来电(怎么阻止网络电话打进来)

    怎么阻止网络电话来电(怎么阻止网络电话打进来)

  • 微信朋友圈不能发动图吗(微信朋友圈不能编辑修改吗)

    微信朋友圈不能发动图吗(微信朋友圈不能编辑修改吗)

  • p30与p30pro的区别(p30和p30 pro有什么区别哪个更好用)

    p30与p30pro的区别(p30和p30 pro有什么区别哪个更好用)

  • 文件上传(模板导出、批量导入)(文件上传模板怎么弄)

    文件上传(模板导出、批量导入)(文件上传模板怎么弄)

  • 增值税结转和个体工商户的增值税缴纳分录如何做?
  • 缴纳上月附加税会计科目
  • 筹建期间发生的开办费计入什么科目
  • 非限定性净资产包括哪些科目
  • 公司合作分红
  • 税控盘解锁是什么意思
  • 小规模免哪些税
  • 环境保护税属于什么税种
  • 固定资产丢失
  • 高危行业企业安全费用提取
  • 股息红利是否纳入个税合并征税
  • 农产品增值税进项税额核定扣除办法
  • 员工异地缴纳社保协议
  • 4s店买车首付能付一成吗
  • 上月未抵扣完的进项税额
  • 普通发票可以改明细吗
  • 公司给员工买房子
  • 增值税专用发票抵扣期限
  • 发票认证了还能退回吗
  • 营改增后增加了什么征税项目
  • 普票开票开给个人怎么开
  • 关于小规模纳税人的说法错误的有
  • 如何冲销账面上的资金
  • 公司预付的货款怎么做账
  • 收到红字发票后怎么做账
  • 哪些发票公司可以抵扣
  • 所得税前允许列支的税金包括
  • 生产车间工资计入什么费用科目
  • 怎么授权gg修改器root权限
  • 财务报表包括哪几个表
  • 企业所得税清算报备是什么意思
  • 坏账损失可以做销项税转出吗
  • csinject.exe是什么程序的进程 csinject进程是安全的吗
  • launcher是啥
  • 给外部人员发奖状怎么说
  • 深度学习——VGG16模型详解
  • 塞里雅兰瀑布图片高清
  • php打包网站并在哪里打开
  • 主营业务毛利率公式
  • php利用switch语句判断学生成绩处于哪个区间
  • thinkphp3.2框架
  • vue中的use
  • vue自定义dialog
  • echarts柱状图立体
  • 基于Wav2Lip的AI主播
  • php应用实例
  • 大学生创新创业大赛官网
  • find命令结果怎么导出到文本
  • 织梦如何使用
  • 商誉减值可以避税吗
  • 印花税是根据销售收入申报吗
  • 个体户开出的增值税发票丢失了怎么办?
  • 负数发票开票条件?
  • sql server2014教程
  • 预付的展会费如何入账
  • 支付宝里的收入和支出明细能查多久的?
  • 总分类账与明细分类账的关系
  • 新旧收入准则对比区别表
  • 关于读书的名言名句
  • linux服务器怎么用
  • ntdll.dll no matching
  • slserv.exe - slserv进程是什么意思
  • 远程关机对话框怎么打开
  • win7系统开机蓝屏0x0000007b
  • win10虚拟机不能使用
  • win8操作系统
  • eventlistener js
  • 请问在javascript程序中
  • Python IDE PyCharm的基本快捷键和配置简介
  • JavaScript中的math.pi
  • js瀑布流布局
  • android基础知识入门
  • jquery手册手机版
  • 如何利用Fabric自动化你的任务
  • 使用jQuery加载html页面到指定的div实现方法
  • 软件和集成电路企业税收优惠
  • 境外承包工程款收入
  • 消费税纳税申报流程图
  • 怎么查个税交了多久
  • 江苏地税每月社保多少钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设