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

二、在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>

三、在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
});
};

四、这样子就能够运行到手机上来扫描了，可是在实现了扫描的功能以后还有一个问题，若是是相似于微信的扫描的话，还须要生成属于本身的二维码，这个我看了下ngCordova的官方文档（http://ngcordova.com/docs/plugins/barcodeScanner/），文档中有这个功能的代码，可是如今彷佛是不完善，因此用不了！！所以，我就找了一些用js生成二维码的方法。

2、生成二维码：

一、须要下载qrcode.js和jquery.js,能够到网上随便找有不少，这里提供一下能够下载的地方（https://github.com/davidshimjs/qrcodejs/），下载到本地以后引入到项目中

二、相关HTML的代码以下：

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

三、相关JS的代码以下：

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

快来试一下吧，这样子就生成了独一无二的二维码了，不过我仍是期待codova官方的插件啊，但愿早一点能用！