组件概述

基础内容

视图容器

表单

导航

媒体

画布

地图

开放能力

行业开放

原生组件

拓展组件

组件概述
收藏
我的收藏

组件简介

小程序框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行业务开发。

什么是组件：

•

组件在 .ttml 中使用，是视图层的基本组成单元。

•

一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之间。

<text prop-name="propValue">你好，小程序</text>

注意
所有组件与属性名称都是小写，以连字符(-)连接。

属性类型

类型	描述
Boolean	布尔值
Number	数字
String	字符串
Array	数组
Object	对象
EventHandler	事件回调函数名

共有属性

任何组件都可以定义以下属性：

属性名	类型	描述	说明
id	String	组件的唯一标识	无
class	String	样式类	在对应的 ttss 中定义的样式类。
style	String	内联样式	无
hidden	Boolean	组件是否显示	无
data-*	Any	数据属性	可以定义任意类型属性的数据，并可以在事件回调中通过 dataset 获取。
bind* / catch*	EventHandler	事件回调	部分组件不支持 catch, 以组件文档为准。

特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰，请参考各个组件的文档。

基础内容

组件	描述
text 文本	文本组件。
rich-text 富文本	富文本组件。
progress 进度条	进度条。
icon 图标	图标。

视图容器

组件	描述
mask 蒙层	蒙层组件。
view 视图容器	视图容器，相当于 html 中的 div 。
scroll-view 可滚动视图区域	可滚动视图区域，可实现横向滚动和竖向滚动。使用竖向滚动时，需要给定一个固定高度，可以通过 ttss 来设置 height。组件属性的长度单位支持 px 和 rpx。
swiper 滑块视图容器	滑块视图容器。内部只允许使用 swiper-item 组件来描述具体滑块内容，否则会导致未定义的行为。
swiper-item	滑块视图容器子项，仅可放置在 swiper 组件中，宽高自动设置为 100%。
movable-area 可移动视图区域	movable-area 是 movable-view 的可移动区域容器。
movable-view 可移动视图容器	可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

表单

组件	描述
button 按钮	按钮，用于强调操作并引导用户去点击。
checkbox 多选选择器	多选项目。
checkbox-group 多项选择器	多项选择器组，内部由多个 checkbox 组成。
form 表单	表单用于收集并提交组件内用户通过 switch、input、checkbox、slider、radio、picker、textarea 等控件输入的数据。
input 输入框	输入框组件，用于键盘交互。
label 表单组件标签	用于改进表单组件的可用性。可使用 for 属性找到对应组件的 id，或者将组件放在该标签下。当用户点击时，系统触发对应组件。for 优先级高于内部组件，内部有多个组件时默认触发第一个组件。
picker 底部弹起的滚动选择器	从底部弹起的滚动选择器，现支持五种选择器，通过 `mode` 属性来设置，分别是 `selector` 普通选择器，`multiSelector` 多列选择器，`time` 时间选择器，`date` 日期选择器，`region` 省市区选择器，默认是 `selector` 普通选择器。
picker-view 嵌入页面的滚动选择器	picker-view 是嵌入页面的滚动选择器。子组件必须是 picker-view-column。
picker-view-column 嵌入页面的滚动选择器子项	滚动列，需要配合 picker-view 组件使用，作为 picker-view 其中的一列，系统自动设置其高度与 picker-view 的高度保持一致。
radio 单选项目	单项选择器。
radio-group 单项选择器	单项选择器，内部由多个 radio 组成。
slider 滑动选择器	滑动选择器。
switch 开关选择器	开关选择器。
textarea 多行文本输入框	多行文本输入框。该组件是原生组件，支持同层渲染。

媒体

组件	描述
image 图片	图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式。
video 视频	视频组件。相关 API 请参考 tt.createVideoContext。
live-preview 直播预览流组件	组件包含两个区域：头部区域以及直播预览流区域。使用该功能前开发者需要去开发者后台为对应的抖音号申请直播预览流组件能力，详情见引导跳转到直播间能力。
camera 相机	相机组件。该组件为原生组件。通过 tt.createCameraContext 可以获取相机上下文操作相机。

画布

组件	描述
canvas 画布	画布。可使用 JS 操作 Canvas 上下文进行绘制。

地图

组件	描述
map 地图	地图组件。相关 API tt.createMapContext。

开放能力

组件	描述
web-view 网页容器	该组件是一个用于承载网页的容器，将 H5 切入到小程序内部，铺满整个页面。使用该组件要进行业务域名配置，仅支持添加开发者可控制(能放置校验文件到域名根目录)的域名。个人类型的小程序暂不支持使用。
ad 广告	广告组件。
open-data 开放数据	用于展示字节生态开放数据。
aweme-data 直播间状态组件	直播间状态组件。使用该功能前开发者需要去开发者后台为对应的抖音号申请直播呼吸灯组件能力，详情见引导跳转到直播间能力。
button 组件 IM 客服能力	支持小程序拉起 IM 客服能力，需要将 button 组件 open-type 的值设置为 im，详见抖音 IM 客服。
button 组件平台客服能力	支持小程序拉起平台能力，需要将 button 组件 open-type 的值设置为 platformIm。
button 组件跳转视频播放页	支持小程序跳转到视频播放页，需要将 button 组件 open-type 的值设置为 navigateToVideoView。
button 组件跳转抖音号个人页	支持小程序跳转抖音号个人页，需要将 button 组件 open-type 的值设置为 openAwemeUserProfile。使用该功能前开发者需要到开发者后台-设置-关联设置-抖音号管理为对应的抖音号申请跳转抖音号个人页能力，具体信息请参考关注抖音号。
button 组件跳转直播间	支持小程序打开直播间，需要将 button 组件 open-type 的值设置为 openWebcastRoom。使用该功能前开发者需要到开发者后台-设置-关联设置-抖音号管理为对应的抖音号申请跳转抖音直播间能力，并在能力-直播间基础中申请该能力，具体信息请参考引导跳转到直播间。

原生组件

原生组件是指在小程序页面中通过客户端实现的组件，包括以下组件：

•

textarea

•

video

•

live-player

•

map

•

input

•

canvas（V2 版本）

详情请参见原生组件。

组件	描述
navigator 页面链接	页面链接，控制小程序的跳转。navigator 子节点的背景色应为透明。

组件概述收藏我的收藏

组件简介

属性类型

共有属性

特殊属性

基础内容

视图容器

表单

导航

媒体

画布

地图

开放能力

原生组件

组件概述
收藏
我的收藏