组件列表

智能小程序组件，是对数据和方法进行封装的小程序视图控件，拥有自己的属性和方法，可帮助开发者拼装完成自己的智能小程序页面。由于组件可能被转译为不同端对应的代码，所以在页面创建过程中，禁止使用智能小程序组件标签以外的标签（例如：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

滑块视图容器子项。仅可放置在组件中，宽高自动设置为 100%

view

视图容器。相当于 html 中的 div ，可将页面分割为独立的、不同的部分。如果需要使用滚动视图，请使用 scroll-view

基础内容

组件名称 解释

icon

图标。放置图标的元素

progress

进度条

rich-text

富文本。nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降

text

文本。放置文本的元素

表单组件

组件名称 解释

button

按钮

checkbox

多选项目

checkbox-group

多选项目组。内部由多个 checkbox 组成

form

表单。将 form 组件内用户输入 / 选择的、、、、、

提交。当表单中 form-type 为 submit 时，点击的组件会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key

input

输入框。v3.105.0 开始支持同层渲染

label

表单组件标签。用来改进表单的可用性，使用 for 属性找到对应的 id（必须写 for），当点击时，就会触发对应的控件

picker

底部弹起的滚动选择器

picker-view

可嵌页面的滚动选择器

picker-view-column

可嵌页面的滚动选择器子项。仅可放置于

中，其孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致

radio

单选项目

radio-group

单选项目组。内部由多个 radio 组成

slider

滑动选择器

switch

开关选择器

textarea

多行输入框。v3.140.1 起支持同层渲染，内部不支持嵌套其他组件

导航

组件名称 解释

navigator

页面导航。控制小程序的跳转，既可在当前小程序内部进行跳转，也可跳转至其他小程序

tabs

标签栏。用于让用户在不同的视图中进行切换

tab-item

标签栏子项。配合 tabs 一起使用，展示标签栏栏内单个 tab 内容

媒体组件

组件名称 解释

animation-video

为智能小程序提供了将特定视频资源渲染为透明背景动效的能力，可以帮助开发者低成本实现更为沉浸，丰富的动画效果

animation-view

Lottie 动画组件。客户端创建的原生组件，使用时请注意相关限制

audio

音频

camera

相机。使用该组件需通过获取用户授权设置申请授权后方可对用户发起授权申请，可在 中查看相关错误码信息

ar-camera

AR 相机。在 提交并上线 AR 项目后（选择“百度 App - 相机”渠道）获取到 AR Key、AR Type，可配置展现，基础库 3.15.104 开始支持

image

图片。image 组件默认宽度 300px、高度 225px

live-player

实时视频播放器。客户端创建的原生组件，使用时请注意相关限制，基础库 3.140.1 起支持同层渲染

video

视频。基础库 3.70.0 开始支持同层渲染

rtc-room

实时音视频通话房间。基础库 3.200.0 开始支持

rtc-room-item

实时音视频通话画面。基础库 3.200.0 开始支持，默认为同层渲染

地图

组件名称 解释

map

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

画布

组件名称 解释

canvas

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

开放能力

组件名称 解释

ad

广告组件。按照流量主开通指引中的操作获取广告组件代码

web-view

网页容器。web-view 组件是一个可以用来承载网页的容器，会自动铺满整个智能小程序页面

follow-swan

关注小程序 button 组件可帮助开发者实现用户对小程序的关注。用户通过本组件“关注小程序”后，可以在“百度 APP” - “我的”中找到我的小程序

login

联合登录 / 手机号授权内嵌组件，可用于快速完成用户登录授权获取手机号

inline-payment-panel

收银台支付内嵌组件。可以将支付渠道内嵌在小程序提单页面内，缩短交易链路，提升支付转化率

top-swan

置顶小程序 button 组件可帮助开发者实现用户对小程序的置顶。用户通过本组件“置顶小程序”后，可以在“百度 APP” - “我的”中找到置顶小程序

内容服务组件

组件名称 解释

like

点赞。支持将用户对文章/评论的点赞行为同步给百度后端，实现对点赞对象(若此对象的文章/评论是在小程序内用评论组件生产)的消息通知。需要将点赞对象的文章/评论内容一起提交

One-stop Interaction

一站式互动组件。为开发者提供一整套包含评论发布器、评论列表及详情、点赞、转发功能的互动 bar 能力，此外还提供数据存储、数据内容审核、用户接收百度 APP 消息通知的一站式组件服务

comment-list

一站式互动组件的评论列表组件。可单独使用

comment-detail

一站式互动组件的评论详情组件。需与列表组件搭配使用

动态库组件

组件名称 解释

Editor 富文本编辑器

eidtor 动态库提供了在小程序中进行富文本编辑的方法

swan-sitemap 小程序索引页组件

swan-sitemap 动态库是百度小程序官方发布的用于生成小程序索引页的动态库组件，开发者可以在小程序项目中引用 swan-sitemap 动态库百度小程序官方文档，并通过 swan-sitemap-list 组件高效的开发出符合搜索收录规范的小程序索引页

ECharts 图表

ECharts 动态库是智能小程序基于 ECharts 实现的图表动态库，提供了图表在小程序中的使用方法。如果在使用中碰到问题，可以在 Github 提问

modelviewer VR 3D 模型-beta

modelviewer 动态库提供了在小程序中展示 3D 模型功能，底层基于百度 webVR SDK Hydreigon 实现

panoviewer VR 全景图-beta

panoviewer 动态库提供了在小程序中播放全景图的方法，底层基于百度 webVR SDK Hydreigon 实现

spintileviewer VR 3D 环物—beta

spintileviewer 动态库提供了在小程序中播放 3D 环物的方法，底层基于百度 webVR SDK Hydreigon 实现

vrvideo VR 全景-beta

vrvideo 动态库提供了在小程序中播放全景视频的方法