Basic components

The framework gives developers a series of basic components that they can combine to expedite the development process.

What is a component?

  • A component is the basic unit used to create a view layer.

  • A component comes with some functions and WeChat styles.

  • A component usually includes Start tag and End tag. Attributeis used to modify the component, andcontent` is within two tags.

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

    Note: all component attributes are entered in lowercase and connected with a hyphen -.

Attribute type

Type Description Notes
Boolean Boolean value If the attribute is written for a component, no matter what the attribute is equal to, the value is true. The attribute value is false only when the attribute is not written for the component. If the attribute value is a variable, the variable's value will be converted to a Boolean value
Number Digit 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 Page
Any Arbitrary attribute

Common attribute type

Attributes shared by all components:

Attribute name Type Description Note
id String A unique identifier for the component Keeps the entire page unique
class String Style class for the component The style class defined in the corresponding WXSS
style String Inline style for the component This is an inline style that can be dynamically set
hidden Boolean Is the component displayed All components are displayed by default
data-* Any Custom attribute When an event is triggered on the component, it will be sent to the event handler function
bind* / catch* EventHandler Component event See event

Special attribute

Nearly all components have their own customized attributes. You can modify the function or style of the component. View definitions of each component.

Component list

There are seven basic component types:

View Container:

Component Name Description
view View Container
scroll-view A scrollable view container
swiper A sliding view container

Basic Content:

Component Name Description
icon Icon
text Text
progress Progress bar


Tag Name Description
button Button
form Form
input Input box
checkbox Multi-item selector
radio Single item selector
picker List selector
picker-view Embedded list selector
slider Slider selector
switch Switch selector
label Label


Component Name Description
navigator Application link


Component Name Description
audio Audio
image Image
video Video


Component Name Description
map Map


Component Name Description
canvas Canvas

个结果 ""

    没有找到相关内容 ""