使用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 和 ...
随机推荐
- 为什么我要放弃javaScript数据结构与算法（第一章）—— JavaScript简介
数据结构与算法一直是我算比较薄弱的地方,希望通过阅读<javaScript数据结构与算法>可以有所改变,我相信接下来的记录不单单对于我自己有帮助,也可以帮助到一些这方面的小白,接下来让我们 ...
- Linux中java应用程序的部署，使其开机自动启动
初步需求:将在Windows/MyEclipse中开发的java应用程序部署到Linux服务器上,使其运行 针对需求,可以参考下面这些文章,但是这些文章很多东西没有提及到,我自己尝试部署运行 在lin ...
- Chrome也疯狂之Vimium插件
Chrome也疯狂之安装Vimium插件 由于最近换上了Mac,深感外设的累赘,脱离了外接鼠标以及键盘之后发现操作更加的流畅了(可怜我入手不到一年的机械键盘).当然脱离鼠标用触摸板来操作浏览器有时候还 ...
- 《python核心编程第二版》第5章习题
5-1 整形 讲讲 Python 普通整型和长整型的区别 答:普通整型 32位,长整数类型能表达的 数值仅仅与你的机器支持的(虚拟)内存大小有关 5-2 运算符(a) 写一个函数,计算并返回两个数的乘 ...
- python 基础篇 04(列表 元组 常规操作)
本节主要内容:1. 列表2. 列表的增删改查3. 列表的嵌套4. 元组和元组嵌套5. range 一. 列表1.1 列表的介绍列表是python的基础数据类型之一 ,其他编程语言也有类似的数据类型. ...
- DFS（5）——hdu1728逃离迷宫
一.题目回顾 题目链接:逃离迷宫 Problem Description 给定一个m × n (m行, n列)的迷宫,迷宫中有两个位置,gloria想从迷宫的一个位置走到另外一个位置,当然迷宫中有些地 ...
- edgeboxes proposal 和dpm 连接
经过多天阅读文献和代码,我对edgeboxes 和 dpm的有了一定了解. 现在决定把它们简单地连接起来 也就是edgeboxes proposal 推荐窗口 然后 dpm去判断 但按照我理解的DPM ...
- Android插件化框架
1. dynamic-load-apk/DL动态加载框架 是基于代理的方式实现插件框架,对 App 的表层做了处理,通过在 Manifest 中注册代理组件,当启动插件组件时,首先启动一个代理组件 ...
- PokeCats开发者日志（六）
现在是PokeCats游戏开发的第九天的晚上,终于将这玩意提交到360移动开放平台进行审核了. 貌似很多平台都需要看这个著作权证明,得了,那我就话400块钱走一遍流程玩玩吧! 办理著作权还 ...
- Pandoc中的Markdown语法
概述 Pandoc中支持扩展修订版本的Markdown语法 使用pandoc中支持的Markdown语法用 -f markdown 使用标准Markdown语法用 -f markdown_strict ...