Cordova各個插件使用介紹系列(二)—$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官方的插件啊,希望早一點能用!


原文鏈接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-2-cordovabarcodescanner/

發佈了59 篇原創文章 · 獲贊 12 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章