Skip to main content
Supported Regions:上海

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​

  1. Add the QR code component in the editor.

  2. 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.

img

  1. 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.

  2. 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
长按打开菜单showMenuByLongpressboolean

小程序端长按显示分享、保存、收藏等功能。查看说明

Example: true

二维码前置色foregroundColorstring

Example: "#000000"

二维码背景色backgroundColorstring

Example: "#ffffff"

二维码内容textstring

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
二维码内容textstring
长按打开菜单showMenuByLongpressboolean
二维码前置色foregroundColorstring
二维码背景色backgroundColorstring

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二维码组件根元素
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-qrcode {
  /* Write CSS styles here */
}
PC 端二维码根元素.wd-pc-qrcode可以为 PC 端的二维码编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-qrcode {
  /* Write CSS styles here */
}
H5 端二维码根元素.wd-h5-qrcode可以为 H5 端的二维码编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-qrcode {
  /* Write CSS styles here */
}
小程序端二维码根元素.wd-mp-qrcode可以为小程序端的二维码编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-qrcode {
  /* Write CSS styles here */
}

Learn about Style API