現在前端技術發展飛快,前端都能做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,這個可以改成掃描成功后的函數或者你們自己想要做的事情。