Component overview

Updated at:

The Mini Program framework provides a set of basic components that you can combine for service development.

Common component attributes

All components share these attributes:

Attribute

Type

Description

Remarks

id

String

Unique component identifier.

-

class

String

Style classes.

-

style

String

Inline styles.

-

data-*

Any

Custom attributes

Passed to the event handler when an event triggers.

on* / catch*

EventHandle

Event binding. Uses camelCase, such as onTap.

Events.

Component attribute types

Each component property accepts a specific type:

Type

Description

Remarks

Boolean

Boolean

-

Number

Numeric

-

String

String

-

Array

Array

-

Object

Object

-

EventHandle

The event handler

Implement the handler in Page.

any

Any type.

-

Component data binding

Pass attribute data through {{}}. Bind Data.

Basic components

View containers

Name

Function

view

The view container.

swiper

The slider view container.

scroll-view

The scrollable view area.

cover-view

The text view overlaid on native components.

movable-view

The movable view container.

movable-area

The movable area of <movable-view>.

Basic content

Name

Function

text

Text display.

icon

The icon.

progress

The progress bar.

rich-text

The rich-text component.

Form components

Name

Function

button

The button.

form

The form.

label

Improves form component usability.

input

Input field.

textarea

Multi-line input field.

radio

Radio button.

checkbox

Checkbox group.

switch

Toggle switch.

slider

Slider control.

picker-view

Embedded scroll selector.

picker

Bottom popup scroll selector.

Navigation

Name

Description

navigator

Page links

Media components

Name

Description

image

The image component.

video

The video component.

Canvas

Name

Function

canvas

The canvas.

Map

Name

Function

map

The map component.

Open components

Name

Function

web-view

Hosts HTML5 webpages.