在LabVIEW NXG Web模块中显示QR二维码

更新 Oct 20, 2022

LabVIEW NXG Web模块不具备QR二维码生成功能，但可以透过使用JavaScript Library Interface（JSLI）调用JavaScript功能来实现该功能。本文将详细向您展示如何在LabVIEW NXG Web模块中实现QR二维码生成和显示功能。

  1. 在qrcode.js上下载和提取由davidshimjs提供的JavaScript函数文件夹。
  2. 在LabVIEW NXG中创建一个Web应用项目 （Web Application Project）。 image.png
  3. 保存项目。如果不保存项目，那么您将无法在接下来的步骤中导入文件。
  4. 点击Edit HTML Source，将以下HTML代码段植入到webVI的HTML Source中。 
    • <div id ="qrcode"> </div>
    • image.png
  5. 点击OK保存修改后的HTML Source。
  6. 将步骤1中提取的qrcode.min.js或qrcode.js导入到项目中。 image.png
  7. 通过使用文本编辑器，将以下代码段另存为qr.js，然后将其导入到您的Web应用程序项目中，如步骤6所示。 
    • (function () {
    // Use strict prevents silent and common JavaScript errors.
    'use strict';
    window.QR = function (word) {
        new QRCode(document.getElementById("qrcode"), word);
    };
}());
    • 此JavaScript代码段接受一个表示QR码内容的String型参数，并将其显示在ID为qrcode的HTML元素上。
  8. 为您的Web应用程序项目创建一个JavaScript Library Interface（JSLI）。 image.png
  9. 现在，在已自动为您打开一个Library.jsli选项卡，在HTML script and link dependencies输入以下HTML代码段。 
    • <script src ="qrcode.min.js"> </ script>
<script src ="qr.js"> </ script>
  10. 在JavaScript Global中，输入QR并单击Add function。使用QR是因为它是我们在步骤7中,在qr.js中创建的函数名称。
  11. 在不展开右侧侧面板的情况下，单击Add Parameter。
  12. 在选择我们新创建的参数时，打开右侧面板以将其数据类型更改为String并相应地重命名。在下图中，它已重命名为word 。 image.png
  13. 如图中进行以下设置后，在浏览器中运行程序后，您将获得一个带有URL的QR二维码。该URL指向NI官方网站，如步骤14所示。 image.png
  14. 在浏览器中运行webVI的结果： image.png

相关链接

其他支持选项

询问NI社区

在我们的论坛中与其他用户协作



请求工程师的支持

可能需要有效的服务协议，支持选项因国家/地区而异。