Cordova各个插件使用介绍系列(二)—$cordovaBarcodeScanner扫描二维码与生成二维码

详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-2-cordovabarcodescanner/

这是一个用来扫描二维码的cordova插件,在做项目的时候想实现类似于微信的扫一扫功能,就想到了cordova的$cordovaBarcodeScanner插件,用很少量的代码就可以实现了,下面来看一下具体的实现步骤:

一、扫描二维码:

1、首先需要有一个简单的项目,然后在命令行输入添加插件的命令:

cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git

2、在HTML中的代码如下,就是写了一个ng-click事件来触发此功能:

<div class="card">
<div class="item">
<button class="button button-block button-positive" ng-click="scanStart()">
<i class="icon ion-qr-scanner"></i>
Scan Now
</button>
</div>
</div>
<div class="card">
<div class="item item-divider">Scan Results</div>
<div class="item item-text-wrap">
{{barcodeData}}
</div>
</div>

3、在JS中的代码如下,这个代码写在相应的控制器里并且依赖‘$cordovaBarcodeScanner’,记得在app.js里依赖‘ngCordova’,:

$scope.scanStart = function () {

$cordovaBarcodeScanner
.scan()
.then(function (barcodeData) {
alert(barcodeData);
$scope.barcodeData = barcodeData;
// Success! Barcode data is here
}, function (error) {
alert(‘失败‘)
// An error occurred
});
};

4、这样子就可以运行到手机上来扫描了,但是在实现了扫描的功能之后还有一个问题,如果是类似于微信的扫描的话,还需要生成属于自己的二维码,这个我看了下ngCordova的官方文档(http://ngcordova.com/docs/plugins/barcodeScanner/),文档中有这个功能的代码,但是现在似乎是不完善,所以用不了!!因此,我就找了一些用js生成二维码的方法。

二、生成二维码:

1、需要下载qrcode.js和jquery.js,可以到网上随便找有很多,这里提供一下可以下载的地方(https://github.com/davidshimjs/qrcodejs/),下载到本地之后引入到项目中

2、相关HTML的代码如下:

<div id="qrcode">
</div>

3、相关JS的代码如下:

var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 96,//设置宽高
height: 96
});
qrcode.makeCode("http://www.baidu.com");

快来试一下吧,这样子就生成了独一无二的二维码了,不过我还是期待codova官方的插件啊,希望早一点能用!

时间: 2024-10-05 04:26:03

Cordova各个插件使用介绍系列(二)—$cordovaBarcodeScanner扫描二维码与生成二维码的相关文章

Cordova各个插件使用介绍系列(一)—$cordovaSms发送短信

详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-2-cordovabarcodescanner/ 这是一个用来扫描二维码的cordova插件,在做项目的时候想实现类似于微信的扫一扫功能,就想到了cordova的$cordovaBarcodeScanner插件,用很少量的代码就可以实现了,下面来看一下具体的实现步骤: 扫描二维码: 1.首先需要有一个简单的项目,然后在命令行输入添加插件的命令: cor

Cordova各个插件使用介绍系列(四)—canvas2ImagePlugin保存二维码到手机本地

详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-4-canvas2imageplugin/ 在前面几篇文章中简单写了一下,在项目中怎么实现扫描的功能和将信息转化为二维码的功能,现在来介绍一下怎么将生成的二维码保存到手机的本地,这样关于二维码的内容基本上就全面了,好开心~~! 同样的,我还是想说,首先我这个是做基于ionic+ngCordova+Anjularjs的项目,所以,希望大家在看之前已经了解

Cordova各个插件使用介绍系列(五)—$cordovaGeolocation获取当前位置

详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-5-cordovageolocation/ $cordovaGeolocation是可以获取当前位置的ngCordova插件,在项目中应用到,在这里讲解一下: 1.首先需要下载此插件,命令是: cordova plugin add cordova-plugin-geolocation 2.在JS中的代码如下,这个代码写在相应的控制器里并且依赖‘$cordo

Cordova各个插件使用介绍系列(三)—$cordovaImagePicker从手机图库选择多张图片

宣传vcxb

前端生成二维码插件jquery.qrcode.min.js

1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq.能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 闲话少说,看demo吧!(haha...) 2.快速使用demo 简单介绍:这是一款快速应用案例,没有太特殊的需求的话够用了.鉴于需求,本例是把二维码生成了图片,可以保存到手机,然后发送给好友,直接识别二维码. 1 <!DOCTYPE html> 2 <html> 3 &

cordova 常用插件

一.插件相关常用命令 1.查看所有已经安装的插件    cordova plugin ls  2.安装插件(以camera插件为例)    cordova plugin add cordova-plugin-camera  3.删除插件(以camera插件为例)    cordova plugin rm cordova-plugin-camera  4.更新插件    cordova plugin update 二.常用的Cordova插件 1.Console(调试控制台)    让程序可以在控

Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO

要求 必备知识 本文要求基本了解 Html/CSS,  JavaScript/JQuery. 开发环境 Dreamweaver CS6 / Chrome浏览器 演示地址 演示地址 资料下载 测试预览截图(抬抬你的鼠标就可以看到演示地址哦): 程序核心代码看这里: $(function(){ function show(){ var colors=["#BA4A3A","#5BB5D6","#8EA83B","#EE5C92",

Xcode Alcatraz插件管理介绍和使用

Xcode Alcatraz插件管理介绍和使用http://www.jianshu.com/p/7a2484123bf6 1.简介 Alcatraz是一个能帮你管理Xcode插件丶模版及颜色配置的工具.它可以直接集成在Xcode的图形界面中,让你感觉就像在使用Xcode自带的功能一样. 2.安装和删除 使用如下的终端来安装Alcatraz: curl -fsSL https://raw.github.com/supermarin/Alcatraz/master/Scripts/install.s

百度广告cordova/phonegap插件使用教程

百度联盟cordova/phonegap插件,是一个方便html5开发着使用的百度广告插件,能很方便的在html5混合应用如cordova,xdk,appcan,webx5,jqmobile.sencha touch,ionic中接入百度ssp联盟广告, ios和android应用都支持,代码完全一样无需修改. 使用过程如下 安装cordova/phonegap百度广告插件 我最开始是使用的cordova命令行直接通过github远程的方式安装,在命令行中输入 cordova plugin ad