Cordova each plug-in use Introduction series (ii)-$cordovaBarcodeScanner scan two-dimensional code and generate two-dimensional code

Details link Address: http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-2-cordovabarcodescanner/

This is a use to scan the QR code of the Cordova plug-in, when doing the project want to achieve similar sweep sweep function, think of the Cordova $cordovabarcodescanner plug-in, with a very small amount of code can be achieved, the following to see the specific implementation steps:

First, scan the QR code:

1, first need to have a simple project, and then enter the command line to add plug-in commands:

Cordova Plugin Add Https://github.com/phonegap/phonegap-plugin-barcodescanner.git

2, the code in the HTML below, is to write a Ng-click event to trigger this function:

<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, in the JS code as follows, this code written in the corresponding controller and rely on ' $cordovaBarcodeScanner ', remember in the App.js "Ngcordova",:

$scope.scanStart = function () {

$cordovaBarcodeScanner
.scan()
.then(function (barcodeData) {
Alert(barcodeData);
$scope.barcodeData = barcodeData;
// Success! Barcode data is here
}, function (error) {
Alert (‘fail ‘)
// An error occurred
});
};

4, this can run to the phone to scan, but after the implementation of the scanning function there is a problem, if it is similar to the scan, but also need to generate their own QR code, this I looked at the official document of the next Ngcordova (HTTP/ ngcordova.com/docs/plugins/barcodescanner/), the document has this function code, but now seems to be imperfect, so not use!! Therefore, I have found some ways to generate two-dimensional code with JS.

Second, the generation of two-dimensional code:

1, need to download qrcode.js and jquery.js, you can go to the Internet to find a lot, here to provide a place to download (https://github.com/davidshimjs/qrcodejs/), downloaded to the local after the introduction to the project

2, the relevant HTML code is as follows:

<id= "QRCode"></div>

3, the relevant JS code is as follows:

 
Var qrcode = new QRCode(document.getElementById("qrcode"), {
Width: 96, / / set width and height
Height: 96
});
qrcode.makeCode("http://www.baidu.com");

Come and try it, this will generate a unique QR code, but I still look forward to Codova official plug-in Ah, I hope a little earlier can use!

Cordova each plug-in use Introduction series (ii)-$cordovaBarcodeScanner scan two-dimensional code and generate two-dimensional code