码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-07-29 11:27:20      阅读:5194      评论:0      收藏:0      [点我收藏+]

标签:控件   取消   one   发展   全局   event   org   二维   rem   

现在前端技术发展飞快,前端都能做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,这个可以改成扫描成功后的函数或者你们自己想要做的事情。

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

标签:控件   取消   one   发展   全局   event   org   二维   rem   

原文地址:http://www.cnblogs.com/maomao93/p/7253674.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!