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

Source: Internet
Author: User



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


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.