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

Posted 2020-06-14

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

 

 

本文出自 “11141997” 博客，请务必保留此出处http://11151997.blog.51cto.com/11141997/1743334