如何使用Cordova生成和扫描二维码

本文概述

• 要求
• 读取QR码

QR码是当今使用的最受欢迎的条形码类型之一, 能够对多达4296个字符进行编码。

如上图所示, 二维码是二维码。典型的QR码应用程序包括产品跟踪, 项目标识, 时间跟踪, 文档管理, 常规营销, URL共享, 包裹跟踪等等。

要求

为了创建QR代码, 我们将使用jQuery.qrcode插件, 该插件可让你通过画布将生成的qrcode添加到DOM。我们之前写过一篇有关如何使用jQuery创建二维码以及如何将其附加到dom的文章, 请在此处阅读全文。如果你不喜欢jQuery, 则可以使用不需要jQuery的qrcode.js库。

jquery.qrcode.js是用于纯浏览器qrcode生成的jquery插件。它使你可以轻松地将qrcode添加到你的网页。它是独立的, minify + gzip后不到4k, 没有图像下载。它不依赖于打开或关闭的外部服务, 也不会增加加载时的延迟。它基于一个以各种语言构建qrcode的库。

我们需要访问相机才能使用手机扫描二维码, 所幸的是, 已经有了一个可以为你完成所有工作的插件。要进行扫描, 我们将依赖phonegap-plugin-barcodescanner, 它使你可以使用相机扫描二维码。使用以下命令在你的项目上安装插件：

cordova plugin add phonegap-plugin-barcodescanner

Phonegap条码扫描器插件(在此处阅读文档)将处理我们的二维码。插件支持以下所有平台：

• 安卓系统
• iOS
• Windows(Windows / Windows Phone 8.1和Windows 10)
• Windows Phone 8
• 黑莓10
• 浏览器

你就可以开始工作了！

读取QR码

请记住, 此插件不仅仅支持qr代码, 还可以使用以下代码来获取有关扫描代码的信息：

 cordova.plugins.barcodeScanner.scan(
      function (result) {
          alert("A barcode has been scanned \n" +
                "Result: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "Cancelled: " + result.cancelled);
      }, function (error) {
          alert("Scanning failed: " + error);
      }
 );

为了使用javascript处理扫描, 我们将使用以下代码：

cordova.plugins.barcodeScanner.scan(
   function (result) {
        if(!result.cancelled){
               // In this case we only want to process QR Codes
               if(result.format == "QR_CODE"){
                    var value = result.text;
                    // This is the retrieved content of the qr code
                    console.log(value);
               }else{
                  alert("Sorry, only qr codes this time ;)");
               }
        }else{
          alert("The user has dismissed the scan");
        }
     },   function (error) {
          alert("An error ocurred: " + error);
     }
);

将此代码附加到功能上(单击按钮)后, 条形码扫描仪应启动并显示如下内容：

谢谢队长明显…

玩得开心 ！