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官方的插件啊，但願早一點能用！