WeChat Open Platform

Mini Programs Documentation

Base components

The framework has provided a series of base components for developers. Developers can make rapid developments by combining these base components.

What are components?

  • Components are the basic constituent units of the view layer.
  • Components come with some functions and WeChat styles.
  • A component usually includes a start tag and end tag. Attributes are used to modify the component, the content is within the two tags.

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

    Note: All components and attributes use lowercase letters and are linked by a hyphen symbol -.

Attribute types

Type Description Notes
Boolean Boolean value The component writes this attribute. Its value is always true, regardless of what the attribute is equal to. The attribute value will only be false when the attribute is not written on the component. If the attribute value is variable, the variable value will be converted into Boolean type.
Number Number 1, 2.5
String String "string"
Array Array [ 1, "string" ]
Object Object { key: value }
EventHandler Event processing function name The "handlerName" is the event processing function name defined in Page
Any Any attribute  

Common attribute type

Attributes that all components possess:

Attribute name Type Description Notes
id String Component unique identifier Maintains uniqueness of entire page
class String Component style type Style type defined in corresponding WXSS
style String Component internal stylesheet Internal styles that can be dynamically set
hidden Boolean Whether component displayed Default display for all components
data-* Any Custom attribute Will be sent to the event processing function when an event is triggered on the component
bind* / catch* EventHandler Component event Refer to Events for more details

Special attributes

Almost all components have their own respective custom attributes that can modify the component's functions or styles. Please refer to the definitions for each component.

Component list

Base components are divided into the following seven categories:

View container:

Component name Description
view View container
scroll-view Scrollable view container
swiper Sliding view container

Basic content:

Component name Description
icon Icon
text Text
progress Progress bar

Form:

Tag name Description
button Button
form Form
input Input box
checkbox Multi selector
radio Single selector
picker List selector
picker-view Built-in list selector
slider Scroll selector
switch Switch selector
label Tag

Navigation:

Component name Description
navigator Application link

Multimedia:

Component name Description
audio Audio
image Image
video Video

Map:

Component name Description
map Map

Canvas:

Component name Description
canvas Canvas

Service Center session:

Component name Description
contact-button Enter Service Center Session button