码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-02-19 14:20:17      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

详情链接地址: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官方的插件啊,希望早一点能用!

 

 

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

标签:

原文地址:http://www.cnblogs.com/xiaojun-zxj/p/5200551.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!