Ionic cordova - 二维码生成示例答案

【问题标题】：Ionic cordova - QRcode generate exampleIonic cordova - 二维码生成示例
【发布时间】：2016-05-24 16:32:05
【问题描述】：

我正在使用 ionic 框架构建一个 cordova 应用程序。此应用程序需要能够根据给定的文本生成二维码。我找到了http://davidshimjs.github.io/qrcodejs/ 作为解决方案。但我无法在我的离子应用程序中实现这一点。我需要这个任务的一些示例，由 qrcodejs 或任何其他库实现。谢谢！

【问题讨论】：

标签： cordova ionic-framework qr-code

【解决方案1】：

angular-qr 和 angular-qrcode 都不适合我，所以我最终基于Shim Sangmin's QRCode generator library 快速推出了自己的指令：

<!-- index.html -->
<script src="lib/qrcode.js/qrcode.js"></script>

// directives.js
.directive('qrcode', function($interpolate) {  
  return {
    restrict: 'E',
    link: function($scope, $element, $attrs) {

      var options = {
        text: '',
        width: 128,
        height: 128,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: 'H'
      };

      Object.keys(options).forEach(function(key) {
        options[key] = $interpolate($attrs[key] || '')($scope) || options[key];
      });

      options.correctLevel = QRCode.CorrectLevel[options.correctLevel];

      new QRCode($element[0], options);

    }
  };
});

然后像这样使用它：

<qrcode text="{{something.on.scope}}" color-bright="#ff0000"></qrcode>
<!-- or width, height, color-dark, correct-level -->

编辑：查看JSFiddle。

【讨论】：

@Chandru 需要详细说明吗？有没有具体的错误？
@Chandru 我刚刚使用 qrcode.js 04f46c6a07 通过凉亭拉入项目中从头开始重建我的项目。仍在工作。
它没有显示任何错误。它也没有显示二维码。但是，我设法使 angular-qrcode 工作。我只是在依赖项列表中缺少“monospaced.qrcode”。
@Chandru 好吧，不幸的是，这对于确保其他人不会遇到麻烦并不是很有用。请查看my example on JSFiddle，让我知道它是否适合您。
我同意你的担心。

【解决方案2】：

所以您需要的是一个 Angular 模块，大多数时候您必须创建自己的指令、模块或 Angular 代码来集成 JavaScript 插件。但是有人已经这样做了，我会看看http://ngmodules.org/modules/angular-qr 应该是你要找的。查看演示：http://janantala.github.io/angular-qr/demo/

【讨论】：

【解决方案3】：

我终于让 angular-qrcode 工作了。问题是，我应该在 app.js 中包含“monospaced.qrcode”作为模块依赖项。这在我的情况下丢失了。

【讨论】：

请详细说明您是如何修复它的以及您使用了哪个插件