今天给大家分享一下基于angularjs与ionic框架实现手机二维码扫描的功能。没有用到cordova等任何插件，h5＋实现的。

开发工具：hbuilder

首先，需要在hbuilder项目下面的配置文件里面引入“Barcode”的配置，具体步骤：

1.找到“manifest.json”文件，右键打开，切换到代码试图

2.在里面，可以看到"permissions"，直接添加

"Barcode": {
"description": "二维码扫描"
},这个配置就可以了。下面贴出图片供大家参考，，

其次，废话不多说，直接上代码截图了。

中间我画红圈的就是二维码显示的区域，这个是页面的代码。下面是js代码。

我圈出来的都是关键部分，在官网上面都有详细的解释，这里就不多哔哔了。请记住，在这个js执行之前一定要移动设备判断，否则在浏览器调试会报错。

最后，官网地址：http://www.html5plus.org/doc/zh_cn/barcode.html

angularjs+ionic+'h5+'实现二维码扫描功能的更多相关文章

  1. iOS 自带二维码扫描功能的实现

    自从iOS7以后中新增了二维码扫描功能.因此可以在不借助第三方类库的情况下简单的写出二维码的扫描功能: 原生的二维码扫描功能在AVFoundation框架下,所以在使用原生的二维码扫描功能时要先导入A ...

  2. 有关iOS系统中调用相机设备实现二维码扫描功能的注意点（3/3）

    今天我们接着聊聊iOS系统实现二维码扫描的其他注意点. 大家还记得前面我们用到的输出数据的类对象吗?AVCaptureMetadataOutput,就是它!如果我们需要实现目前主流APP扫描二维码的功 ...

  3. IOS开发---菜鸟学习之路--（二十）-二维码扫描功能的实现

    本章将讲解如何实现二维码扫描的功能 首先在github上下载ZBar SDK地址https://github.com/bmorton/ZBarSDK 然后将如下的相关类库添加进去 AVFoundati ...

  4. Android集成二维码扫描功能

    文章转载自  https://github.com/yipianfengye/android-zxingLibrary 在具体介绍该扫描库之前我们先看一下其具体的使用方式,看看是不是几行代码就可以集成 ...

  5. mui 二维码扫描功能

    mui 扫一扫识别二维码 以及多次扫码后从结果页返回时黑屏问题解决  扫一扫页面全部代码 <!doctype html><html>     <head>      ...

  6. Android二维码扫描功能的集成开发

    二维码开发主要依赖ZXing开源项目 项目地址:https://github.com/zxing/zxing 这个开源项目可以扫描一维,和二维码, 一维码指的是书后面的条形码 首先配置ZXing库和A ...

  7. Android实现二维码扫描功能

    1.效果预览 先上图展示效果(模拟器没有摄像头,录出来效果不好,将就看) 2.集成步骤 1.拷贝本项目demo中的com.google.zxing5个包引入到自己的项目中. 2.拷贝本项目demo中的 ...

  8. 使用ionic2开发一个二维码扫描功能

    界面添加一个按钮: <button ion-button block color="secondary" class="Scan-button" (cli ...

  9. Android仿微信二维码扫描

    转载:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一 ...

随机推荐

  1. 求字符数组逆序数（poj1007）

    int InversionNumber(char* s,int len) { int ans=0;  //s逆序数 int A,C,G;  //各个字母出现次数,T是最大的,无需计算T出现次数 A=C ...

  2. MicroPython之TPYBoard v102开发板控制OLED显示中文

    转载请以链接形式注明文章来源,公众号:MicroPython玩家汇 0x00前言 之前看到一篇文章是关于TPYBoardv102控制OLED屏显示的,看到之后就想尝试一下使用OLED屏来显示中文.最近 ...

  3. display:box；display:flex；弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

  4. ul li自适应居中导航

    <BODY> <div class="box"> <ul class="nav"> <li>邮箱管理</l ...

  5. hadoop集群篇--从0到1搭建hadoop集群

    一.前述 本来有套好好的集群,可是不知道为什么虚拟机镜像文件损坏,结果导致集群不能用.所以不得不重新搭套集群,借此机会顺便再重新搭套吧,顺便提醒一句大家,自己虚拟机的集群一定要及时做好快照,最好装完每 ...

  6. OpenCascade Ruled Surface

    OpenCascade Ruled Surface eryar@163.com Abstract. A ruled surface is formed by moving a line connect ...

  7. webapi框架搭建-日志管理log4net

    前言 本篇讲怎么在前几篇已经创建好的项目里加上日志处理机制,我们采用Log4net技术.跟多的log4net技术的细节请查阅log4net的官网. log4net官网:http://logging.a ...

  8. 【读书笔记】【深入理解ES6】#9-JavaScript中的类

    大多数面向对象的编程语言都支持类和类继承的特性,而JavaScript却不支持这些特性,只能通过其他方法定义并关联多个相似的对象.这个状态一直从ECMAScript 1持续到ECMAScript 5. ...

  9. 9、ABPZero系列教程之拼多多卖家工具 拼团提醒类库封装

    本篇开始正式做功能,我在开发拼团提醒之前,拼多多并没有放出拼团人数不足就提醒卖家的功能. 有这个想法主要来源于朋友的抱怨,我想这应该是大部分卖家的心声吧. 经过分析,拿到了几个api,不要问我api怎 ...

  10. eclipse自动提示功能没了的解决方法

    eclipse没有自动提示功能,也就是当一个对象居然点不出他的相关方法.后来网上搜索了下,成功的 办法是. 1.我window->Preferences->Java->Editor- ...