组件列表

智能小程序组件，是对数据和方法进行封装的小程序视图控件，拥有自己的属性和方法，可帮助开发者拼装完成自己的智能小程序页面。由于组件可能被转译为不同端对应的代码，所以在页面创建过程中，禁止使用智能小程序组件标签以外的标签（例如：HTML 中 script/link/iframe 标签）。
本文汇总了智能小程序提供的所有组件，具体组件信息可参阅对应文档。

视图容器

组件名称解释
cover-image图片视图。覆盖在原生组件之上可覆盖的原生组件同 cover-view，支持嵌套在 cover-view 里
cover-view文本视图。覆盖在原生组件之上，只支持嵌套 cover-view、cover-image 组件
movable-area可移动视图区域。movable-view 的可移动区域
movable-view可移动的视图容器。在页面中可以拖拽滑动，movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动
scroll-view可滚动视图区域。可实现横向滚动和竖向滚动。使用竖向滚动时，需要给定一个固定高度，可以通过 css 来设置 height
swiper滑块视图容器。内部只允许使用<swiper-item>组件描述滑块内容，否则会导致未定义的行为
swiper-item滑块视图容器子项。仅可放置在<swiper>组件中，宽高自动设置为 100%
view视图容器。相当于 html 中的 div ，可将页面分割为独立的、不同的部分。如果需要使用滚动视图，请使用 scroll-view

基础内容

组件名称解释
icon图标。放置图标的元素
progress进度条
rich-text富文本。nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降
text文本。放置文本的元素

表单组件

组件名称解释
button按钮
checkbox多选项目
checkbox-group多选项目组。内部由多个 checkbox 组成
form表单。将 form 组件内用户输入 / 选择的<switch>、<input>、<checkbox>、<slider>、<radio>、<picker>提交。当<form>表单中 form-type 为 submit 时，点击的<button>组件会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key
input输入框。v3.105.0 开始支持同层渲染
label表单组件标签。用来改进表单的可用性，使用 for 属性找到对应的 id（必须写 for），当点击时，就会触发对应的控件
picker底部弹起的滚动选择器
picker-view可嵌页面的滚动选择器
picker-view-column可嵌页面的滚动选择器子项。仅可放置于<picker-view />中，其孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致
radio单选项目
radio-group单选项目组。内部由多个 radio 组成
slider滑动选择器
switch开关选择器
textarea多行输入框。v3.140.1 起支持同层渲染，内部不支持嵌套其他组件

导航

组件名称解释
navigator页面导航。控制小程序的跳转，既可在当前小程序内部进行跳转，也可跳转至其他小程序
tabs标签栏。用于让用户在不同的视图中进行切换
tab-item标签栏子项。配合 tabs 一起使用，展示标签栏栏内单个 tab 内容

媒体组件

组件名称解释
animation-video为智能小程序提供了将特定视频资源渲染为透明背景动效的能力，可以帮助开发者低成本实现更为沉浸，丰富的动画效果
animation-viewLottie 动画组件。客户端创建的原生组件，使用时请注意相关限制
audio音频
camera相机。使用该组件需通过获取用户授权设置申请授权后方可对用户发起授权申请，可在 swan.authorize 中查看相关错误码信息
ar-cameraAR 相机。在 DuMixAR 内容开放平台提交并上线 AR 项目后（选择“百度 App-相机”渠道）获取到 AR Key、AR Type，可配置展现，基础库 3.15.104 开始支持
image图片。image 组件默认宽度 300px、高度 225px
live-player实时视频播放器。客户端创建的原生组件，使用时请注意相关限制，v3.140.1 起支持同层渲染
video视频。v3.70.0 开始支持同层渲染
rtc-room实时音视频通话房间。v3.200.0 开始支持
rtc-room-item实时音视频通话画面。v3.200.0 开始支持，默认为同层渲染

地图

组件名称解释
map地图。客户端创建的原生组件，使用时请注意相关限制

画布

组件名称解释
canvas画布。一个矩形区域，开发者可以在页面上绘制图形。canvas 拥有多种绘制路径、矩形、图形、字符以及添加图像的方法

开放能力

组件名称解释
ad广告组件。按照流量主开通指引中的操作获取广告组件代码
open-data开放数据。用于展示百度 App 开放的数据
web-view网页容器。web-view 组件是一个可以用来承载网页的容器，会自动铺满整个智能小程序页面

内容服务组件

组件名称解释
like点赞。支持将用户对文章/评论的点赞行为同步给百度后端，实现对点赞对象(若此对象的文章/评论是在小程序内用评论组件生产)的消息通知。需要将点赞对象的文章/评论内容一起提交
follow-swan关注小程序 button 组件可帮助开发者实现用户对小程序的关注。用户通过本组件“关注小程序”后，可以在“百度 APP” - “我的”中找到我的小程序
One-stop Interaction一站式互动组件。为开发者提供一整套包含评论发布器、评论列表及详情、点赞、转发功能的互动 bar 能力，此外还提供数据存储、数据内容审核、用户接收百度 APP 消息通知的一站式组件服务
comment-list一站式互动组件的评论列表组件。可单独使用
comment-detail一站式互动组件的评论详情组件。需与列表组件搭配使用

动态库组件

组件名称解释
Editor 富文本编辑器eidtor 动态库提供了在小程序中进行富文本编辑的方法
swan-sitemap 小程序索引页组件swan-sitemap 动态库是百度小程序官方发布的用于生成小程序索引页的动态库组件，开发者可以在小程序项目中引用 swan-sitemap 动态库，并通过 swan-sitemap-list 组件高效的开发出符合搜索收录规范的小程序索引页
ECharts 图表-betaECharts 动态库是智能小程序基于 ECharts 实现的图表动态库，提供了图表在小程序中的使用方法。如果在使用中碰到问题，可以在 Github 提问
modelviewer VR 3D 模型-betamodelviewer 动态库提供了在小程序中展示 3D 模型功能，底层基于百度 webVR SDK Hydreigon 实现
panoviewer VR 全景图-betapanoviewer 动态库提供了在小程序中播放全景图的方法，底层基于百度 webVR SDK Hydreigon 实现
spintileviewer VR 3D 环物—betaspintileviewer 动态库提供了在小程序中播放 3D 环物的方法，底层基于百度 webVR SDK Hydreigon 实现
vrvideo VR 全景-betavrvideo 动态库提供了在小程序中播放全景视频的方法