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

时间：2022-07-27 13:41:48

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

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

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

http://www.html5plus.org/doc/zh_cn/accelerometer.html 这个是html5+的文档地址，我们找到Barcode模块，

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

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

找到这段代码

<!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，这个可以改成扫描成功后的函数或者你们自己想要做的事情。

相关文章