uQRCode 4.0.7

uQRCode is a JavaScript-based QR code generation plugin compatible with all JavaScript environments, including frontend applications and Node.js applications.

Key features include:

• High Extensibility: You can use the uQRCode API to retrieve the essential drawing information for a QR code and then render it yourself using canvas, svg, or direct dom manipulation.
• Customizable Styles: Supports custom styles such as random colors, dot patterns, square patterns, and adjustable spacing between blocks.

If Canvas is not supported, you can use qr.getDrawModules() to get an array of drawing instructions. Each module contains information about where to draw a tile or an image.

Module Object Structure

When iterating through the array returned by getDrawModules(), each drawModule has a type:

• tile: Represents a QR code block. Use drawModule.x, drawModule.y, drawModule.width, drawModule.height, and drawModule.color to render it (e.g., as a <div> or <rect>).
• image: Represents an embedded image. Use drawModule.x, drawModule.y, drawModule.width, drawModule.height, and drawModule.imageSrc to render it (e.g., as an <img> or <image>).

Example: Rendering via DOM elements

qr.make();
var drawModules = qr.getDrawModules();
// Iterate and create HTML elements based on module.type

The uQRCode Liquid Style plugin provides liquid-style QR code rendering. You can import it using ESM, CommonJS, or UMD depending on your environment.

// ESM (Recommended for modern bundlers)
import UQRCodePluginLiquid from 'uqrcode.plugin.liquid.es.js';

// CommonJS (Node.js)
const UQRCodePluginLiquid = require('uqrcode.plugin.liquid.cjs.js');

// UMD (Native Browser)
// <script type="text/javascript" src="uqrcode.plugin.liquid.umd.js"></script>
// var UQRCodePluginLiquid = window.UQRCodePluginLiquid;

Since uni-app uses easycom mode by default, you can use the <uqrcode> tag directly in your templates without manual imports.

Key props:

• ref: Used to access the component's internal methods via $refs.
• canvas-id: The identifier for the internal canvas component.
• value: The content to be encoded into the QR code.
• options: An object used to configure QR code styles, such as margin or drawing a Logo.

<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }"></uqrcode>

In a uni-app environment, you must register the plugin via the component's registerStyle method within the onReady lifecycle hook. You can then pass the style and properties via the :options prop.

// In your Vue component script
import UQRCodePluginLiquid from 'uqrcode.plugin.liquid.es.js';

export default {
  onReady() {
    /* Register the extension plugin using the component ref */
    this.$refs.qrcode.registerStyle(UQRCodePluginLiquid);
  }
}

<!-- In your Vue component template -->
<uqrcode 
  ref="qrcode" 
  canvas-id="qrcode" 
  value="https://uqrcode.cn/doc" 
  :options="{ style: 'liquid', foregroundRadius: 1.0 }"
></uqrcode>

When using the uqrcode component in uni-app, register the plugin via the component's ref in the onReady lifecycle hook. You can pass the style configuration through the :options prop.

<!-- Template -->
<uqrcode 
  ref="uqrcode" 
  canvas-id="qrcode" 
  value="https://uqrcode.cn/doc" 
  :options="{ style: 'round', foregroundRadius: 1.0, backgroundRadius: 1.0 }"
></uqrcode>

<!-- Script -->
<script>
import UQRCodePluginRound from 'uqrcode.plugin.round.es.js';

export default {
  onReady() {
    /* Register the extension via the component ref */
    this.$refs.uqrcode.registerStyle(UQRCodePluginRound);
  }
}
</script>

To use the rounded style, you must register the plugin with either the global UQRCode object or a specific UQRCode instance.

// Option 1: Global registration
UQRCode.use(UQRCodePluginRound);

// Option 2: Instance registration
const qr = new UQRCode();
qr.register(UQRCodePluginRound);

In a uni-app environment, you can register the plugin using the component's ref. Ensure you call registerStyle within the onReady lifecycle hook.

// In your script section
import UQRCodePluginWords from 'uqrcode.plugin.words.es.js';

export default {
  onReady() {
    /* Register the extension using the component's ref */
    this.$refs.qrcode.registerStyle(UQRCodePluginWords);
  }
}

<!-- In your template section -->
<uqrcode 
  ref="qrcode" 
  canvas-id="qrcode" 
  value="https://uqrcode.cn/doc" 
  :options="{ style: 'words', words: '扫我' }"
></uqrcode>

The uQRCode.plugin.words extension allows you to add text styles to your QR codes. It is best to use plain text without punctuation. You can import the plugin using ESM, CommonJS, or UMD depending on your environment.

// ESM (Recommended for modern bundlers)
import UQRCodePluginWords from 'uqrcode.plugin.words.es.js';

// CommonJS (Node.js)
const UQRCodePluginWords = require('uqrcode.plugin.words.cjs.js');

// UMD (Native Browser)
// <script type="text/javascript" src="uqrcode.plugin.words.umd.js"></script>
// var UQRCodePluginWords = window.UQRCodePluginWords;

To use the words extension, you must register it with either the global UQRCode object or a specific UQRCode instance.

// Global registration
UQRCode.use(UQRCodePluginWords);

// Instance registration
const qr = new UQRCode();
qr.register(UQRCodePluginWords);