示例二维码组件

Last update: Mon Mar 24 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

适用对象：
Experience Manager 6.5

主题：
自适应表单

创建对象：

初学者
开发人员

在自适应表单中嵌入二维码可以大大提高用户访问表单相关附加信息的方便性和效率。

示例组件使用QRCode.js。

QRCode.js是用于生成QRCode的Javascript库，它支持带有HTML5画布的跨浏览器以及DOM中的表标记。

组件根据在组件的configuration属性中指定的值生成二维码。

以下代码在qr代码生成器组件的body.jsp中使用。

“url”是需要嵌入到二维码中的url。此URL在QR代码组件的配置属性中指定。

<%@include file="/libs/foundation/global.jsp"%>
<body>
    <h2>Scan the QR Code for more information related to this form</h2>
    <div data-url="<%=properties.get("url")%>">
    </div>
    <div id="qrcode">
    </div>
</body>

以下代码使用qr-code-generator组件的客户端库中QRCode.js库的makeCode方法。生成的QR代码将附加到id "qrcode"标识的div中。

$(document).ready(function()
  {
      var qrcode = new QRCode("qrcode");
      qrcode.makeCode(document.querySelector("[data-url]").getAttribute("data-url"));

 });

在本地服务器上部署资产

recommendation-more-help

8de24117-1378-413c-a581-01e660b7163e