QR code
QrCode
Practical Guide
The QR code component is converted to image format on the H5 side
Basic Description
Based on your configured links or text, generate a QR code and display it.
QR code display scenarios include static and dynamic scenarios.
The display of static QR codes can be directly implemented using the [Image] component. Specific scenarios include: displaying personal WeChat QR codes, group QR codes, official account QR codes, etc.
Dynamic QR codes are generated based on specified parameters. They are mainly used for scenarios such as one item, one code, appointment codes, coupon codes, membership codes, etc.
Usage Instructions
Add the QR code component in the editor.
In the [General] section of the Properties panel, enter the QR code content. For example, enter the official WeDa website address: https://cloud.tencent.com/product/weda. After scanning the generated QR code with a mobile phone, you can access the official WeDa website.

In the Properties panel, [Long Press to Open Menu] under [Mini Program Open Capabilities] is enabled by default. After the mini program is published, long-pressing the generated QR code will bring up menu options, which support adding to favorites, saving, and sharing the QR code.
In the Properties panel, [Style] supports setting the foreground and background colors of the QR code. You can adjust the QR code colors according to the overall style of the application/page.
Properties
External properties received by the component
Property Name | Property Identifier | Type | Description |
|---|
| 长按打开菜单 | showMenuByLongpress | boolean | Example: true |
| 二维码前置色 | foregroundColor | string | Example: "#000000" |
| 二维码背景色 | backgroundColor | string | Example: "#ffffff" |
| 二维码内容 | text | string | Example: "https://cloud.tencent.com/product/weda" |
Property API
Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API
Read-only Property Name | Property Identifier | Type | Description |
|---|
| 二维码内容 | text | string | |
| 长按打开菜单 | showMenuByLongpress | boolean | |
| 二维码前置色 | foregroundColor | string | |
| 二维码背景色 | backgroundColor | string |
Style API
Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API
Name | Class Name | Description and Examples |
|---|
| 根元素 | .wd-qrcode | 二维码组件根元素 |
| PC 端二维码根元素 | .wd-pc-qrcode | 可以为 PC 端的二维码编写样式 |
| H5 端二维码根元素 | .wd-h5-qrcode | 可以为 H5 端的二维码编写样式 |
| 小程序端二维码根元素 | .wd-mp-qrcode | 可以为小程序端的二维码编写样式 |