使用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 和 ...
随机推荐
- 44- EF + Identity实现
1-配置EF, 需要创建如下几个类 默认User主键为guid类型,现在改成int类型 namespace MvcCookieAuthSample.Models { public class Appl ...
- 查询各科成绩最高和最低的分：以如下形式显示：课程ID，最高分，最低分
SELECT L.C# As 课程ID,L.score AS 最高分,R.score AS 最低分 FROM SC L ,SC AS R WHERE L.C# = R.C# and L.score = ...
- python pip ,安装，卸载，查看等命令，不同版本
pycharm及python的使用说明 Python和 pycharm的使用 1. pycharm和Python 下载 安装后需要激活码.判断Python是否安装好了,cmd下跑: python ...
- python基础——重访类型分类
python基础--重访类型分类 对象根据分类来共享操作:例如,字符串.列表和元组都共享诸如合并.长度和索引等序列操作. 只有可变对象(列表.字典和集合)可以原处修改:我们不能原处修改数字,字符串.元 ...
- oracle 开启归档日志模式
摘自:https://www.jianshu.com/p/f8c0e9309ce2 在默认情况下,oracle数据库是在非归日志档模式中创建的,在非归档日志模式中,进行日志切换时会直接重写redo l ...
- 【APUE】Chapter3 File I/O
这章主要讲了几类unbuffered I/O函数的用法和设计思路. 3.2 File Descriptors fd本质上是非负整数,当我们执行open或create的时候,kernel向进程返回一个f ...
- Qt 贪吃蛇小游戏
简单的实现了走和变大的样子,剩下的还在完善 贴代码 #include "mainwindow.h" #include "ui_mainwindow.h" #in ...
- 第二十二篇 正在表达式 re模块
re模块****** 就本质而言,正则表达式时一种小型的,高度专业化的编程语言,在python里,它内嵌在python中,并通过re模块实现.正则表达式模式被编译成一系列的字节码.然后用C编写的匹配引 ...
- 05-Mysql数据库----补充内容
数据库命名规则: 数据库命名规则: 可以由字母.数字.下划线.@.#.＄ 区分大小写 唯一性 不能使用关键字如 create select 不能单独使用数字 最长128位 # 基本上跟python或者 ...
- vs code 代码格式化整理
vs code格式化代码的快捷键如下:(来源于这里) On Windows Shift + Alt + F On Mac Shift + Option + F On Ubuntu Ctrl + Shi ...