zoukankan      html  css  js  c++  java
  • 使用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;
    	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,这个可以改成扫描成功后的函数或者你们自己想要做的事情。

  • 相关阅读:
    final关键字
    海思NB-IOT的SDK看门狗的使用
    IAR环境下编译CC2640入门开发
    股票操作记录180613(2)
    股票操作笔记18年6月13(1)
    PyYAML学习第一篇
    片仔癀犯过的错误
    2018年5月份片仔癀最佳演员奖
    2018-05-22两只垃圾基金南方产业活力000955和鹏华全球高收益债券000290
    linux c编程:网络编程
  • 原文地址:https://www.cnblogs.com/maomao93/p/7253674.html
Copyright © 2011-2022 走看看