Update Log
2023.3.13: WeChat Mini Program Component Description Table completed and launched
  1. Home
  2. Common Reference Table Comparison Table
  3. WeChat Mini Program Component Description Table

WeChat Mini Program Component Description Table

This page collects and organizes the concepts, functions, related attributes, and usage methods of various commonly used components in WeChat Mini Program development, making it easy for friends in need to quickly query. Provided for friends in need of inquiry and use.

For everyone's convenience in understanding and querying WeChat Mini Program components, we have organized the classification and functional description of commonly used WeChat Mini Program components here. The content is organized from the official website. The content is continuously being organized and supplemented...

Original link from the official website: https://mp.weixin.qq.com/debug/wxadoc/dev/component/

Basic Components

The framework provides developers with a series of basic components, which can be combined for rapid development.

What are Components:

  • Components are the basic building units of the view layer.
  • Components come with some functionality and WeChat-style styling.
  • A component usually includes a start tag and an end tag, with attributes modifying the component, and content between the two tags.
<tagname property="value">
  Content goes here ...
</tagename>

Attribute Types

Type Description Annotation
Boolean Boolean Value When the component has this attribute, its value is true regardless of what it equals. The attribute value is false only when the component does not have this attribute. If the attribute value is a variable, the variable's value will be converted to a Boolean type
Number Number 1, 2.5
String String "string"
Array Array [ 1, "string" ]
Object Object { key: value }
EventHandler Event Handler Function Name "handlerName" is the event handler function name defined in the Page
Any Any Attribute
Common Attribute Types
Attribute Type Description Annotation
id String The unique identifier of the component Remain unique throughout the entire page
class String The style class of the component Style class defined in the corresponding WXSS
style String The inline style of the component Dynamically set inline style
hidden String Whether the component is displayed All components are displayed by default
data-* Any Custom attribute Sent to the event handler function when an event is triggered on the component
bind* / catch* EventHandler Component event

Basic Component List

Basic components are divided into the following categories:

View Container (View Container) Basic Content (Basic Content) Form (Form) Navigation (Navigation) Media (Media) Map (Map) Canvas (Canvas)

View Container (View Container):

Component Name Comment Component Attributes
Attribute Name Type Default Value Description Minimum Version
view View Container hover-class String none Specify the style class when pressed. When hover-class="none", there is no click state effect.  
hover-stop-propagation Boolean false Specify whether to prevent the ancestor nodes of this node from showing a click state 1.5.0
hover-start-time Number 50 How long after pressing to show the click state, in milliseconds  
hover-stay-time Number 400 The retention time of the click state after the finger is released, in milliseconds  
scroll-view Scrollable View Container scroll-x Boolean false Allow horizontal scrolling  
scroll-y Boolean false Allow vertical scrolling  
upper-threshold Number 50 How far from the top/left (in px) to trigger the scrolltoupper event  
lower-threshold Number 50 How far from the bottom/right (in px) to trigger the scrolltolower event  
scroll-top Number   Set the vertical scrollbar position  
scroll-left Number   Set the horizontal scrollbar position  
scroll-into-view String   The value should be the ID of a child element (ID cannot start with a number). Set which direction is scrollable, then scroll to that element in that direction  
scroll-with-animation Boolean false Use animation transition when setting scrollbar position  
enable-back-to-top Boolean false When clicking the top status bar on iOS or double-clicking the title bar on Android, the scrollbar returns to the top, only supports vertical  
bindscrolltoupper EventHandle   Scroll to the top/left, will trigger the scrolltoupper event  
bindscrolltolower EventHandle   Scroll to the bottom/right, will trigger the scrolltolower event  
bindscroll EventHandle   Triggered during scrolling, event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}  
swiper Slider View Container indicator-dots Boolean false Whether to display panel indicator dots  
indicator-color Color rgba(0, 0, 0, .3) Indicator dot color 1.1.0
indicator-active-color Color #000000 Current selected indicator dot color 1.1.0
autoplay Boolean false Whether to automatically switch  
current Number 0 The index of the current page  
interval Number 5000 Automatic switching interval  
duration Number 500 Sliding animation duration  
circular Boolean false Whether to use continuous sliding  
vertical Boolean false Whether the sliding direction is vertical  
bindchange EventHandle   The current changes will trigger the change event, event.detail = {current: current, source: source}  

Basic Content (Basic Content):

Component Name Comment Component Attributes
Attribute Name Type Default Value Description Minimum Version
icon Icon type String   The type of icon, valid values: success, success_no_circle, info, warn, waiting, cancel, download, search, clear  
size Number 23 The size of the icon, in px  
color Color   The color of the icon, same as CSS color  
text Text selectable Boolean false Whether the text is selectable 1.1.0
space String false Display continuous spaces
Valid values ensp: half the size of Chinese character space emsp: the size of Chinese character space nbsp: space size according to font settings		 1.4.0
decode Boolean false Whether to decode 1.4.0
progress Progress Bar percent Float None Percentage 0~100  
show-info Boolean false Display percentage on the right side of the progress bar  
stroke-width Number 6 The width of the progress bar line, in px  
color Color #09BB07 Progress bar color (please use activeColor)  
activeColor Color   The color of the selected progress bar  
backgroundColor Color   The color of the unselected progress bar  
active Boolean false Animation of the progress bar from left to right  
active-mode String backwards backwards: Animation starts from the beginning; forwards: Animation continues from the last endpoint 1.7.0

Form (Form):

Component Name Comment Component Attributes
Attribute Name Type Default Value Description Effective Time Minimum Version
button Button size String default The size of the button    
type String default The style type of the button    
plain Boolean false Whether the button is hollow, with transparent background color    
disabled Boolean false Whether it is disabled    
loading Boolean false Whether there is a loading icon before the name    
form-type String   Used for <form/> component, clicking will trigger the submit/reset event of the <form/> component    
open-type String   WeChat open capability   1.1.0
hover-class String button-hover Specify the style class when the button is pressed. When hover-class="none", there is no click state effect    
hover-stop-propagation Boolean false Specify whether to prevent the ancestor nodes of this node from showing the click state   1.5.0
hover-start-time Number 20 How long after pressing to show the click state, in milliseconds    
hover-stay-time Number 70 The retention time of the click state after the finger is released, in milliseconds    
bindgetuserinfo Handler   When the user clicks the button, the user information obtained will be returned, and the value obtained from the detail of the return parameters is the same as wx.getUserInfo open-type="getUserInfo" 1.3.0
lang String en Specify the language of the returned user information, zh_CN Simplified Chinese, zh_TW Traditional Chinese, en English. open-type="getUserInfo" 1.3.0
session-from String   Session source open-type="contact" 1.4.0
send-message-title String Current Title Title of the conversation message card open-type="contact" 1.5.0
send-message-path String Current Sharing Path Path of the conversation message card to jump to the mini program when clicked open-type="contact" 1.5.0
send-message-img String Screenshot Image of the conversation message card open-type="contact" 1.5.0
show-message-card Boolean false Display conversation message card open-type="contact" 1.5.0
bindcontact Handler   Customer service message callback open-type="contact" 1.5.0
bindgetphonenumber Handler   Callback to get the user's phone number open-type="getphonenumber" 1.2.0
form Form report-submit Boolean   Whether to return formId for sending template messages  
bindsubmit EventHandle   Trigger submit event with data in form, event.detail = {value : {'name': 'value'} , formId: ''}  
bindreset EventHandle   Reset event will be triggered when the form is reset  
input Input Box value String   Initial content of the input box  
type String "text" Type of input  
password Boolean false Whether it is password type  
placeholder String   Placeholder when the input box is empty  
placeholder-style String   Specify the style of the placeholder  
placeholder-class String "input-placeholder" Specify the style class of the placeholder  
disabled Boolean false Whether it is disabled  
maxlength Number 140 Maximum input length, set to -1 when not limited  
cursor-spacing Number 0 Specify the distance between the cursor and the keyboard, in px. The minimum value of the distance from the bottom of the input and the cursor-spacing specified is taken as the distance between the cursor and the keyboard  
auto-focus Boolean false (To be deprecated, please use focus directly) Auto focus, pull up the keyboard  
focus Boolean false Get focus  
confirm-type String "done" Set the text of the button at the bottom right corner of the keyboard 1.1.0
confirm-hold Boolean false Whether to keep the keyboard from closing when the button at the bottom right corner of the keyboard is clicked 1.1.0
cursor Number   Specify the cursor position when focused 1.5.0
bindinput EventHandle   Trigger input event when keyboard input occurs, event.detail = {value, cursor}. The processing function can directly return a string, which will replace the content of the input box.  
bindfocus EventHandle   Triggered when the input box is focused, event.detail = {value: value}  
bindblur EventHandle   Triggered when the input box loses focus, event.detail = {value: value}  
bindconfirm EventHandle   Triggered when the confirm button is clicked, event.detail = {value: value}  
checkbox Multi-selector value String   <checkbox/> identifier, triggers <checkbox-group/>'s change event when selected, carrying <checkbox/>'s value  
disabled Boolean false Whether it is disabled  
checked Boolean false Whether it is currently selected, can be used to set default selection  
color Color   Color of checkbox, same as css color  
radio Single selector value String   <radio/> identifier. When the <radio/> is selected, the change event of <radio-group/> carries the value of <radio/>  
disabled Boolean false Whether it is disabled  
checked Boolean false Whether it is currently selected, can be used to set default selection  
color Color   Color of radio, same as css color  
picker
(mode = selector)		 (Normal) List selector range Array / Object Array [] When mode is selector or multiSelector, range is valid  
range-key String   When range is an Object Array, specify the value of the key in the Object as the display content of the selector through range-key  
value Number 0 The value of value indicates the selection of the nth item (starting from 0) in range  
bindchange EventHandle   Change event triggered when value changes, event.detail = {value: value}  
disabled Boolean false Whether it is disabled  
picker
(mode = multiSelector)		 (Multi-column) List selector range Two-dimensional Array / Two-dimensional Object Array [] When mode is selector or multiSelector, range is valid. Two-dimensional array, the length represents the number of columns, each item of the array represents the data of each column, such as [["a","b"], ["c","d"]]  
range-key String   When range is a two-dimensional Object Array, specify the value of the key in the Object as the display content of the selector through range-key  
value Array 0 Each item of value indicates the selection of the nth item (starting from 0) in the corresponding range item  
bindchange EventHandle   Trigger change event when value changes, event.detail = {value: value}  
bindcolumnchange EventHandle   Trigger columnchange event when the value of a certain column changes, event.detail = {column: column, value: value}, where column indicates the changed column (starting from 0), and value indicates the index of the changed value  
disabled Boolean false Whether it is disabled  
picker
(mode = time)		 (Time) List selector value String   Represents the selected time, formatted as "hh:mm"  
start String   Represents the start of the valid time range, with the string format "hh:mm"  
end String   Represents the end of the valid time range, with the string format "hh:mm"  
bindchange EventHandle   Trigger change event when value changes, event.detail = {value: value}  
disabled Boolean false Whether it is disabled  
picker
(mode = date)		 (Date) List selector value String 0 Represents the selected date, formatted as "YYYY-MM-DD"  
start String   Represents the start of the valid date range, with the string format "YYYY-MM-DD"  
end String   Represents the end of the valid date range, with the string format "YYYY-MM-DD"  
fields String day Valid values year, month, day, representing the granularity of the selector  
bindchange EventHandle   Trigger change event when value changes, event.detail = {value: value}  
disabled Boolean false Whether it is disabled  
picker
(mode = region)		 (Region) List selector value Array [] Represents the selected province, city, and district, with the first value of each column selected by default  
custom-item String   Add a custom item to the top of each column 1.5.0
bindchange EventHandle   Trigger change event when value changes, event.detail = {value: value}  
disabled Boolean false Whether it is disabled  
picker-view Embedded list selector value NumberArray   The numbers in the array represent the selected item of picker-view-column in picker-view (starting from 0), and when the number is greater than the number of options in picker-view-column, the last item is selected.  
indicator-style String   Set the style of the selection box in the middle of the selector  
indicator-class String   Set the class name of the selection box in the middle of the selector 1.1.0
mask-style String   Set the style of the mask layer 1.5.0
mask-class String   Set the class name of the mask layer 1.5.0
bindchange EventHandle   Trigger change event when the scroll selection changes, value changes, event.detail = {value: value}; value is an array, representing the current selection of picker-view-column in picker-view (starting from 0)  
slider Scrolling selector min Number 0 Minimum value  
max Number 100 Maximum value  
step Number 0 Step size, the value must be greater than 0 and divisible by (max - min)  
disabled Boolean false Whether it is disabled  
value Number 0 Current value  
color Color #e9e9e9 Background bar color (please use backgroundColor)  
selected-color Color #1aad19 Selected color (please use activeColor)  
activeColor Color #1aad19 Selected color  
backgroundColor Color #e9e9e9 Background bar color  
show-value Boolean false Whether to display the current value  
bindchange EventHandle   Event triggered after a drag, event.detail = {value: value}  
bindchanging EventHandle   Event triggered during dragging, event.detail = {value: value} 1.7.0
switch Switch selector checked Boolean false Whether it is checked  
type String switch Style, valid values: switch, checkbox  
bindchange EventHandle   Trigger change event when checked changes, event.detail={ value:checked}  
color Color   Switch color, same as css color  
label Label for String   Bind to the id of the control  
Component name Comment Component properties
Property name Type Default value Description Minimum version
navigator Application link url String   Jump link within the application  
open-type String navigate Jump method  
delta Number   Valid when open-type is 'navigateBack', indicating the number of layers to go back  
hover-class String navigator-hover Specify the style class when clicking, when hover-class="none", there is no click state effect  
hover-stop-propagation Boolean false Specify whether to prevent the ancestor nodes of this node from showing a click state 1.5.0
hover-start-time Number 50 How long after pressing to show the click state, in milliseconds  
hover-stay-time Number 600 The retention time of the click state after the finger is released, in milliseconds  
Among them, the valid values for open-type are as follows:
ValueDescriptionMinimum version
navigateCorresponding to the functionality of wx.navigateTo 
redirectCorresponding to the functionality of wx.redirectTo 
switchTabCorresponding to the functionality of wx.switchTab 
reLaunchCorresponding to the functionality of wx.reLaunch1.1.0
navigateBackCorresponding to the functionality of wx.navigateBack1.1.0

Media:

Component name Comment Component properties
Property name Type Default value Description Minimum version
audio Audio id String   Unique identifier of the audio component  
src String   Resource address of the audio to play  
loop Boolean false Whether to loop playback  
controls Boolean false Whether to display default controls  
poster String   Image resource address of the audio cover on the default control, if the controls property value is false, setting poster is invalid  
name String Unknown audio Name of the audio on the default control, if the controls property value is false, setting name is invalid  
author String Unknown author Name of the author on the default control, if the controls property value is false, setting author is invalid  
binderror EventHandle   Trigger error event when an error occurs, detail = {errMsg: MediaError.code}  
bindplay EventHandle   Trigger play event when starting/continuing playback  
bindpause EventHandle   Trigger pause event when pausing playback  
bindtimeupdate EventHandle   Trigger timeupdate event when playback progress changes, detail = {currentTime, duration}  
bindended EventHandle   Trigger ended event when playing to the end  
image Image src String   Image resource address  
mode String 'scaleToFill' Image cropping and scaling mode  
lazy-load Boolean false Image lazy loading. Only valid for image under page and scroll-view 1.5.0
binderror HandleEvent   When an error occurs, the event name published to AppService, event object event.detail = {errMsg: 'something wrong'}  
bindload HandleEvent   When the image is fully loaded, the event name published to AppService, event object event.detail = {height:'Image height px', width:'Image width px'}  
video Video src String   Resource address of the video to play  
initial-time Number   Specify the initial playback position of the video 1.6.0
duration Number   Specify the duration of the video 1.1.0
controls Boolean true Whether to display default playback controls (play/pause button, playback progress, time)  
danmu-list Object Array   Danmaku list  
danmu-btn Boolean false Whether to display danmaku button, only valid at initialization, cannot be dynamically changed  
enable-danmu Boolean false Whether to display danmaku, only valid at initialization, cannot be dynamically changed  
autoplay Boolean false Whether to autoplay  
loop Boolean false Whether to loop playback 1.4.0
muted Boolean false Whether to play in silent mode 1.4.0
page-gesture Boolean false Whether to enable brightness and volume adjustment gestures in non-fullscreen mode 1.6.0
direction Number   Set the direction of the video when in full screen, not specified then it will automatically determine based on aspect ratio. Valid values are 0 (normal vertical), 90 (screen counterclockwise 90 degrees), -90 (screen clockwise 90 degrees) 1.7.0
bindplay EventHandle   Trigger play event when starting/continuing playback  
bindpause EventHandle   Trigger pause event when pausing playback  
bindended EventHandle   Trigger ended event when playing to the end  
bindtimeupdate EventHandle   Trigger when playback progress changes, event.detail = {currentTime, duration}. Trigger frequency 250ms once  
bindfullscreenchange EventHandle   Trigger when the video enters and exits full screen, event.detail = {fullScreen, direction}, direction is either vertical or horizontal 1.4.0
objectFit String contain When the video size is inconsistent with the video container size, the presentation form of the video. contain: include, fill: fill, cover: cover  
poster String   The network resource address of the video cover image, if the controls property value is false, setting the poster is invalid  

Map:

Component Name Comment Component Attributes
Attribute Name Type Default Value Description Minimum Version
map Map longitude Number   Center longitude  
latitude Number   Center latitude  
scale Number 16 Zoom level, range is 5-18  
markers Array   Markers  
covers Array   To be removed, please use markers  
polyline Array   Route  
circles Array   Circles  
controls Array   Controls  
include-points Array   Zoom the view to include all given coordinate points  
show-location Boolean   Display the current location with direction  
bindmarkertap EventHandle   Triggered when clicking on a marker  
bindcallouttap EventHandle   Triggered when clicking on the bubble corresponding to the marker 1.2.0
bindcontroltap EventHandle   Triggered when clicking on a control  
bindregionchange EventHandle   Triggered when the field of view changes  
bindtap EventHandle   Triggered when clicking on the map  
bindupdated EventHandle   Triggered when the map rendering update is completed 1.6.0

Canvas:

Component Name Comment Component Attributes
Attribute Name Type Default Value Description Minimum Version
canvas Canvas src String   The resource address of the video to play  
initial-time Number   Specify the initial playback position of the video 1.6.0
duration Number   Specify the duration of the video 1.1.0
controls Boolean true Whether to display the default playback controls (play/pause button, playback progress, time)  
danmu-list Object Array   Danmaku list  
danmu-btn Boolean false Whether to display the danmaku button, only valid at initialization, cannot be changed dynamically  
enable-danmu Boolean false Whether to display danmaku, only valid at initialization, cannot be changed dynamically  
autoplay Boolean false Whether to autoplay  
loop Boolean false Whether to loop playback 1.4.0
muted Boolean false Whether to play in muted mode 1.4.0
page-gesture Boolean false Whether to enable brightness and volume adjustment gestures in non-fullscreen mode 1.6.0
direction Number   Set the direction of the video when in full screen, if not specified, it will be automatically determined according to the aspect ratio. Valid values are 0 (normal vertical), 90 (screen counterclockwise 90 degrees), -90 (screen clockwise 90 degrees) 1.7.0
show-progress Boolean true If not set, it will only be displayed when the width is greater than 240 1.9.0
show-fullscreen-btn Boolean true Whether to display the full screen button 1.9.0
show-play-btn Boolean true Whether to display the play button in the video bottom control bar 1.9.0
show-center-play-btn Boolean true Whether to display the play button in the middle of the video 1.9.0
enable-progress-gesture Boolean true Whether to enable the gesture for controlling progress 1.9.0
bindplay EventHandle   Trigger the play event when starting/continuing playback  
bindpause EventHandle   Trigger the pause event when pausing playback  
bindended EventHandle   Trigger the ended event when playing to the end  
bindtimeupdate EventHandle   Triggered when the playback progress changes, event.detail = {currentTime, duration}. Trigger frequency is once every 250ms  
bindfullscreenchange EventHandle   Triggered when the video enters and exits full screen, event.detail = {fullScreen, direction}, direction is either vertical or horizontal 1.4.0
objectFit String contain When the video size is inconsistent with the video container size, the presentation form of the video. contain: include, fill: fill, cover: cover  
poster String   The network resource address of the video cover image, if the controls property value is false, setting the poster is invalid