小程序框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行业务开发。
组件共有属性
所有的组件包含以下属性：
属性名 | 类型 | 描述 |
|---|---|---|
id | String | 组件的唯一标识 |
class | String | 样式类 |
style | String | 内联样式 |
data-* | Any | 自定义属性，当事件触发时，会将自定义属性传递给事件处理函数。 |
on* / catch* | EventHandle | 事件绑定，遵循驼峰命名规范，例如 |
组件属性类型
每个组件提供了一系列的属性配置，每个属性值都有类型要求：
类型 | 描述 |
|---|---|
Boolean | 布尔值 |
Number | 数字 |
String | 字符串 |
Array | 数组 |
Object | 对象 |
EventHandle | 事件处理函数，需在 小程序页面 中定义事件处理函数名对应的实现。 |
any | 任意类型 |
组件数据绑定
通过 {{}} 才能传入指定的属性类型数据，参见 数据绑定。
基础组件总览
视图容器
名称 | 功能说明 |
|---|---|
view | 视图容器 |
swiper | 滑块视图容器 |
scroll-view | 可滚动视图区域 |
cover-view | 覆盖在原生组件之上的文本视图 |
movable-view | 可移动的视图容器 |
movable-area |
|
基础内容
名称 | 功能说明 |
|---|---|
text | 文本 |
icon | 图标 |
progress | 进度条 |
rich-text | 富文本组件 |
表单组件
名称 | 功能说明 |
|---|---|
button | 按钮 |
form | 表单 |
label | 用来改进表单组件的可用性 |
input | 输入框 |
textarea | 多行输入框 |
radio | 单选项目 |
checkbox | 多项选择器组 |
switch | 单选项目 |
slider | 滑动选择器 |
picker-view | 嵌入页面的滚动选择器 |
picker | 从底部弹起的滚动选择器 |
导航
名称 | 功能说明 |
|---|---|
navigator | 页面链接 |
媒体组件
名称 | 功能说明 |
|---|---|
image | 图片组件 |
video | 视频组件 |
画布
名称 | 功能说明 |
|---|---|
canvas | 画布 |
地图
名称 | 功能说明 |
|---|---|
map | 地图组件 |
开放组件
名称 | 功能说明 |
|---|---|
web-view | 承载 H5 网页的组件 |