组件概述
收藏我的收藏
收藏组件简介
小程序框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行业务开发。
什么是组件：
- •在
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, 以组件文档为准。 |
特殊属性
几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰，请参考各个组件的文档。
基础内容
组件 | 描述 |
文本组件。 | |
富文本组件。 | |
进度条。 | |
图标。 |
视图容器
组件 | 描述 |
蒙层组件。 | |
视图容器，相当于 html 中的 div 。 | |
movable-view 的可移动区域。 | |
表单
组件 | 描述 |
按钮，用于强调操作并引导用户去点击。 | |
多选项目。 | |
输入框组件，用于键盘交互。 | |
用于改进表单组件的可用性。可使用 for 属性找到对应组件的 id，或者将组件放在该标签下。当点击时，就会触发对应的组件。for 优先级高于内部组件，内部有多个组件的时候默认触发第一个组件。 | |
从底部弹起的滚动选择器，现支持五种选择器，通过 mode 属性来设置，分别是 selector 普通选择器，multiSelector 多列选择器，time 时间选择器，date 日期选择器，region 省市区选择器，默认是 selector 普通选择器。 | |
单项选择器。 | |
滑动选择器。 | |
开关选择器。 | |
导航
组件 | 描述 |
页面链接，控制小程序的跳转。 navigator 子节点的背景色应为透明色。 |
媒体
组件 | 描述 |
图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式。 | |
组件包含两个区域：头部区域以及直播预览流区域。 | |
画布
组件 | 描述 |
画布。可使用 JS 操作 Canvas 上下文进行绘制。 |
地图
组件 | 描述 |
开放能力
组件 | 描述 |
该组件是一个用于承载网页的容器，将 H5 切入到小程序内部，铺满整个页面。 使用该组件要进行业务域名配置，仅支持添加开发者可控制(能放置校验文件到域名根目录)的域名。个人类型的小程序暂不支持使用。 | |
广告组件。 | |
用于展示字节生态开放数据。 | |
直播间状态组件。 | |
支持小程序拉起平台能力，需要将 button 组件 open-type 的值设置为 platformIm。 | |
支持小程序跳转到视频播放页，需要将 button 组件 open-type 的值设置为 navigateToVideoView。 | |
支持小程序跳转抖音号个人页，需要将 button 组件 open-type 的值设置为 openAwemeUserProfile。 | |
支持小程序打开直播间，需要将 button 组件 open-type 的值设置为 openWebcastRoom。 |
原生组件
原生组件是指在小程序页面中通过客户端实现的组件，包括：
- •textarea
- •video
- •live-player
- •map
- •input
- •ad
- •canvas（V2 版本）
