现在前端技术发展飞快，前端都能做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. ES6--Set之再理解

    Set 其实2016年就看过阮大神的ECMAScript 6 入门,当时看了Set之后,大致看懂了,但事实上根本没有理解Set到底是什么,所以更记不住,平时做项目大多用到的还是ES5的传统写法,以至于 ...

  2. 关于xampp 集成开发包电脑重启mysql无法启动的问题

    关于xampp 集成开发包电脑重启mysql无法启动的问题. 在做php开发时,安装过xampp,也不知道是版本老了还是什么问题,总是出现当天晚上下班关机,第二天上班mysql不能启动,在网上查找些资 ...

  3. 20145202 2016-2017-2 《Java程序设计》第一周学习总结

    20145202 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 java是SUN公司推出的面相网络的编程语言. 特点:完全面向对象,与平台无关,跨平台性(例 ...

  4. 2002: [Hnoi2010]Bounce 弹飞绵羊

    2002: [Hnoi2010]Bounce 弹飞绵羊 https://www.lydsy.com/JudgeOnline/problem.php?id=2002 分析: 绵羊在弹飞的路径中相当于一棵 ...

  5. 创龙DSP6748开发板驱动LCD屏

    1. DSP6748内部有2个LCD控制器,Raster Controller 光栅控制器和the LCD Interface Display Driver (LIDD) controller 控制器 ...

  6. 【目录】Spring 源码学习

    [目录]Spring 源码学习 jwfy 关注 2018.01.31 19:57* 字数 896 阅读 152评论 0喜欢 9 用来记录自己学习spring源码的一些心得和体会以及相关功能的实现原理, ...

  7. 《.NET 微服务：适用于容器化 .NET 应用的体系结构》关键结论

    作为总结和要点,以下是本指南中最重要的结论.1 使用容器的好处: 基于容器的解决方案有节约成本的好处,因为容器是针对生产环境中缺少依赖而导致的部署问题提出的解决方案.容器能够显著改善devops和生产 ...

  8. model的index无限次数执行导致stackOverFlow

    model的index无限次数执行导致stackOverFlow

  9. 多版本python import 问题解决方案

    原文http://www.tuicool.com/articles/EnE7nm6 多版本Python共存[支持使用pip安装包] 有时特殊需要会要用到高版本的Python, 但是系统自带的版本又是很 ...

  10. Python 3.6 爬取BD电影网

    2018-07-10 #coding:utf-8 #coding:utf-8 from lxml import etree import requests import pandas import t ...