May 18, 2021 WeChat Mini Program Development Document
Frameworks provide developers with a range of foundation components that developers can develop quickly by combining them.
What is a component:
A component typically includes
开始标签
the End
结束标签
属性
is used to decorate the
内容
content within two labels.
<tagname property="value">
Content goes here ...
</tagename>
Note: All components and properties are in small case to hyphen
-
connection
Type | Describe | Annotations |
---|---|---|
Boolean | Boolean value |
The component writes the property, regardless of what the property is equal
true
and its value is true, and the property value is false only if the property is not written on the
false
If the property value is a variable, the value of the variable is converted to the Boolean type
|
Number | Digital |
1
,
2.5
|
String | String |
"string"
|
Array | Array |
[ 1, "string" ]
|
Object | Object |
{ key: value }
|
EventHandler | The name of the event handler |
"handlerName"
of
the
event handler defined in page
|
Any | Any property |
Properties that all components have:
The property name | Type | Describe | Annotations |
---|---|---|---|
Id | String | The unique marking of the component | Keep the entire page unique |
class | String | The style class of the component | The style class defined in the corresponding wxss |
style | String | The inline style of the component | Inline styles that can be set dynamically |
hidden | Boolean | Whether the component is displayed | All components are displayed by default |
data-* | Any | Custom attribute | When the event triggered on the component, it will be sent to the event handler. |
bind* / catch* | EventHandler | Component event | See event |
Almost all components have their own defined properties, which can be modified on the functionality or style of the component, please refer to each Assembly Definition.
Basic components are divided into the following eight categories:
View Container:
Component name | illustrate |
---|---|
view | View container |
scroll-view | Rolling view container |
swiper | Slulatable view container |
Basic Content:
Component name | illustrate |
---|---|
icon | Icon |
text | Text |
progress | Progress bar |
Form:
The label name | Description |
---|---|
button | Button |
form | The form |
input | Enter the box |
checkbox | Multiple selectors |
radio | Single selector |
picker | List selector |
picker-view | Inline list selector |
slider | Slide the selector |
switch | Switch selector |
label | Label |
Navigation:
The name of the component | Description |
---|---|
navigator | In-app jumps |
Multimedia:
The name of the component | Description |
---|---|
audio | Audio |
image | Image |
video | Video |
Map:
The name of the component | Description |
---|---|
map | Map |
Canvas:
The name of the component | Description |
---|---|
canvas | Canvas |
Customer service sessions:
The name of the component | Description |
---|---|
contact-button | Go to the customer service session button |