现在前端技术发展飞快，前端都能做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. Eclipse报错:An internal error occurred during: "Building workspace". Java heap space），卡死解决办法

    在项目工程的根目录下,找到.project,用记事本打开,把两处删除掉: 第一处: <buildCommand> <name>org.eclipse.wst.jsdt.core ...

  2. 2016年JD工作遇到的问题：1-5，搭建环境和熟悉项目过程中的坑

    1.更新不需要权限的项目A,却提示没有权限. 先从Git上更新项目A的代码,提示没有权限. 然后从Git上更新其它项目B的代码,正常. 再更新项目A的代码,正常了. 奇葩问题! 2.Eclipse中, ...

  3. Accept 惊群现象测试perl脚本

    $uname -a Linux debian-11-34 3.16.0-4-amd64 #1 SMP Debian 3.16.7-ckt9-3~deb8u1 (2015-04-24) x86_64 G ...

  4. 「日常训练」 不容易系列之(3)—— LELE的RPG难题 （HDU 2045）

    题目简述 有排成一行的n" role="presentation">nn个方格,用红(Red).粉(Pink).绿(Green)三色涂每个格子,每格涂一色,要求任何 ...

  5. zabbix 2.2 调小监控值

    zabbix_agent默认disk下小于0%告警 调小到5% 组态 > 模板 选择需要的模板的触发器 例如 Template OS Windows 选择触发器 - 探索规则 - 触发器类型  ...

  6. 孤荷凌寒自学python第七十二天开始写Python的第一个爬虫2

    孤荷凌寒自学python第七十二天开始写Python的第一个爬虫2 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 直接上代码.详细过程见文末屏幕录像 ...

  7. devstack环境搭建

    1. devstack部署 参考Quick Start,推荐使用ubuntu16.04进行安装 1.1 配置ubuntu国内源 修改/etc/apt/sources.list内容为 deb http: ...

  8. Linux服务架设篇--ping命令

    工作原理: 向远程机发送包含一定字节数的ICMP数据包,如果能收到对方的回复的数据包,就表明网络是相通的,而且根据两个数据包的时间差,还可以知道相互之间网络链接的速度. 注意: 有些远程主机由于某种原 ...

  9. LeetCode - 20. Valid Parentheses(0ms)

    Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...

  10. static 关键字解析（转）

    static关键字解析   Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面 ...