vue调用手机扫描二维码

HbuilderX打包后在手机端或者模拟手机端测试 PC端无法测试；hBuilder打包后集成H5+sdk就可以直接用他们家的sdk了

效果图（代码直接CV即可用）

代码部分（代码直接CV即可用）

<button @click.native='startRecognize'>触发按钮</button>
<div id="bcid" :style='{zIndex:zIndex}'></div>   //JS部分
export default{components:{tabbar},data (){return {text:'',codeUrl: '',scan:'',zIndex:-1}},methods:{//初始化扫描控件startRecognize() { this.zIndex=9999let that = this;if (!window.plus) {return};// 初始化扫描控件this.scan = new plus.barcode.Barcode('bcid');this.scan.onmarked = onmarked; // 调用开始扫描 this.startScan()// 扫描后回调function onmarked(type, result, file) { switch (type) {case plus.barcode.QR:type = 'QR';break;case plus.barcode.EAN13:type = 'EAN13';break;case plus.barcode.EAN8:type = 'EAN8';break;default:type = '其它' + type;break;}result = result.replace(/\n/g, '');that.codeUrl = result;// 返回值//Toast(result);  that.zIndex=-1that.closeScan(); }},//开始扫描startScan() { if (!window.plus) return;this.scan.start();},//关闭扫描cancelScan() { if (!window.plus) return;that.zIndex=-1this.scan.cancel();},//关闭条码识别控件closeScan() { if (!window.plus) return;this.scan.close();}, }
}//css部分
<style >#bcid {width: 100%;position: absolute;left: 0;right: 0;top: 0;bottom:3rem;text-align: center;color: #fff; }
</style>

本文参考

http://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.scan
https://blog.csdn.net/qq_35844177/article/details/78951825

vue调用手机扫描二维码相关推荐

PC端调用摄像头扫描二维码，拿到二维码信息
PC端调用摄像头扫描二维码,拿到二维码信息 <template><el-dialogtitle="扫描设备二维码":visible.sync="dial ...
随机字符串解决大问题之腾讯网如何实现手机扫描二维码登录qq功能的
随机字符串解决大问题之腾讯网如何实现手机扫描二维码登录qq功能的腾讯网(www.qq.com)有一个扫码登录功能很有意思, 点击首页一键登录按钮,就会展现一个二维码,用手机qq扫描此二维码就可以使当 ...
C#生成二维码、调用摄像头扫描二维码
二维码的生成和解码,有两个开源项目可以参考: 一个是google的zxing,另外一个是ThroughWork. zxing做的很全面,支持各种语言和平台,具体不多讲,自己查去.ThroughWork ...
Vue 移动端实现调用相机扫描二维码或条形码
一.开发前的准备实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能(详见概述 | 微信开放文档),或者支付宝 H5 开放的API(详见?支付宝H5开放文档). 但是 ...
vue实现调用摄像头扫描二维码
安装依赖:vue-qrcode-reader npm install vue-qrcode-reader -s 直接上代码 <template><div><div cla ...
关于Unity调用摄像头扫描二维码与生成二维码的实现方法
1.常用的生成二维码网址 https://cli.im/ 2.上官网下载二维码插件 http://zxingnet.codeplex.com/ 3.将下载的插件中zxing.unity.dll文件放入 ...
HTML 5 手机扫描二维码登陆网页
首先声明我不是专业做前端的,只是一个java开发者,最近要做一个手机版的网站,但是需求要做类似于微信,扫描网页上的二维码登陆网页版微信,以当时认为这东西必须要APP才能支持,因为所有扫描二维码都是必须 ...
调用手机扫二维码并且识别其信息
A页面调用B页面 B页面是扫描页面需要在A页面中引用mui.css 和 mui.js A页面 <img src="../images/scanning.png" class ...
Java使用opencv调用微信扫描二维码引擎，附带windows和linux需要的动态库文件
前言最近公司项目有一个需求,要用二维码传递数据.于是使用了zxing生成和解析二维码,但是zxing扫描二维码原图还可以,一旦扫描用户使用手机拍摄的二维码,识别率急剧下降.尝试了对拍摄的照片进行降噪 ...
实现手机扫描二维码页面登录，类似web微信-第一篇，业务分析
关于XMPP组件的文章,先休息两天,好歹已经完整的写了一份. 这两天,先实现一套关于web微信扫描二维码页面登录的试验,因为这种模式在我们的很多业务场景里大有前途. 首先介绍一下web微信登录的过程 ...

vue调用手机扫描二维码

效果图（代码直接CV即可用）

代码部分（代码直接CV即可用）

vue调用手机扫描二维码相关推荐

最新文章

热门文章