使用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,這個可以改成掃描成功后的函數或者你們自己想要做的事情。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM