使用vue做移动app时，调用摄像头扫描二维码
Posted 疾风_剑豪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用vue做移动app时，调用摄像头扫描二维码相关的知识，希望对你有一定的参考价值。
现在前端技术发展飞快，前端都能做app了，那么项目中，也会遇到调用安卓手机基层的一些功能，比如调用摄像头，完成扫描二维码功能
下面我就为大家讲解一下，我在项目中调用这功能的过程。
首先我们需要一个中间框架，hbuilder
http://www.html5plus.org/doc/zh_cn/accelerometer.html 这个是html5+的文档地址，我们找到Barcode模块，
有这么多，然后我们往下找
找到这段代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Barcode Example</title> <script type="text/javascript" > // 扩展API加载完毕后调用onPlusReady回调函数 document.addEventListener( "plusready", onPlusReady, false ); // 扩展API加载完毕，现在可以正常调用扩展API function onPlusReady() { var e = document.getElementById("scan"); e.removeAttribute( "disabled" ); } var scan = null; function onmarked( type, result ) { var text = \'未知: \'; switch(type){ case plus.barcode.QR: text = \'QR: \'; break; case plus.barcode.EAN13: text = \'EAN13: \'; break; case plus.barcode.EAN8: text = \'EAN8: \'; break; } alert( text+result ); } function startRecognize() { scan = new plus.barcode.Barcode(\'bcid\'); scan.onmarked = onmarked; } function startScan() { scan.start(); } function cancelScan() { scan.cancel(); } function setFlash() { scan.setFlash(); } </script> <style type="text/css"> *{ -webkit-user-select: none; } html,body{ margin: 0px; padding: 0px; height: 100%; } #bcid { background:#0F0; height:480px; width:360px; } </style> </head> <body > <input type=\'button\' onclick=\'startRecognize()\' value=\'创建扫描控件\' /> <input type=\'button\' onclick=\'startScan()\' value=\'开始扫描\' /> <input type=\'button\' onclick=\'cancelScan()\' value=\'取消扫描\' /> <input type=\'button\' onclick=\'setFlash()\' value=\'开启闪光灯\' /> <div id= "bcid"></div> <input type=\'text\' id=\'text\'/> </body> </html>
这段代码，一定要放在我们vue的index.html页面里，别问我为什么，我也不知道，反正就是要全局
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady() {
var e = document.getElementById("scan");
e.removeAttribute( "disabled" );
}
var scan = null;
我写的是这样的,这代码是放在methods里面的
startRecognize() {
scan = new plus.barcode.Barcode(\'bcid\');
scan.onmarked = onmarked;
this.startScan
}
startScan () {
scan.start();
}
如果你们试了不行，那就在startRecognize函数内加一个setTimeout,延迟个200ms，我试了是可以使用的，扫描成功后会有个alert，这个可以改成扫描成功后的函数或者你们自己想要做的事情。
以上是关于使用vue做移动app时，调用摄像头扫描二维码的主要内容，如果未能解决你的问题，请参考以下文章
html5移动端页面上调用手机摄像头扫描二维码并获取二维码信息代码？