今天给大家分享一下基于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. base64格式图片转换为FormData对象进行上传

    原理:理由ArrayBuffer.Blob和FormData var base64String = /*base64图片串*/; //这里对base64串进行操作,去掉url头,并转换为byte va ...

  2. JS中call,apply,bind方法的总结

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: ...

  3. css3实现梯形三角

    近期移动端项目中,图片很多 移动端尽量少图片,以便提升加载速度!这时候css3可以大放光芒比如梯形的背景图 --------------------------------- ------------ ...

  4. 如何将nupkg文件安装到VS2017

    本文为原创文章.源代码为原创代码,如转载/复制,请在网页/代码处明显位置标明原文名称.作者及网址,谢谢! 开发工具:VS2017 系统:Win10 X64 一.首先在https://www.nuget ...

  5. JAVA中的按值传递

    Java中只有按值传递,没有按引用传递! 方法参数共有两种类型: 基本数据类型 对象引用 一:基本数据类型 首先看一个小例子: package chuandi; public class Test1 ...

  6. 解读Scrum燃尽图

    我的Understand the burndown chart读书笔记. 什么是燃尽图: 在敏捷开发中,燃尽图主要用于显示某一特定时间段内团队的剩余工作量,从而了解团队状态和项目进度. 燃尽图其实很简 ...

  7. JPG .vs. PNG

    A summary of comparison between JPEG and PNG JPEG Pros Smaller file size than PNG Widely suppported ...

  8. 使用GitHub+hexo搭建个人独立博客

    前言 使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话 ...

  9. 用Vue中遇到的问题和处理方法

    用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...

  10. 【三十一】thinkphp之安装、配置、模块化及URL模式

    一:安装与配置 1.获取ThinkPHP 下载地址:http://www.thinkphp.cn/down.html 2.入口文件 ThinkPHP采用单一入口模式对项目进行部署和访问,所以我们需要通 ...