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

时间：2024-11-10 18:35:30

现在前端技术发展飞快，前端都能做app了，那么项目中，也会遇到调用安卓手机基层的一些功能，比如调用摄像头，完成扫描二维码功能

下面我就为大家讲解一下，我在项目中调用这功能的过程。

首先我们需要一个中间框架，hbuilder

http:///doc/zh_cn/ 这个是html5+的文档地址，我们找到Barcode模块，

有这么多，然后我们往下找

找到这段代码

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Barcode Example</title>
	<script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数 
( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady() {
	var e = ("scan");
	( "disabled" );
}
var scan = null;
function onmarked( type, result ) {
	var text = '未知: ';
	switch(type){
		case :
		text = 'QR: ';
		break;
		case .EAN13:
		text = 'EAN13: ';
		break;
		case .EAN8:
		text = 'EAN8: ';
		break;
	}
	alert( text+result );
}
function startRecognize() {
	scan = new ('bcid');
	 = onmarked; 
}
function startScan() {
	();
}
function cancelScan() {
	();
}
function 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' οnclick='startRecognize()' value='创建扫描控件' />
		<input type='button' οnclick='startScan()' value='开始扫描' />
		<input type='button' οnclick='cancelScan()' value='取消扫描' />
		<input type='button' οnclick='setFlash()' value='开启闪光灯' />
		<div id= "bcid"></div>
		<input type='text' id='text'/>
	</body>
</html>

这段代码，一定要放在我们vue的页面里，别问我为什么，我也不知道，反正就是要全局

// 扩展API加载完毕后调用onPlusReady回调函数 
( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady() {
	var e = ("scan");
	( "disabled" );
}
var scan = null;

我写的是这样的,这代码是放在methods里面的

startRecognize() {
	scan = new ('bcid');
	 = onmarked;
        
}  
startScan () {
    ();
}

如果你们试了不行，那就在startRecognize函数内加一个setTimeout,延迟个200ms，我试了是可以使用的，扫描成功后会有个alert，这个可以改成扫描成功后的函数或者你们自己想要做的事情。

相关文章