Vue移动端实现调用相机扫描二维码或条形码的全过程
目录
- 一、开发前的准备
- 二、实现效果图
- 三、具体操作实现
- 总结
一、开发前的准备 实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能(详见 概述 | 微信开放文档),或者支付宝 H5 开放的API(详见 支付宝H5开放文档)。
但是这两者都会比较麻烦且有一定的局限性,微信的扫一扫只能在微信里用,而且还需要公众号认证等配置操作。支付宝在内置 App 内可以同时识别二维码和条形码,但外部调用的 API 无法一次性同时识别,只能分开识别。
我这里就提供一个直接使用的开源库:https://github.com/zxing-js/library,本人移动端前端开发的框架是 Vue,组件库用的是 Vant,本文方案只要开发时用的电脑具有摄像头就可以实现效果预览。
二、实现效果图 这里分享两个在线工具
【Vue移动端实现调用相机扫描二维码或条形码的全过程】1、免费在线条形码生成器-条码生成制作工具
2、草料二维码生成器 或者 点击这里
![Vue移动端实现调用相机扫描二维码或条形码的全过程](http://img.readke.com/220831/1421392496-0.jpg)
文章图片
![Vue移动端实现调用相机扫描二维码或条形码的全过程](http://img.readke.com/220831/1421392F6-1.jpg)
文章图片
![Vue移动端实现调用相机扫描二维码或条形码的全过程](http://img.readke.com/220831/14213a350-2.jpg)
文章图片
![Vue移动端实现调用相机扫描二维码或条形码的全过程](http://img.readke.com/220831/1421396021-3.jpg)
文章图片
可以看到这样操作不用经过任何打包(有的需要打包成 app 才行)、部署(有的需要部署到 https 的服务器才行)、配置(前面说的诸如微信开发的配置等...)。
三、具体操作实现 1、安装。
npm install @zxing/library --save
2、假设场景:页面上有个按钮,点击触发扫码功能 @click='scanCode()',在 methods 写入该方法。
scanCode() {console.log('浏览器信息', navigator.userAgent); this.$router.push({path: '/scanCodePage'}); }
同时在 vue-router 写入对应页面的路由。
{ title: '扫码页面', name: 'scanCodePage', path: '/scanCodePage', component: () => import('@/views/scanCodePage.vue') }
3、扫码页面代码,通过与 video 标签结合使用,把以下代码直接全部拷贝到新建的一个 scanCodePage.vue 文件里使用,读者在注释的地方自行根据需求,编写后续的业务代码即可。
{{tipMsg}} .scan-index-bar{background-image: linear-gradient( -45deg, #42a5ff ,#59cfff); }.van-nav-bar__title{color: #fff !important; }.scan-video{height: 80vh; }.scan-tip{width: 100vw; text-align: center; margin-bottom: 10vh; color: white; font-size: 5vw; }.page-scan{overflow-y: hidden; background-color: #363636; } 取消
总结 到此这篇关于Vue移动端实现调用相机扫描二维码或条形码的文章就介绍到这了,更多相关Vue调用相机扫描二维码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- vue+elementUI封装一个根据后端变化的动态table(完整代码)
- Vue实现上拉加载下一页效果的示例代码
- 错题集|ELK——elasticsearch 9200端口无法启动
- vue的事件总线|vue2 eventbus的实现原理
- vue3发布订阅者模式|vue3的EventBus库(mitt)与mitt的使用方式
- 心如意共享秤经过几个月的运营,受到了终端用户和代理商的普遍好评
- 钛极客|OPPO发布全新ColorOS 13,以及首个智慧跨端系统潘塔纳尔
- JAVA后端面试|java 8 stream API
- 前端高频面试题(二)(附答案)
- 前端高频面试题(一)(附答案)