现在前端技术发展飞快，前端都能做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时，调用摄像头扫描二维码的更多相关文章

  1. C# winfrom调用摄像头扫描二维码(完整版)

    前段时间看到一篇博客,是这个功能的,参考了那篇博客写了这个功能玩一玩,没有做商业用途.发现他的代码给的有些描述不清晰的,我就自己整理一下发出来记录一下. 参考博客链接:https://www.cnbl ...

  2. h5端呼起摄像头扫描二维码并解析

    2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia ...

  3. App阅读pdf和扫描二维码功能

    在之前开发的Android手机App中,需要实现阅读pdf和扫描二维码的功能,在github 上找到大牛封装好包,亲测可用. 阅读pdf: https://github.com/barteksc/An ...

  4. c# winform调用摄像头识别二维码

    首先我们需要引用两个第三方组件:AForge和zxing. Aforge是摄像头操作组件,zxing是二维码识别组件.都是开源项目.避免重复造轮子. 其实一些操作代码我也是参照别人的,若侵犯您的版权, ...

  5. Win10 UWP开发：摄像头扫描二维码/一维码功能

    这个示例演示整合了Aran和微软的示例,无需修改即可运行. 支持识别,二维码/一维码,需要在包清单管理器勾选摄像头权限. 首先右键项目引用,打开Nuget包管理器搜索安装:ZXing.Net.Mobi ...

  6. 在WPF中开启摄像头扫描二维码(Media+Zxing)

    近两天项目中需要添加一个功能,是根据摄像头来读取二维码信息,然后根据读出来的信息来和数据库中进行对比显示数据. 选择技术Zxing.WPFMediaKit.基本的原理就是让WPFmediaKit来对摄 ...

  7. Vue-cli4 唤醒摄像头扫描二维码

    <template> <div class="scan"> <div id="bcid"> <div id=" ...

  8. 打开手机摄像头扫描二维码或条形码全部操作（代码写的不好，请提出指教，共同进步，我只是一个Android的小白）

    (1)下载二维码的库源码 链接:http://pan.baidu.com/s/1pKQyw2n 密码:r5bv 下载完成后打开可以看到 libzxing 的文件夹,最后添加进 Android  Stu ...

  9. 制作IOS企业版App网页扫描二维码下载安装

    有时候我们需要在XX网站的主页上去扫描二维码下载,那么ios开发中如何做到这一点呢. 我给大家解答一下,这也是在最近工作中用到的部分,在网上了解了一些. 下面给大家分解一下步骤: 1.Plist 和 ...

随机推荐

  1. 数据库 MySQL part2

    表记录的操作 增 1.插入一条记录 语法:insert ［into］ tab_name (field1,filed2,.......) values (value1,value2,.......); ...

  2. 深度学习之卷积神经网络CNN

    转自:https://blog.csdn.net/cxmscb/article/details/71023576 一.CNN的引入 在人工的全连接神经网络中,每相邻两层之间的每个神经元之间都是有边相连 ...

  3. beanshell引用参数化数据

    步骤: 1.添加参数化组件CSV Data Set  Config: 2.添加beanshell preprocessor,引用变量: 验证: 2个线程,迭代2次,分别取了4个不同的值.

  4. No resources found. Error from server (NotAcceptable): unknown (get pods)

    问题:正确安装kubectl后,可查询到当前使用集群服务,也可切换不同的集群,但无法获取当前运行的pods的信息与所有的service,具体表现为 $ kubectl get po -nwx No r ...

  5. 不得不服！Python速度虽然慢，但是它工作效率很高！

    写在前面 让我们来讨论一个我最近一直在思考的问题:Python 的性能.顺便说一下,我是 Python 的忠实拥趸,我在各种情况下都会积极尝试使用 Python 来解决问题.大家对 Python 最大 ...

  6. HTML5 本地存储Web Storage简单了解

    ​HTML5本地存储规范,定义了两个重要的API :Web Storage  和  本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...

  7. CVPR2018: Generative Image Inpainting with Contextual Attention 论文翻译、解读

    注:博主是大四学生,翻译水平可能比不上研究人员的水平,博主会尽自己的力量为大家翻译这篇论文.翻译结果仅供参考,提供思路,翻译不足的地方博主会标注出来,请大家参照原文,请大家多多关照. 转载请务必注明出 ...

  8. hibernate延时加载机制

    延迟加载: 延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作.在Hibernate中提供了对实体对象的延迟加载以及对集合的延迟加载,另 ...

  9. [译]如何比较同一分支上的不同commit的代码区别？

    原文来源:https://stackoverflow.com/questions/3338126/how-do-i-diff-the-same-file-between-two-different-c ...

  10. SQL Server 使用分区函数实现查询优化

    在项目中遇到一个需求,需要在商家收藏信息中,获取到该商家发布的最新一条商品的发布时间,需求很简单,SQL语句也不复杂, select T_UserCollectMerchant.CollectID,T ...