位置: 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 计算属性)

  • 华为watch3如何关闭应用(华为watch3如何关闭抬腕亮屏)

    华为watch3如何关闭应用(华为watch3如何关闭抬腕亮屏)

  • 希沃白板的课件怎么转换成ppt(希沃白板的课件怎么修改)

    希沃白板的课件怎么转换成ppt(希沃白板的课件怎么修改)

  • 系统评价与meta分析的区别(系统评价与meta分析的关系)

    系统评价与meta分析的区别(系统评价与meta分析的关系)

  • 苹果x怎么开热点(苹果x怎么开热点网络)

    苹果x怎么开热点(苹果x怎么开热点网络)

  • 微信怎么添加常用语(微信怎么添加常用服务)

    微信怎么添加常用语(微信怎么添加常用服务)

  • 微信运动半夜自动增加(微信运动半夜自动更新)

    微信运动半夜自动增加(微信运动半夜自动更新)

  • fog屏与原装屏区别(原装fog屏幕)

    fog屏与原装屏区别(原装fog屏幕)

  • 怎么把一台电脑的文件弄到另一台(怎么把一台电脑里的全部资料转移到另一台电脑里)

    怎么把一台电脑的文件弄到另一台(怎么把一台电脑里的全部资料转移到另一台电脑里)

  • def代码什么意思(def.diva)

    def代码什么意思(def.diva)

  • 声卡直播别人听不到声音(声卡直播别人听不见声音是怎么回事)

    声卡直播别人听不到声音(声卡直播别人听不见声音是怎么回事)

  • 内存条1rx8和2rx8区别(内存条1rx8和2rx8性能差别大吗)

    内存条1rx8和2rx8区别(内存条1rx8和2rx8性能差别大吗)

  • amd3500x相当于i几(amd3500x相当于英特尔啥cpu)

    amd3500x相当于i几(amd3500x相当于英特尔啥cpu)

  • 手机指纹解锁不灵敏是怎么回事(手机指纹解锁不见了怎么办)

    手机指纹解锁不灵敏是怎么回事(手机指纹解锁不见了怎么办)

  • 电信路由器默认密码是什么(电信路由器默认地址)

    电信路由器默认密码是什么(电信路由器默认地址)

  • 查找我的iphone未找到位置是什么意思(查找我的iphone未更新)

    查找我的iphone未找到位置是什么意思(查找我的iphone未更新)

  • ipad的小白点在哪里设置(ipad小白点不见了)

    ipad的小白点在哪里设置(ipad小白点不见了)

  • 小米cc9e支持闪充吗(小米cc9pro闪充)

    小米cc9e支持闪充吗(小米cc9pro闪充)

  • 微信电话显示对方忙是为什么(微信电话显示对方没有添加你为朋友)

    微信电话显示对方忙是为什么(微信电话显示对方没有添加你为朋友)

  • 京东差评怎么删除

    京东差评怎么删除

  • 拼多多拼单是啥意思(拼多多拼单是啥意思,发货时间)

    拼多多拼单是啥意思(拼多多拼单是啥意思,发货时间)

  • 为什么iphone8经常不能离脸亮屏(苹果8为什么老是闪退怎么办)

    为什么iphone8经常不能离脸亮屏(苹果8为什么老是闪退怎么办)

  • React中useReducer的理解与使用(react usereducer)

    React中useReducer的理解与使用(react usereducer)

  • 从 jQuery 到 Vue3 的快捷通道(jquery vue.js)

    从 jQuery 到 Vue3 的快捷通道(jquery vue.js)

  • 阴影进阶,实现更加的立体的阴影效果!(阴影等级是什么)

    阴影进阶,实现更加的立体的阴影效果!(阴影等级是什么)

  • 职工福利费的税额
  • 一般纳税人的进销项税怎么做分录
  • 一般纳税人转小规模最新政策2022
  • 递延所得税资产和递延所得税负债
  • 资产总额增长幅度怎么算
  • 交强险怎么查
  • 分公司预缴企业所得税总公司可以抵扣吗
  • 以前年度费用调减
  • 完税证明必须本人办理吗
  • 建筑工程勘察费占设计费的比例
  • 个税个人减免
  • 资产损失税前扣除是什么意思
  • 购入材料用于安装工程
  • 高新技术企业如何查询
  • 金税盘维护费减免政策代码
  • 个体工商户多久不用自动注销
  • 同一控制下企业合并会产生商誉吗
  • 企业购买机械设备是否需要进行过户登记
  • 公司发的奖金可以直接公司账户转账给员工吗?
  • 个体工商户转为个人独资企业
  • 发票停票会自动恢复吗
  • 技术转让开具什么发票
  • 企业购入新能源电车需要缴纳印花税吗
  • 固定资产实物归哪个部门管理
  • 企业筹建期间可以自己发农民工工资么
  • 固定资产报多好还是报少好
  • 收到投资款如何记账
  • windows无法连接到打印机指定的网络名不再可用
  • 监理费的付款比例
  • 公务接待和商务接待自查
  • bios boot设置
  • 质量扣款入什么科目
  • 销售商品尚未发出会计分录
  • 冲销多计提所得税
  • win7无法打开打印机
  • 银行承兑汇票挂失手续费收费标准
  • 抵扣进项税额的几种情况是
  • oss使用场景
  • 自产自销农产品发票如何开具
  • php接口验证
  • 微信支付扫码支付顺序
  • 其他应收款待抵扣进项
  • 只有进项发票,没有销项可以吗
  • 固定资产的主要风险有哪些
  • 增值税发票抵扣期限是多久
  • 发票未报销可以退税吗
  • 现金发放工资会计科目怎么写
  • 出版社出版带有编码吗
  • 工资税预扣
  • 资本公积的用途主要用于
  • 无票收入增值税怎么申报
  • 合伙企业分配利润法律依据
  • 困难企业社保费返还
  • 房屋租赁费可以加计扣除吗
  • 第三方支付利息
  • 滞纳金一般什么时候交
  • 暂估入库成本差异
  • 公司赠送客户礼品怎么做账
  • 企业经营状态为清算是什么意思
  • 有限合伙企业应纳税所得额的计算
  • 商业承兑汇票如何开具
  • 企业自查补交增值税
  • 基于Sql Server通用分页存储过程的解决方法
  • mysql5.7.20安装
  • xp系统内存不能为read的解决方法
  • 一个mac多重
  • linux apache2配置
  • win8桌面在哪
  • windows怎么右键
  • win7插上u盘显示格式化怎么办
  • 寒江孤影原文
  • perl变量后拼接字符串
  • 究竟什么是幸福
  • jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
  • 烟叶的增值税税率9
  • 广东税务局账号登录
  • 简述会计估计及其特点
  • 中山大学税务硕士
  • 会计专业有必要读博士吗
  • 会计的各种税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设