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官方的外掛程式啊，希望早一點能用！

 

 

Cordova各個外掛程式使用介紹系列（二）—$cordovaBarcodeScanner掃描二維碼與產生二維碼