使用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;
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时，调用摄像头扫描二维码的更多相关文章
- C# winfrom调用摄像头扫描二维码(完整版)
前段时间看到一篇博客,是这个功能的,参考了那篇博客写了这个功能玩一玩,没有做商业用途.发现他的代码给的有些描述不清晰的,我就自己整理一下发出来记录一下. 参考博客链接:https://www.cnbl ...
- h5端呼起摄像头扫描二维码并解析
2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia ...
- App阅读pdf和扫描二维码功能
在之前开发的Android手机App中,需要实现阅读pdf和扫描二维码的功能,在github 上找到大牛封装好包,亲测可用. 阅读pdf: https://github.com/barteksc/An ...
- c# winform调用摄像头识别二维码
首先我们需要引用两个第三方组件:AForge和zxing. Aforge是摄像头操作组件,zxing是二维码识别组件.都是开源项目.避免重复造轮子. 其实一些操作代码我也是参照别人的,若侵犯您的版权, ...
- Win10 UWP开发：摄像头扫描二维码/一维码功能
这个示例演示整合了Aran和微软的示例,无需修改即可运行. 支持识别,二维码/一维码,需要在包清单管理器勾选摄像头权限. 首先右键项目引用,打开Nuget包管理器搜索安装:ZXing.Net.Mobi ...
- 在WPF中开启摄像头扫描二维码(Media+Zxing)
近两天项目中需要添加一个功能,是根据摄像头来读取二维码信息,然后根据读出来的信息来和数据库中进行对比显示数据. 选择技术Zxing.WPFMediaKit.基本的原理就是让WPFmediaKit来对摄 ...
- Vue-cli4 唤醒摄像头扫描二维码
<template> <div class="scan"> <div id="bcid"> <div id=" ...
- 打开手机摄像头扫描二维码或条形码全部操作（代码写的不好，请提出指教，共同进步，我只是一个Android的小白）
(1)下载二维码的库源码 链接:http://pan.baidu.com/s/1pKQyw2n 密码:r5bv 下载完成后打开可以看到 libzxing 的文件夹,最后添加进 Android Stu ...
- 制作IOS企业版App网页扫描二维码下载安装
有时候我们需要在XX网站的主页上去扫描二维码下载,那么ios开发中如何做到这一点呢. 我给大家解答一下,这也是在最近工作中用到的部分,在网上了解了一些. 下面给大家分解一下步骤: 1.Plist 和 ...
随机推荐
- 初步学习pg_control文件之四
接前文,初步学习pg_control文件之三 继续分析 何时出现 DB_SHUTDOWNING状态: 在正常的shutdown的时候,需要进行checkpoint,所以就在此处,设置pg_contr ...
- 类的__new__方法使用
class Person(object): def __init__(self): self.name ="aaa" def defineName(self): self.name ...
- 步骤：asp.net core中使用identifyserver4颁发令牌
使用IdentityServer4颁发令牌基本步骤如下: 在 Startup.Configure 方法调用 app.UseIdentityServer ,添加IdentityServer4到应用的 H ...
- 失败的尝试，使用继承扩展数组，以及ES6的必要性
我们都知道直接在原生对象上扩展对象是很不好的.所以prototype这样的库广受非议. 一些库,比如lodash采用了工具包形式的扩展方式,绕开了对象的继承. 由于es6的class的出现,我尝试以A ...
- Qt 隐藏标题栏可移动升级版
在最出的时候,在Qt程序隐藏标题栏的情况下,实现界面可拖拽移动,是鼠标在在程序界面的任意位置都可以,现在这个版本是需要鼠标在程序界面的特定位置开可以 上代码 static QPoint last(0, ...
- 09-Mysql数据库----外键的变种
本节重点: 如何找出两张表之间的关系 表的三种关系 一.介绍 因为有foreign key的约束,使得两张表形成了三种了关系: 多对一 多对多 一对一 二.重点理解如果找出两张表之间的关系 分析步骤: ...
- Spring实战第九章学习笔记————保护Web应用
保护Web应用 在这一章我们将使用切面技术来探索保护应用程序的方式.不过我们不必自己开发这些切面----我们将使用Spring Security,一种基于Spring AOP和Servlet规范的Fi ...
- 6.爬虫 requests库讲解 总结
requests库的总结: 用ProcessOn根据前面的几节内容做了个思维导图:
- 关于Android Studio启动后自己的配置
根据Android Stduio自己设置的配置,我们在执行一些操作时可能不向教程那样,此时就要看教程上的Android Stduio的设置.
- C# Lambda表达式使用累加器例子
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Lamb ...