Skip to main content

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​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
长按打开菜单showMenuByLongpressboolean

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

示例：true

二维码前置色foregroundColorstring

示例："#000000"

二维码背景色backgroundColorstring

示例："#ffffff"

二维码内容textstring

示例："https://cloud.tencent.com/product/weda"

Property API​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
二维码内容textstring
长按打开菜单showMenuByLongpressboolean
二维码前置色foregroundColorstring
二维码背景色backgroundColorstring

Style API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-qrcode二维码组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-qrcode {
  /* 在这里编写CSS 样式 */
}
PC 端二维码根元素.wd-pc-qrcode可以为 PC 端的二维码编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-qrcode {
  /* 在这里编写CSS 样式 */
}
H5 端二维码根元素.wd-h5-qrcode可以为 H5 端的二维码编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-qrcode {
  /* 在这里编写CSS 样式 */
}
小程序端二维码根元素.wd-mp-qrcode可以为小程序端的二维码编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-qrcode {
  /* 在这里编写CSS 样式 */
}

了解样式 API