mui+html5+实现扫描二维码操作

利用：barcode

Barcode模块管理条码（一维码和二维码）扫描识别，支持常见的一维码（如EAN13码）及二维码（如QR码）。通过调用设备的摄像头对条码进行扫描识别，扫描到条码后进行解码并返回码数据内容及码类型。

Barcode模块可使得Web开发人员能快速方便调用设备的摄像头进行条码扫描识别，而不需要安装额外的扫描插件。规范建议条码识别引擎的支持规范定义的所有条码常量类型。

https://www.html5plus.org/doc/zh_cn/barcode.html

例子：

1，先创建一个html，主要当点击按钮的时候就跳转到显示二维码扫描的页面去。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><script src="js/mui.min.js"></script><link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body><header class="mui-bar mui-bar-nav"><h1 class="mui-title">二维码</h1></header><div class="mui-content"><button type="button" class="mui-btn mui-btn-blue" id="scan">扫描二维码</button></div><script type="text/javascript" charset="utf-8">mui.init();mui.plusReady(function(){mui("#scan")[0].addEventListener("tap",function(){//打开一个页面，用来进行扫描操作mui.openWindow({url:'email.html',id:'email.html'})})})</script>
</body>
</html>

,2，显示显示二维码操作的页面

html:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><script src="js/mui.min.js"></script><link href="css/mui.min.css" rel="stylesheet"/></head>
<body><header class="mui-bar mui-bar-nav" ><h1 class="mui-title">扫描操作</h1></header><div class="mui-content"><div id="scan" style="width: 100%;height: 500px;"></div></div><script type="text/javascript" charset="utf-8">mui.init();mui.plusReady(function(){//Barcode模块管理条码（一维码和二维码）扫描识别，支持常见的一维码（如EAN13码）及二维码（如QR码）。通过调用设备的摄像头对条码进行扫描识别，扫描到条码后进行解码并返回码数据内容及码类型。//Barcode模块可使得Web开发人员能快速方便调用设备的摄像头进行条码扫描识别，而不需要安装额外的扫描插件。规范建议条码识别引擎的支持规范定义的所有条码常量类型。//https://www.html5plus.org/doc/zh_cn/barcode.html//创建二维码摄像头对象var barcode = new plus.barcode.Barcode('scan');//扫码识别成功事件barcode.onmarked = function(type, code, file){console.log(type);console.log(code);console.log(file);//扫描完打开路径：//调用第三方程序打开指定的URLplus.runtime.openURL(code);}  //调用设备的摄像头在控件中预览，并获取捕获数据进行扫码识别，当识别出条码（二维码）数据时触发onmarked事件返回扫码结果。        //      barcode.start(options);})</script>
</body>
</html>

扫描的是该二维码：

输出效果：

mui+html5+实现扫描二维码操作相关推荐

MUI 结合 HTML5+ 实现的二维码扫描功能
扫码登录的实现原理原理解释: 接下来就是对于这个服务的详细实现.首先,大概说一下原理:用户打开网站的登录页面的时候,向浏览器的服务器发送获取登录二维码的请求.服务器收到请求后,随机生成一个uuid, ...
基于MUI框架的使用HTML5+实现的二维码扫描功能
Barcode的一个实现案例一.简介 Barco ...
【微信公众号】微信集成功能--扫描二维码完成用户登录操作
目录需求来源实现思路 1.进入登录页面,生成微信公众号的临时二维码: 2.用户通过微信扫一扫二维码: 3.登录页面定时查询扫码结果: 代码实现(基于Laravel框架前后端混合) HTML PHP ...
实现手机扫描二维码页面登录，类似web微信-第一篇，业务分析
关于XMPP组件的文章,先休息两天,好歹已经完整的写了一份. 这两天,先实现一套关于web微信扫描二维码页面登录的试验,因为这种模式在我们的很多业务场景里大有前途. 首先介绍一下web微信登录的过程 ...
扫描二维码读取文档_使用深度学习读取和分类扫描的文档
扫描二维码读取文档 To many people's dismay, there is still a giant wealth of paper documents floating out the ...
Teams App 扫描二维码
上篇文章我们讲了如何在app的manifest里设置设备的权限,这篇文章我们来实际操作开发一个可以扫描二维码的teams app. 首先,我们先到app studio里,创建一个teams app,然 ...
电脑扫描二维码_线上分享 | 网络工作坊：平板电脑工作术
澳门生产力暨科技转移中心将于9月29日下午3时,举办资讯科技工具应用线上工作坊,讲解平板电脑办公应用,欢迎有兴趣人士报名,名额有限,先到先得. 该中心早前已举办是次主题的应用工作坊,坊间反应积极,因此 ...
h5端呼起摄像头扫描二维码并解析
2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia ...
SNF开发平台WinForm-平板拍照及扫描二维码功能
在我们做项目的时候,经常会有移动平板处理检验,审核等,方便移动办公.这时就需要在现场拍照上传问题,把当场问题进行上传,也有已经拍完照的图片或加工过的图片进行上传.还有在车间现场一体机,工控机这种产物 ...

mui+html5+实现扫描二维码操作

mui+html5+实现扫描二维码操作相关推荐

最新文章

热门文章