QR程式碼元件範例

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

主題：
適用性表單

建立對象：

初學者
開發人員

在最適化表單中內嵌QR程式碼可大幅提升使用者存取表單相關額外資訊的便利性和效率。

範例元件使用QRCode.js。

QRCode.js是用於建立QRCode的Javascript程式庫，它支援具有HTML5 Canvas的跨瀏覽器功能，以及DOM中的表格標籤。

元件會根據元件的configuration屬性中指定的值來產生QR碼。

下列程式碼用於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程式碼會附加至識別碼 "qrcode" 所識別的div。

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

 });

在您的本機伺服器上部署資產

recommendation-more-help