WeChat Mini Program Component Description Sheet

基础组件

The framework provides a set of basic components for developers, enabling quick development through the combination of these components.

What is a component:

• Components are the fundamental units of the view layer.
• The component comes with some built-in features and WeChat-style designs.
• A component typically includes a start tag and an end tag, with attributes used to decorate it, and content between the tags.

<tagname property="value">
  Content goes here ...
</tagename>

属性类型

Type	Description	Annotation
Boolean	Boolean	The component sets this property, and regardless of its value, it is always true. The property value is false only when the component does not have this property. If the property value is a variable, the variable's value is converted to a Boolean type.
Number	Digital	1, 2.5
String	String	“string”
Array	Array	[ 1, “string” ]
Object	object	{ key: value }
EventHandler	Event handling function name	"handlerName" is the event handler function name defined in the Page.
Any	Arbitrary attribute

共同属性类型

Attribute	Type	Description	Annotation
id	String	Unique component identifier	Maintain page uniqueness
class	String	Component's style class	Style class defined in the corresponding WXSS
style	String	inline styles of components	Dynamic inline styles
hidden	String	Component visibility?	All components are displayed by default.
data-*	Any	Custom attribute	When an event is triggered on a component, it is sent to the event handler function.
bind* / catch*	EventHandler	。 Component events.

基本组件列表

Basic components are divided into the following categories:

视图容器(View Container)：

Component name	Annotation	Component properties
		attribute name	Type	Default value	Instruction	Minimum version
view	View container	hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
		hover-stop-propagation	Boolean	false	Specify whether to block ancestor nodes of this node from being in click state.	1.5.0
		hover-start-time	Number	50	How long after pressing does the click state appear, in milliseconds?
		hover-stay-time	Number	400	Click state retention time after finger release, unit: milliseconds
scroll-view	Scrollable view container	scroll-x	Boolean	false	Allow horizontal scrolling
		scroll-y	Boolean	false	Enable vertical scrolling
		upper-threshold	Number	50	How far from the top/left (in px) does it trigger the scrolltoupper event?
		lower-threshold	Number	50	How far from the bottom/right (in px) does it trigger the scrolltolower event?
		scroll-top	Number		Set vertical scrollbar position
		scroll-left	Number		Set horizontal scrollbar position
		scroll-into-view	String		The value should be the ID of a child element (the ID cannot start with a number). The scroll direction can be set to the direction in which scrolling will occur to the element.
		scroll-with-animation	Boolean	false	Use animation transitions when setting scrollbar position.
		enable-back-to-top	Boolean	false	When tapping the top status bar on iOS or double-tapping the title bar on Android, the scrollbar returns to the top, supporting vertical scrolling only.
		bindscrolltoupper	EventHandle		Scroll to top/left will trigger the scrolltoupper event.
		bindscrolltolower	EventHandle		Scroll to the bottom/right to trigger the scrolltolower event.
		bindscroll	EventHandle		Triggered on scroll, event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
swiper	Slider view container	indicator-dots	Boolean	false	Is the panel indicator point displayed?
		indicator-color	Color	rgba(0, 0, 0, .3)	Instruction point color	1.1.0
		indicator-active-color	Color	#000000	Current selected indicator point color	1.1.0
		autoplay	Boolean	false	Is it automatic switching?
		current	Number	0	Current page index
		interval	Number	5000	Automatic time interval switching
		duration	Number	500	Slide animation duration
		circular	Boolean	false	Whether to adopt a linkage slider
		vertical	Boolean	false	Is the sliding direction vertical?
		bindchange	EventHandle		The "change" event is triggered when "current" changes, event.detail = {current: current, source: source}.

基础内容(Basic Content)：

Component name	Annotation	Component properties
		attribute name	Type	Default value	Instruction	Minimum version
icon	图标	type	String		icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
		size	Number	23	Icon size, unit: px
		color	Color		Icon color, same as CSS's color
text	Text	selectable	Boolean	false	Text is optional.	1.1.0
		space	String	false	显示连续空格 有效值 ensp:中文字符空格一半大小 emsp:中文字符空格大小 nbsp:根据字体设置的空格大小	1.4.0
		decode	Boolean	false	Is decoded	1.4.0
progress	progress bar	percent	Float	None	0~100 percent
		show-info	Boolean	false	Display the percentage on the right side of the progress bar.
		stroke-width	Number	6	Progress bar line width, unit: px
		color	Color	#09BB07	Progress bar color (use activeColor)
		activeColor	Color		Color of selected progress bar
		backgroundColor	Color		Color of unselected progress bar
		active	Boolean	false	Animation of progress bar from left to right
		active-mode	String	backwards	Backwards: Play animation from the beginning; Forwards: Resume animation from the last stop.	1.7.0

表单(Form)：

Component name	Annotation	Component properties
		attribute name	Type	Default value	Instruction	Effective timing	Minimum version
button	Button	size	String	default	Button size
		type	String	default	Button style type
		plain	Boolean	false	Is the button hollow and the background color transparent?
		disabled	Boolean	false	Is disabled
		loading	Boolean	false	Is there a loading icon before the name?
		form-type	String		用于 <form/> 组件，点击分别会触发 <form/> 组件的 submit/reset 事件
		open-type	String		WeChat Open Ability		1.1.0
		hover-class	String	button-hover	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
		hover-stop-propagation	Boolean	false	Specify whether to block ancestor nodes of this node from being in click state.		1.5.0
		hover-start-time	Number	20	How long after pressing does the click state appear, in milliseconds?
		hover-stay-time	Number	70	Click state retention time after finger release, unit: milliseconds
		bindgetuserinfo	Handler		When the user clicks the button, it will return the obtained user information. The value obtained from the 'detail' parameter is the same as wx.getUserInfo.	open-type="getUserInfo'	1.3.0
		lang	String	en	Specify the language for returning user information: zh_CN for Simplified Chinese, zh_TW for Traditional Chinese, en for English.	open-type="getUserInfo"	1.3.0
		session-from	String		Session Source	open-type="contact"	1.4.0
		send-message-title	String	Current Title	Session Message Card Title	open-type="contact"	1.5.0
		send-message-path	String	current shared path	Session message card click to jump to miniprogram path	open-type="contact"	1.5.0
		send-message-img	String	screenshot	Session card picture	open-type="contact"	1.5.0
		show-message-card	Boolean	false	Show session message cards	open-type="contact"	1.5.0
		bindcontact	Handler		Customer service message callback	open-type="contact"	1.5.0
		bindgetphonenumber	Handler		Get user phone number callback	open-type="getphonenumber"	1.2.0
form	Form	report-submit	Boolean		Is the formId returned for sending template messages?
		bindsubmit	EventHandle		Trigger submit event with form data, event.detail = {value: {'name': 'value'}, formId: ''}
		bindreset	EventHandle		The form triggers a "reset" event when it is reset.
input	Input box	value	String		Initial input box content
		type	String	"text"	input type
		password	Boolean	false	Is it a password type?
		placeholder	String		Placeholder when input box is empty
		placeholder-style	String		Specify the placeholder style.
		placeholder-class	String	"input-placeholder"	Specify placeholder style class
		disabled	Boolean	false	Is disabled
		maxlength	Number	140	Maximum input length, set to -1 for no length limit.
		cursor-spacing	Number	0	Specify the distance from the cursor to the keyboard, in px. Use the minimum value between the distance from the input to the bottom and the cursor-spacing specified.
		auto-focus	Boolean	false	Auto-focus, pull up keyboard
		focus	Boolean	false	Gather focus
		confirm-type	String	"done"	Set text on the bottom-right button of the keyboard.		1.1.0
		confirm-hold	Boolean	false	Is the keyboard kept open when tapping the button at the bottom-right of the keyboard?		1.1.0
		cursor	Number		Cursor position when specifying a focus		1.5.0
		bindinput	EventHandle		When keyboard input occurs, an input event is triggered, event.detail = {value, cursor}. The handler can directly return a string to replace the input box content.
		bindfocus	EventHandle		Input box focuses, event.detail = {value: value}
		bindblur	EventHandle		Triggered when the input box loses focus, event.detail = {value: value}.
		bindconfirm	EventHandle		Triggered when the complete button is clicked, event.detail = {value: value}.
checkbox	Multiple-choice selector	value	String		<checkbox/>标识，选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 value
		disabled	Boolean	false	Is disabled
		checked	Boolean	false	Currently selected, can be used to set default selection.
		color	Color		checkbox color, same as CSS color
radio	Single selection selector	value	String		<radio/> 标识。当该<radio/> 选中时，<radio-group/> 的 change 事件会携带<radio/>的value
		disabled	Boolean	false	Is disabled
		checked	Boolean	false	Currently selected, can be used to set default selection.
		color	Color		The color of the radio, the same as the CSS color.
picker (mode = selector)	Plain 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 selector to display content via "range-key".
		value	Number	0	The value of "value" indicates the selected index in the range (starting from 0).
		bindchange	EventHandle		A 'change' event is triggered when the value changes, event.detail = {value: value}.
		disabled	Boolean	false	Is disabled
picker (mode = multiSelector)	(List) Selector	range	2D array / 2D object array	[]	mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]
		range-key	String		When the range is a two-dimensional object array, specify the object's key value as the selector to display content via the range-key.
		value	Array	0	Value of each item indicates the index (starting from 0) selected in the corresponding range item.
		bindchange	EventHandle		A 'change' event is triggered when the value changes, event.detail = {value: value}.
		bindcolumnchange	EventHandle		A columnchange event is triggered when a value in a column changes, event.detail = {column: column, value: value}, where column indicates the column number (starting from 0) that has changed, and value indicates the index of the changed value.
		disabled	Boolean	false	Is disabled
picker (mode = time)	Time List Selector	value	String		表示选中的时间，格式为"hh:mm"
		start	String		表示有效时间范围的开始，字符串格式为"hh:mm"
		end	String		表示有效时间范围的结束，字符串格式为"hh:mm"
		bindchange	EventHandle		A 'change' event is triggered when the value changes, event.detail = {value: value}.
		disabled	Boolean	false	Is disabled
picker (mode = date)	Date list selector	value	String	0	表示选中的日期，格式为"YYYY-MM-DD"
		start	String		表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
		end	String		表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
		fields	String	day	Effective value for year, month, day, indicating the granularity of the selector.
		bindchange	EventHandle		A 'change' event is triggered when the value changes, event.detail = {value: value}.
		disabled	Boolean	false	Is disabled
picker (mode = region)	Date list selector	value	Array	[]	Indicate the selected province, city, and district. By default, the first value in each column is selected.
		custom-item	String		Add a custom item to the top of each column		1.5.0
		bindchange	EventHandle		A 'change' event is triggered when the value changes, event.detail = {value: value}.
		disabled	Boolean	false	Is disabled
picker-view	Nested list selector	value	NumberArray		Numbers in the array represent the selected item index (starting from 0) in the picker-view-column within the picker-view. If the number exceeds the length of picker-view-column options, the last item is selected.
		indicator-style	String		Set the style of the middle selected box in the selector.
		indicator-class	String		Set the class name of the middle selected box of the selector		1.1.0
		mask-style	String		Set the overlay style		1.5.0
		mask-class	String		Set the class name for the overlay		1.5.0
		bindchange	EventHandle		When the picker-view is scrolled and the value changes, the change event is triggered, event.detail = {value: value}; value is an array indicating which item (index starting from 0) the picker-view-column within the picker-view is currently selected.
slider	Scroll selector	min	Number	0	Minimum
		max	Number	100	Maximum
		step	Number	0	Step size must be greater than 0 and divisible by (max - min).
		disabled	Boolean	false	Is disabled
		value	Number	0	current value
		color	Color	#e9e9e9	Background color (use backgroundColor)
		selected-color	Color	#1aad19	Selected color (use activeColor)
		activeColor	Color	#1aad19	Selected color
		backgroundColor	Color	#e9e9e9	Background bar color
		show-value	Boolean	false	Is the current value displayed?
		bindchange	EventHandle		Triggered event after a drag operation, event.detail = {value: value}
		bindchanging	EventHandle		Events triggered during drag, event.detail = {value: value}		1.7.0
switch	Switch selector	checked	Boolean	false	Whether selected
		type	String	switch	Style, valid value: switch, checkbox
		bindchange	EventHandle		Triggered a 'change' event when 'checked' is modified, event.detail = {value: checked}
		color	Color		Color of the switch, same as CSS color.
label	Label	for	String		Bind the control's ID

导航(Navigation)：

Component name	Annotation	Component properties
		attribute name	Type	Default value	Instruction	Minimum version
navigator	Application link	url	String		In-app link jump
		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	指定点击时的样式类，当hover-class="none"时，没有点击态效果
		hover-stop-propagation	Boolean	false	Specify whether to block ancestor nodes of this node from being in click state.	1.5.0
		hover-start-time	Number	50	How long after pressing does the click state appear, in milliseconds?
		hover-stay-time	Number	600	Click state retention time after finger release, unit: milliseconds

其中open-type 的有效值如下：

	Instruction	Minimum version
navigate	The function corresponding to wx.navigateTo
redirect	The functionality corresponding to wx.redirectTo
switchTab	Corresponds to the function of wx.switchTab.
reLaunch	Corresponds to wx.reLaunch functionality.	1.1.0
navigateBack	Corresponds to the wx.navigateBack function.	1.1.0

多媒体(Media)：

Component name	Annotation	Component properties
		attribute name	Type	Default value	Instruction	Minimum version
audio	Audio	id	String		Unique identifier for the audio component
		src	String		Resource URL for audio playback
		loop	Boolean	false	Is it on a loop?
		controls	Boolean	false	Is the default control displayed?
		poster	String		The default audio cover image resource address on the default control, setting poster is ineffective if the controls attribute value is false.
		name	String	Unknown audio	The default audio name on the control is invalid if the controls attribute is set to false.
		author	String	Unknown author	The default author name on the control, set author invalid if the controls property value is false.
		binderror	EventHandle		An error event is triggered when an error occurs, detail = {errMsg: MediaError.code}
		bindplay	EventHandle		Trigger play event on start/continue playback
		bindpause	EventHandle		A "pause" event is triggered when playback is paused.
		bindtimeupdate	EventHandle		The timeupdate event is triggered when the playback progress changes, detail = {currentTime, duration}.
		bindended	EventHandle		时 When the playback reaches the end, the "ended" event is triggered.
image	Picture	src	String		Image resource URL
		mode	String	'scaleToFill'	Image cropping and scaling modes
		lazy-load	Boolean	false	Lazy loading of images. Only effective for images 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		On image load complete, event name for publishing to AppService: event.detail = {height:'Image Height in px', width:'Image Width in px'}
video	Video	src	String		Resource address for playing video
		initial-time	Number		Specify the initial playback position of the video.	1.6.0
		duration	Number		Specify video duration	1.1.0
		controls	Boolean	true	Is the default playback control displayed (play/pause button, playback progress, time)?
		danmu-list	Object Array		Barrage list
		danmu-btn	Boolean	false	Whether to display the bulletin button, valid only at initialization, cannot be changed dynamically.
		enable-danmu	Boolean	false	Whether to display bullet comments is only effective at initialization and cannot be changed dynamically.
		autoplay	Boolean	false	Is it autoplaying?
		loop	Boolean	false	Is it on a loop?	1.4.0
		muted	Boolean	false	Is it muted playback?	1.4.0
		page-gesture	Boolean	false	In non-fullscreen mode, is brightness and volume adjustment gesture enabled?	1.6.0
		direction	Number		Set video orientation when full-screen, or it will be automatically judged based on aspect ratio if not specified. Valid values are 0 (normal vertical), 90 (screen counterclockwise 90°), -90 (screen clockwise 90°).	1.7.0
		bindplay	EventHandle		Trigger play event on start/continue playback
		bindpause	EventHandle		A "pause" event is triggered when playback is paused.
		bindended	EventHandle		时 When the playback reaches the end, the "ended" event is triggered.
		bindtimeupdate	EventHandle		Triggered when playback progress changes, event.detail = {currentTime, duration}. Firing frequency: once every 250ms.
		bindfullscreenchange	EventHandle		When the video enters and exits full-screen, event.detail = {fullScreen, direction}, with direction being either vertical or horizontal.	1.4.0
		objectFit	String	contain	When video size doesn't match container size, its display: contain, fill, cover.
		poster	String		Video thumbnail image network resource address; if the controls attribute value is false, setting poster is invalid.

地图(Map)：

Component name	Annotation	Component properties
		attribute name	Type	Default value	Instruction	Minimum version
map	map	longitude	Number		Central Meridian
		latitude	Number		Central latitude
		scale	Number	16	Zoom level, range 5-18
		markers	Array		Marker point
		covers	Array		Will be removed, please use markers.
		polyline	Array		Route
		circles	Array
		controls	Array		Control
		include-points	Array		Zoom in to include all given coordinate points
		show-location	Boolean		Show current location with direction
		bindmarkertap	EventHandle		Trigger when clicking on the marker point
		bindcallouttap	EventHandle		Triggered when clicking the bubble corresponding to the marked point	1.2.0
		bindcontroltap	EventHandle		Triggered when the control is clicked.
		bindregionchange	EventHandle		Triggered when the field of view changes.
		bindtap	EventHandle		Triggered when clicking on the map.
		bindupdated	EventHandle		Triggered when map rendering is completed.	1.6.0

画布(Canvas)：

Component name	Annotation	Component properties
		attribute name	Type	Default value	Instruction	Minimum version
canvas	canvas	src	String		Resource address for playing video
		initial-time	Number		Specify the initial playback position of the video.	1.6.0
		duration	Number		Specify video duration	1.1.0
		controls	Boolean	true	Is the default playback control displayed (play/pause button, playback progress, time)?
		danmu-list	Object Array		Barrage list
		danmu-btn	Boolean	false	Whether to display the bulletin button, valid only at initialization, cannot be changed dynamically.
		enable-danmu	Boolean	false	Whether to display bullet comments is only effective at initialization and cannot be changed dynamically.
		autoplay	Boolean	false	Is it autoplaying?
		loop	Boolean	false	Is it on a loop?	1.4.0
		muted	Boolean	false	Is it muted playback?	1.4.0
		page-gesture	Boolean	false	In non-fullscreen mode, is brightness and volume adjustment gesture enabled?	1.6.0
		direction	Number		Set video orientation when full-screen, or it will be automatically judged based on aspect ratio if not specified. Valid values are 0 (normal vertical), 90 (screen counterclockwise 90°), -90 (screen clockwise 90°).	1.7.0
		show-progress	Boolean	true	If not set, it will display when the width is greater than 240.	1.9.0
		show-fullscreen-btn	Boolean	true	Is the full-screen button displayed?	1.9.0
		show-play-btn	Boolean	true	Is the play button on the video control bar at the bottom displayed?	1.9.0
		show-center-play-btn	Boolean	true	Is the play button displayed in the middle of the video?	1.9.0
		enable-progress-gesture	Boolean	true	Is gesture control for progress enabled?	1.9.0
		bindplay	EventHandle		Trigger play event on start/continue playback
		bindpause	EventHandle		A "pause" event is triggered when playback is paused.
		bindended	EventHandle		时 When the playback reaches the end, the "ended" event is triggered.
		bindtimeupdate	EventHandle		Triggered when playback progress changes, event.detail = {currentTime, duration}. Firing frequency: once every 250ms.
		bindfullscreenchange	EventHandle		When the video enters and exits full-screen, event.detail = {fullScreen, direction}, with direction being either vertical or horizontal.	1.4.0
		objectFit	String	contain	When video size doesn't match container size, its display: contain, fill, cover.
		poster	String		Video thumbnail image network resource address; if the controls attribute value is false, setting poster is invalid.