使用vue做移动app时，调用摄像头扫描二维码

从来好事天生俭，自古瓜儿苦后甜。这篇文章主要讲述使用vue做移动app时，调用摄像头扫描二维码相关的知识，希望能为你提供帮助。
现在前端技术发展飞快，前端都能做app了，那么项目中，也会遇到调用安卓手机基层的一些功能，比如调用摄像头，完成扫描二维码功能
下面我就为大家讲解一下，我在项目中调用这功能的过程。
【使用vue做移动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=https://www.songbingjia.com/'创建扫描控件\' /> < input type=\'button\' onclick=\'startScan()\' value=https://www.songbingjia.com/'开始扫描\' /> < input type=\'button\' onclick=\'cancelScan()\' value=https://www.songbingjia.com/'取消扫描\' /> < input type=\'button\' onclick=\'setFlash()\' value=https://www.songbingjia.com/'开启闪光灯\' /> < 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里面的