UniApp – 基本组件使用说明

简介

本章节主要收集UniApp官方的组件使用汇总

 

基础视图容器

scroll-view 滚动框

小程序中，通常使用滚动框作为内容页，用于滚动显示内容的容器。

注意：使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式，否则滚动框并不会出现滚动效果。

属性名	类型	默认值	说明	平台差异说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number/String	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number/String	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number/String		设置竖向滚动条位置
scroll-left	Number/String		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向	app-nvue，微信小程序
show-scrollbar	Boolean	false	控制是否出现滚动条	App-nvue 2.1.5+
refresher-enabled	Boolean	false	开启自定义下拉刷新	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-threshold	Number	45	设置自定义下拉刷新阈值	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-default-style	String	"black"	设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-background	String	"#FFF"	设置自定义下拉刷新区域背景颜色	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-triggered	Boolean	false	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
enable-flex	Boolean	false	启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。	微信小程序 2.7.3
scroll-anchoring	Boolean	false	开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。	微信小程序 2.8.2
@scrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
@scroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
@refresherpulling	EventHandle		自定义下拉刷新控件被下拉	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrefresh	EventHandle		自定义下拉刷新被触发	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrestore	EventHandle		自定义下拉刷新被复位	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherabort	EventHandle		自定义下拉刷新被中止	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

详情：https://uniapp.dcloud.net.cn/component/scroll-view.html

 

swiper 轮播图

属性说明

属性名	类型	默认值	说明	平台差异说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
active-class	String		swiper-item 可见时的 class	支付宝小程序
changing-class	String		acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class	支付宝小程序
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String		当前所在滑块的 item-id ，不能与 current 被同时指定	支付宝小程序不支持
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长	app-nvue不支持
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
vertical	Boolean	false	滑动方向是否为纵向
previous-margin	String	0px	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	app-nvue、抖音小程序、飞书小程序不支持
next-margin	String	0px	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	app-nvue、抖音小程序、飞书小程序不支持
acceleration	Boolean	false	当开启时，会根据滑动速度，连续滑动多屏	支付宝小程序
disable-programmatic-animation	Boolean	false	是否禁用代码变动触发 swiper 切换时使用动画。	支付宝小程序
display-multiple-items	Number	1	同时显示的滑块数量	app-nvue、支付宝小程序不支持
skip-hidden-item-layout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	App、微信小程序、京东小程序
disable-touch	Boolean	false	是否禁止用户 touch 操作	App 2.5.5+、H5 2.5.5+、支付宝小程序、抖音小程序与飞书小程序（只在初始化时有效，不能动态变更）
touchable	Boolean	true	是否监听用户的触摸事件，只在初始化时有效，不能动态变更	抖音小程序与飞书小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch）
easing-function	String	default	指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic	微信小程序、快手小程序、京东小程序
@change	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
@transition	EventHandle		swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy	App、H5、微信小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序
@animationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}	抖音小程序与飞书小程序不支持

change 事件返回 detail 中包含一个 source 字段，表示导致变更的原因，可能值如下：

• autoplay 自动播放导致swiper变化。
• touch 用户划动引起swiper变化。
• 其他原因将用空字符串表示。

 

easing-function

值	说明
default	默认缓动函数
linear	线性动画
easeInCubic	缓入动画
easeOutCubic	缓出动画
easeInOutCubic	缓入缓出动画

swiper-item

仅可放置在 <swiper> 组件中，宽高自动设置为100%。注意：宽高100%是相对于其父组件，不是相对于子组件，不能被子组件自动撑开。

属性名	类型	默认值	说明
item-id	String		该 swiper-item 的标识符

 

movable-view

用于拖拽滑动或双指缩放的视图容器

注意：movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

属性名	类型	默认值	说明	平台差异说明
direction	String	none	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否带有惯性
out-of-bounds	Boolean	false	超过可移动区域后，movable-view是否还可以移动
x	Number / String		定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	Number / String		定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping	Number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快	360小程序不支持
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值	360小程序不支持
disabled	Boolean	false	是否禁用
scale	Boolean	false	是否支持双指缩放，默认缩放手势生效区域是在movable-view内	360小程序不支持
scale-min	Number	0.5	定义缩放倍数最小值
scale-max	Number	10	定义缩放倍数最大值
scale-value	Number	1	定义缩放倍数，取值范围为 0.5 - 10
animation	Boolean	true	是否使用动画
@change	EventHandle		拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）
@scale	EventHandle		缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，

除了基本事件外，movable-view提供了两个特殊事件

类型	触发条件	平台差异说明
htouchmove	初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch	微信小程序、百度小程序、QQ小程序、快手小程序、快应用
vtouchmove	初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch	微信小程序、百度小程序、QQ小程序、快手小程序、快应用

 

详情：https://uniapp.dcloud.net.cn/component/movable-view.html

 

cover-view

覆盖在原生组件上的文本视图。

app-vue和小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view。

属性名	类型	默认值	说明	平台差异说明
scroll-top	number/string		设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效	支付宝小程序不支持

 

Tips

• app-nvue所有组件均为原生渲染，不存在前端组件无法覆盖原生组件的问题。但为了保持多端兼容，nvue里也实现了cover-view，作用与普通view一样。
• 在App端，如果重度使用video和map，推荐使用nvue页面。
• cover-view 嵌套使用时，内部不可直接写文本节点，需要使用 cover-view 包裹。
• App端还可以使用plus.nativeObj.view绘制原生内容，参考:uni-app中使用5+界面控件、plus.nativeObj.view规范
• App端还提供了更灵活和强大的subNvue，参考原生子窗体subNvue
• 在 video 组件中使用时，若想在全屏模式下使用cover-view，只有在微信小程序、App端的nvue页面可实现。
• 微信小程序部分原生组件实现了同层渲染，在指定的基础库版本上，某些原生组件可无需使用cover-view覆盖，详见
• 百度小程序iOS端暂不支持一个页面有多个video时嵌套cover-view，详见。
• 支付宝小程序中 cover-view 不支持嵌套，详见。
• 抖音小程序不需要cover-view，因其原生组件均实现了同层渲染。
• 360小程序不存在原生组件，无此概念。
• cover-view使用注意：京东小程序详见、快手小程序详见、QQ小程序详见 。

 

微信小程序的cover-view使用注意：

• cover-view和cover-image的aria-role仅可设置为button，读屏模式下才可以点击，并朗读出“按钮”；为空时可以聚焦，但不可点击。
• 基础库 2.2.4 起支持 touch 相关事件，也可使用 hover-class 设置点击态。
• 基础库 2.1.0 起支持设置 scale rotate 的 css 样式，包括 transition 动画。
• 基础库 1.9.90 起 cover-view 支持 overflow: scroll，但不支持动态更新 overflow。
• 基础库 1.9.90 起最外层 cover-view 支持 position: fixed。
• 基础库 1.9.0 起支持插在 view 等标签下。在此之前只可嵌套在原生组件map、video、canvas、camera内，避免嵌套在其他组件内。
• 基础库 1.6.0 起支持css transition动画，transition-property只支持transform (translateX, translateY)与opacity。
• 基础库 1.6.0 起支持css opacity。
• 事件模型遵循冒泡模型，但不会冒泡到原生组件。
• 文本建议都套上cover-view标签，避免排版错误。
• 只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。
• 建议子节点不要溢出父节点。
• 支持使用 z-index 控制层级。
• 默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block;
• 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示。

 

基础内容组件

icon 图标

属性说明

属性名	类型	默认值	说明
type	String		icon的类型
size	Number	23	icon的大小，单位px
color	Color		icon的颜色，同css的color

 

各平台 type 有效值说明：

平台	type 有效值
App、H5、微信小程序、QQ小程序	success, success_no_circle, info, warn, waiting, cancel, download, search, clear
支付宝小程序	info, warn, waiting, cancel, download, search, clear, success, success_no_circle,loading
百度小程序	success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect

 

示例：

<icon :type="value" size="26"/>

 

text 文字

属性说明

属性名	类型	默认值	说明	平台差异说明
selectable	Boolean	false	文本是否可选
user-select	Boolean	false	文本是否可选	微信小程序
space	String		显示连续空格	钉钉小程序不支持
decode	Boolean	false	是否解码	百度、钉钉小程序不支持

space 值说明

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

 

Tips

• 支持 \n 方式换行。
• 在app-nvue下，只有<text>才能包裹文本内容。无法在<view>组件包裹文本。
• decode 可以解析的有   < > & '    。
• 各个操作系统的空格标准并不一致。
• 除了文本节点以外的其他节点都无法长按选中。
• 如果使用 <span> 组件编译时会被转换为 <text>。
• nvue 样式 word-wrap 在 Android 平台暂不支持

 

rich-text 富文本

支持默认事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。

属性说明

属性名	类型	默认值	说明	平台兼容
nodes	Array / String	[]	节点列表 / HTML String
space	string		显示连续空格	App、H5、微信基础库2.4.1+详见、QQ小程序、抖音小程序、快手小程序详见
selectable	Boolean	true	富文本是否可以长按选中，可用于复制，粘贴等场景	百度小程序（仅真机支持，基础库 3.150.1 以下版本默认为 false）
image-menu-prevent	Boolean	false	阻止长按图片时弹起默认菜单（将该属性设置为image-menu-prevent或image-menu-prevent="true"），只在初始化时有效，不能动态变更；若不想阻止弹起默认菜单，则不需要设置此属性	百度小程序
preview	Boolean		富文本中的图片是否可点击预览。在不设置的情况下，若 rich-text 未监听点击事件，则默认开启。未显示设置 preview 时会进行点击默认预览判断，建议显示设置 preview	百度小程序
@itemclick	EventHandle		拦截点击事件（只支持 a、img标签），返回当前node信息 event.detail={node}	H5 (3.2.13+)、App-Vue (3.2.13+)

详情：https://uniapp.dcloud.net.cn/component/rich-text.html

 

progress 进度条

属性说明

属性名	类型	默认值	说明	平台差异说明
percent	Number	无	百分比0~100
show-info	Boolean	false	在进度条右侧显示百分比
border-radius	Number/String	0	圆角大小	app-nvue、微信基础库2.3.1+、QQ小程序、快手小程序、京东小程序
font-size	Number/String	16	右侧百分比字体大小	app-nvue、微信基础库2.3.1+、QQ小程序、京东小程序
stroke-width	Number	6	进度条线的宽度，单位px
activeColor	Color	#09BB07（百度为#E6E6E6）	已选择的进度条的颜色
backgroundColor	Color	#EBEBEB	未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画
active-mode	String	backwards	backwards: 动画从头播；forwards：动画从上次结束点接着播	App、H5、微信小程序、QQ小程序、快手小程序、京东小程序
duration	Number	30	进度增加1%所需毫秒数	App-nvue2.6.1+、微信基础库2.8.2+、H5 3.1.11+、App-Vue 3.1.11+、快手小程序、京东小程序
@activeend	EventHandle		动画完成事件	微信小程序、京东小程序

 

基础表单

Button 按钮

属性说明

属性名	类型	默认值	说明	生效时机	平台差异说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标		H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
form-type	String		用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
open-type	String		开放能力
hover-class	String	button-hover	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果		App-nvue 平台暂不支持
hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒
app-parameter	String		打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效		微信小程序、QQ小程序
hover-stop-propagation	boolean	false	指定是否阻止本节点的祖先节点出现点击态		微信小程序
lang	string	'en'	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。		微信小程序
session-from	string		会话来源，open-type="contact"时有效		微信小程序
send-message-title	string	当前标题	会话内消息卡片标题，open-type="contact"时有效		微信小程序
send-message-path	string	当前分享路径	会话内消息卡片点击跳转小程序路径，open-type="contact"时有效		微信小程序
send-message-img	string	截图	会话内消息卡片图片，open-type="contact"时有效		微信小程序
show-message-card	boolean	false	是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效		微信小程序
group-id	String		打开群资料卡时，传递的群号	open-type="openGroupProfile"	QQ小程序
guild-id	String		打开频道页面时，传递的频道号	open-type="openGuildProfile"	QQ小程序
public-id	String		打开公众号资料卡时，传递的号码	open-type="openPublicProfile"	QQ小程序
data-im-id	String		客服的抖音号	open-type="im"	抖音小程序2.68.0版本+
data-im-type	String		IM卡片类型	open-type="im"	抖音小程序2.80.0版本+
data-goods-id	String		商品的id，仅支持泛知识课程库和生活服务商品库中的商品	open-type="im"	抖音小程序2.80.0版本+
data-order-id	String		订单的id，仅支持交易2.0订单	open-type="im"	抖音小程序2.80.0版本+
data-biz-line	String		商品类型，“1”代表生活服务，“2”代表泛知识。	open-type="im"	抖音小程序2.80.0版本+
@getphonenumber	Handler		获取用户手机号回调	open-type="getPhoneNumber"	微信、支付宝、百度、抖音、快手、京东小程序
@getuserinfo	Handler		用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo	open-type="getUserInfo"	微信、QQ、百度、快手、京东小程序
@error	Handler		当使用开放能力时，发生错误的回调	open-type="launchApp"	微信、QQ、快手、京东小程序
@opensetting	Handler		在打开授权设置页并关闭后回调	open-type="openSetting"	微信、QQ、百度、快手、京东小程序
@launchapp	Handler		从小程序打开 App 成功的回调	open-type="launchApp"	微信、QQ、快手、京东小程序
@contact	Handler		客服消息回调	open-type="contact"	微信、QQ、百度、快手小程序
@chooseavatar	Handler		获取用户头像回调	open-type="chooseAvatar"	微信小程序
@agreeprivacyauthorization	Handler		用户同意隐私协议事件回调，open-type="agreePrivacyAuthorization"时有效	open-type="agreeprivacyauthorization"	微信小程序2.33.0
@addgroupapp	Handler		添加群应用的回调	open-type="addGroupApp"	QQ小程序
@chooseaddress	Handler		调起用户编辑并选择收货地址的回调	open-type="chooseAddress"	百度小程序
@chooseinvoicetitle	Handler		用户选择发票抬头的回调	open-type="chooseInvoiceTitle"	百度小程序
@subscribe	Handler		订阅消息授权回调	open-type="subscribe"	百度小程序
@login	Handler		登录回调	open-type="login"	百度小程序
@im	Handler		监听跳转IM的成功回调	open-type="im"

注1：button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

open-type="launchApp"时需要调起的APP接入微信OpenSDK详见

 

size 有效值

值	说明
default	默认大小
mini	小尺寸

button组件也支持style中通过css定义文字大小。

 

type 有效值

值	说明
primary	微信小程序、360小程序为绿色，App、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色，抖音小程序为红色，QQ小程序为浅蓝色。如想在多端统一颜色，请改用default，然后自行写样式
default	白色
warn	红色

button组件也支持style中通过css定义颜色

 

form-type 有效值

值	说明
submit	提交表单
reset	重置表单

 

open-type 有效值

值	说明	平台差异说明
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志	App、微信小程序、QQ小程序
share	触发用户转发	微信小程序、百度小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序、360小程序
getUserInfo	获取用户信息，可以从@getuserinfo回调中获取到用户信息	微信小程序、百度小程序、QQ小程序、快手小程序、京东小程序、360小程序
contact	打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息	微信小程序、百度小程序、快手小程序、抖音小程序
getPhoneNumber	获取用户手机号，可以从@getphonenumber回调中获取到用户信息	微信小程序、百度小程序、抖音小程序、支付宝小程序、快手小程序、京东小程序。App平台另见一键登陆
launchApp	小程序中打开APP，可以通过app-parameter属性设定向APP传的参数	微信小程序、QQ小程序、快手小程序、京东小程序
openSetting	打开授权设置页	微信小程序、QQ小程序、百度小程序、快手小程序、京东小程序、360小程序
chooseAvatar	获取用户头像，可以从@chooseavatar回调中获取到头像信息	微信小程序2.21.2版本+
agreePrivacyAuthorization	用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过 @agreeprivacyauthorization 监听用户同意隐私协议事件。隐私合规开发指南详情可见《小程序隐私协议开发指南》	微信小程序2.33.0版本+
uploadDouyinVideo	发布抖音视频	抖音小程序2.65.0版本+
im	跳转到抖音IM客服	抖音小程序2.80.0版本+
getAuthorize	支持小程序授权	支付宝小程序
lifestyle	关注生活号	支付宝小程序
contactShare	分享到通讯录好友	支付宝小程序基础库1.11.0版本+
openGroupProfile	呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest.json中必须配置groupIdList	QQ小程序基础库1.4.7版本+
openGuildProfile	呼起频道页面，可以通过guild-id属性设定需要打开的频道ID	QQ小程序基础库1.46.8版本+
openPublicProfile	打开公众号资料卡，可以通过public-id属性设定需要打开的公众号资料卡的号码，同时manifest.json中必须配置publicIdList	QQ小程序基础库1.12.0版本+
shareMessageToFriend	在自定义开放数据域组件中,向指定好友发起分享据	QQ小程序基础库1.17.0版本+
addFriend	添加好友， 对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权	QQ小程序
addColorSign	添加彩签，点击后添加状态有用户提示，无回调	QQ小程序基础库1.10.0版本+
addGroupApp	添加群应用（只有管理员或群主有权操作），添加后给button绑定@addgroupapp事件接收回调数据	QQ小程序基础库1.16.0版本+
addToFavorites	收藏当前页面，点击按钮后会触发Page.onAddToFavorites方法	QQ小程序基础库1.19.0版本+
chooseAddress	选择用户收货地址，可以从@chooseaddress回调中获取到用户选择的地址信息	百度小程序3.160.3版本+
chooseInvoiceTitle	选择用户发票抬头，可以从@chooseinvoicetitle回调中获取到用户选择发票抬头信息	百度小程序3.160.3版本+
login	登录，可以从@login回调中确认是否登录成功	百度小程序3.230.1版本+
subscribe	订阅类模板消息，需要用户授权才可发送	百度小程序
favorite	触发用户收藏	快手小程序
watchLater	触发用户稍后再看	快手小程序
openProfile	触发打开用户主页	快手小程序

详情：https://uniapp.dcloud.net.cn/component/button.html#

 

Checkbox 复选框

属性说明

属性名	类型	默认值	说明
value	String		<checkbox> 标识，选中时触发 <checkbox-group> 的 change 事件，并携带 <checkbox> 的 value。
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中
color	Color		checkbox的颜色，同css的color

注意：

1.checkbox的默认颜色，在不同平台不一样。微信小程序、360小程序是绿色的，抖音小程序为红色，其他平台是蓝色的。更改颜色使用color属性。

2.如需调节checkbox大小，可通过css的scale方法调节，如缩小到70%style="transform:scale(0.7)"

 

Checkbox-group 复选框包裹

多项选择器，内部由多个 checkbox 组成。

属性说明

属性名	类型	默认值	说明
@change	EventHandle		<checkbox-group>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

 

 

uni-data-checkbox 增强复选框组件

详见 https://ext.dcloud.net.cn/plugin?id=3456

 

editor富文本编辑器

可以对图片、文字格式进行编辑和混排。

editor组件目前只有H5、App的vue页面、微信小程序、百度小程序支持，其他端平台自身未提供editor组件，只能使用web-view加载web页面，也可搜索插件市场 获取简单的markdown富文本编辑器

属性	类型	默认值	必填	说明
read-only	boolean	false	否	设置编辑器为只读
placeholder	string		否	提示信息
show-img-size	boolean	false	否	点击图片时显示图片大小控件
show-img-toolbar	boolean	false	否	点击图片时显示工具栏控件
show-img-resize	boolean	false	否	点击图片时显示修改尺寸控件
@ready	eventhandle		否	编辑器初始化完成时触发
@focus	eventhandle		否	编辑器聚焦时触发，event.detail = {html, text, delta}
@blur	eventhandle		否	编辑器失去焦点时触发，detail = {html, text, delta}
@input	eventhandle		否	编辑器内容改变时触发，detail = {html, text, delta}
@statuschange	eventhandle		否	通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式

编辑器内支持部分 HTML 标签和内联样式，不支持class和id

支持的标签

不满足的标签会被忽略，<div>会被转行为<p>储存。

类型	节点	平台差异说明
行内元素	<span> <strong> <b> <ins> <em> <i> <u> <a> <del> <s> <sub> <sup> <img>	其中<ins> <del>百度小程序不支持
块级元素	<br> <p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>	其中<br>仅百度小程序支持、<p>百度小程序不支持

支持的内联样式

内联样式仅能设置在行内元素或块级元素上，不能同时设置。例如 font-size` 归类为行内元素属性，在 p 标签上设置是无效的。

类型	样式	平台差异说明
块级样式	text-align direction margin margin-top margin-left margin-right margin-bottom padding padding-top padding-left padding-right padding-bottom line-height text-indent	百度小程序仅支持text-align、direction
行内样式	font font-size font-style font-variant font-weight font-family letter-spacing text-decoration color background-color	百度小程序仅支持color、background-color

详情：https://uniapp.dcloud.net.cn/component/editor.html

 

form 表单

将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。

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

属性说明

属性名	类型	说明	平台差异说明
report-submit	Boolean	是否返回 formId 用于发送模板消息	微信小程序、支付宝小程序
report-submit-timeout	number	等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId	微信小程序2.6.2
@submit	EventHandle	携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}，report-submit 为 true 时才会返回 formId
@reset	EventHandle	表单重置时会触发 reset 事件

详情：https://uniapp.dcloud.net.cn/component/form.html

 

input 输入框

html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在uni-app规范中，input仅仅是输入框。其他功能uni-app有单独的组件或API

属性说明

属性名	类型	默认值	说明	平台差异说明
value	String		输入框的初始内容
type	String	text	input 的类型 有效值	H5 暂未支持动态切换，详见下方 Tips，请使用 v-if 进行整体切换
text-content-type	String		文本区域的语义，根据类型自动填充 有效值	仅 App-nvue-iOS 支持
password	Boolean	false	是否是密码类型	H5和App写此属性时，type失效
placeholder	String		输入框为空时占位符
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	"input-placeholder"	指定 placeholder 的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/	抖音小程序、飞书小程序、快手小程序不支持
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离	App、微信小程序、百度小程序、QQ小程序、京东小程序
focus	Boolean	false	获取焦点。	在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点
confirm-type	String	done	设置键盘右下角按钮的文字，仅在 type="text" 时生效。有效值	微信小程序、App、H5、快手小程序、京东小程序
confirm-hold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起	App(3.3.7+)、H5 (3.3.7+)、微信小程序、支付宝小程序、百度小程序、QQ小程序、京东小程序
cursor	Number		指定focus时的光标位置
selection-start	Number	-1	光标起始位置，自动聚集时有效，需与selection-end搭配使用
selection-end	Number	-1	光标结束位置，自动聚集时有效，需与selection-start搭配使用
adjust-position	Boolean	true	键盘弹起时，是否自动上推页面	App-Android（vue 页面 softinputMode 为 adjustResize 时无效，使用 x5 内核时无效）、微信小程序、百度小程序、QQ小程序、京东小程序
auto-blur	Boolean	false	键盘收起时，是否自动失去焦点	App-Vue 3.0.0+
ignoreCompositionEvent	Boolean	true	是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件	App-vue (3.4.4+)、H5 (3.4.4+)、App-nvue不支持
always-embed	Boolean	false	强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)	微信小程序 2.10.4+
hold-keyboard	Boolean	false	focus时，点击页面的时候不收起键盘	微信小程序 2.8.2+
safe-password-cert-path	String		安全键盘加密公钥的路径，只支持包内路径	微信小程序 2.18.0+
safe-password-length	Number		安全键盘输入密码长度	微信小程序 2.18.0+
safe-password-time-stamp	Number		安全键盘加密时间戳	微信小程序 2.18.0+
safe-password-nonce	String		安全键盘加密盐值	微信小程序 2.18.0+
safe-password-salt	String		安全键盘计算 hash 盐值，若指定custom-hash 则无效	微信小程序 2.18.0+
safe-password-custom-hash	String		安全键盘计算 hash 的算法表达式，如 md5(sha1('foo' + sha256(sm3(password + 'bar'))))	微信小程序 2.18.0+
random-number	Boolean	false	当 type 为 number, digit, idcard 数字键盘是否随机排列	支付宝小程序 1.9.0+
controlled	Boolean	false	是否为受控组件。为 true 时，value 内容会完全受 setData 控制	支付宝小程序 1.9.0+
always-system	Boolean	false	是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效	支付宝小程序 2.7.3+
inputmode	String	"text"	是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。有效值	H5（3.6.16+）、App-vue（3.6.16+）
@input	EventHandle		当键盘输入时，触发input事件，event.detail = {value}	差异见下方 Tips
@focus	EventHandle		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度	仅微信小程序、京东小程序、App（2.2.3+） 、QQ小程序支持 height
@blur	EventHandle		输入框失去焦点时触发，event.detail = {value: value}	快手小程序不支持
@confirm	EventHandle		点击完成按钮时触发，event.detail = {value: value}	快手小程序不支持
@keyboardheightchange	eventhandle		键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}	微信小程序基础库2.7.0+、App 3.1.0+

Tips

• input 事件处理函数可以直接 return 一个字符串，将替换输入框的内容。仅微信小程序支持。
• 如果遇到 value 属性设置不生效的问题参考：组件属性设置不生效解决办法
• input 组件上有默认的 min-height 样式，如果 min-height 的值大于 height 的值那么 height 样式无效。
• H5 暂未支持动态切换，请使用 v-if进行整体切换。

type 有效值

值	说明	平台差异说明
text	文本输入键盘
number	数字输入键盘	均支持，App平台、H5平台 3.1.22 以下版本 vue 页面在 iOS 平台显示的键盘包含负数和小数。
idcard	身份证输入键盘	微信、支付宝、百度、QQ小程序、快手小程序、京东小程序
digit	带小数点的数字键盘	均支持，App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数（原生键盘不支持负号）。
tel	电话输入键盘
safe-password	密码安全输入键盘	微信小程序
nickname	昵称输入键盘	微信小程序

confirm-type 有效值

弹出软键盘的右下角按钮的文字。

值	说明	平台差异说明
send	右下角按钮为“发送”	微信、支付宝、百度小程序、快手小程序、京东小程序、app-nvue、app-vue和h5(2.9.9+，且要求设备webview内核Chrome81+、Safari13.7+)
search	右下角按钮为“搜索”
next	右下角按钮为“下一个”	微信、支付宝、百度小程序、快手小程序、京东小程序、app-nvue、app-vue和h5(2.9.9+，且要求设备webview内核Chrome81+、Safari13.7+)
go	右下角按钮为“前往”
done	右下角按钮为“完成”	微信、支付宝、百度小程序、快手小程序、京东小程序、app-nvue、app-vue和h5(2.9.9+，且要求设备webview内核Chrome81+、Safari13.7+)

inputmode 有效值

新增于 uni-app 3.6.16+ inputmode是html规范后期更新的内容。各家小程序还未支持此属性。

在符合条件的高版本webview里，uni-app的web和app-vue平台中可使用本属性。

值	说明
none	无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。
text	使用用户本地区域设置的标准文本输入键盘。
decimal	小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。
numeric	数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。
tel	电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 <input type="tel"> 。
search	为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。
email	为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 <input type="email"> 。
url	为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <input type="url"> 。

 

扩展

• uni ui提供了easyinput组件，提供了常用的封装，可搭配uni-forms组件，支持表单验证、支持各种常用设置。详见
• uni ui提供了combox组件，可选可输入，常用词免输入。详见
• uni ui提供了搜索框ui组件，插件市场还有封装好的页面模板。详见。云端一体搜索模板功能完善，推荐使用：https://ext.dcloud.net.cn/plugin?id=3851
• uni-app插件市场有输入文字后自动提示候选的组件，可搜索 autocomplete 查看。
• 插件市场有各种类型的模拟键盘，比如车牌键盘、身份证键盘，可去插件市场搜索 键盘。

 

Label 标签

用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有：<button>, <checkbox>, <radio>, <switch>。

属性说明

属性名	类型	说明
for	String	绑定控件的 id

 

 

Picker选择器

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

 

普通选择器

mode = selector

属性说明

属性名	类型	默认值	说明	平台差异说明
range	Array / Array<Object>	[]	mode为 selector 或 multiSelector 时，range 有效
range-key	String		当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Number	0	value 的值表示选择了 range 中的第几个（下标从 0 开始）
selector-type	String	auto	大屏时UI类型，支持 picker、select、auto，默认在 iPad 以 picker 样式展示而在 PC 以 select 样式展示	H5 2.9.9+
disabled	Boolean	false	是否禁用	快手小程序不支持
@change	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
@cancel	EventHandle		取消选择或点遮罩层收起 picker 时触发	快手小程序不支持

 

多列选择器

mode = multiSelector

属性说明

属性名	类型	默认值	说明
range	二维 Array / 二维 Array＜Object＞	[]	mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]
range-key	String		当 range 是一个二维 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Array	[]	value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）
@change	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
@columnchange	EventHandle		某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标
@cancel	EventHandle		取消选择时触发（快手小程序不支持）
disabled	Boolean	false	是否禁用（快手小程序不支持）

 

时间选择器

mode = time

属性说明

属性名	类型	默认值	说明	平台差异说明
value	String		表示选中的时间，格式为"hh:mm"
start	String		表示有效时间范围的开始，字符串格式为"hh:mm"	App 不支持
end	String		表示有效时间范围的结束，字符串格式为"hh:mm"	App 不支持
@change	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
@cancel	EventHandle		取消选择时触发
disabled	Boolean	false	是否禁用

 

日期选择器

mode = date

属性说明

属性名	类型	默认值	说明	平台差异说明
value	String	0	表示选中的日期，格式为"YYYY-MM-DD"
start	String		表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end	String		表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields	String	day	有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI	H5、App 2.6.3+、微信小程序、百度小程序、抖音小程序、飞书小程序
@change	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
@cancel	EventHandle		取消选择时触发
disabled	Boolean	false	是否禁用

fields 有效值

值	说明
year	选择器粒度为年
month	选择器粒度为月份
day	选择器粒度为天

省市区选择器

mode = region

注意：小程序平台在引擎层面内置了省市区数据。但省市区包含大量数据，占用体积，并非所有应用都需要，且很多城市数据有自维护需求，所以在App和H5平台没有在前端内置这些数据。可以基于多列picker或picker-view，自行填充城市数据。插件市场有较多类似插件，详见。注意基于多列picker方式的地区选择不能运行在支付宝小程序上，只有基于picker-view的可以全端运行。尤其推荐插件uni-data-picker，自带省市区的联网数据，自带懒加载。

属性名	类型	默认值	说明
value	Array	[]	表示选中的省市区，默认选中每一列的第一个值
custom-item	String		可为每一列的顶部添加一个自定义的项
@change	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
@cancel	EventHandle		取消选择时触发（快手小程序不支持）
disabled	Boolean	false	是否禁用（快手小程序不支持）

 

 

Picker-view

嵌入页面的滚动选择器。

相对于picker组件，picker-view拥有更强的灵活性。当需要对自定义选择的弹出方式和UI表现时，往往需要使用picker-view。

属性说明

属性名	类型	默认值	平台差异说明
value	Array＜Number＞	数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style	String	设置选择器中间选中框的样式
indicator-class	String	设置选择器中间选中框的类名，注意页面或组件的style中写了scoped时，需要在类名前写/deep/	app-nvue与抖音小程序与飞书小程序不支持
mask-style	String	设置蒙层的样式
mask-top-style	String	设置蒙层上半部分的样式	仅 app-nvue（3.6.7+） 支持
mask-bottom-style	String	设置蒙层下半部分的样式	仅 app-nvue（3.6.7+） 支持
mask-class	String	设置蒙层的类名	app-nvue与抖音小程序与飞书小程序不支持
immediate-change	Boolean	是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。	微信小程序 2.21.1
@change	EventHandle	当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
@pickstart	eventhandle	当滚动选择开始时候触发事件	微信小程序2.3.1、快手小程序
@pickend	eventhandle	当滚动选择结束时候触发事件	微信小程序2.3.1、快手小程序

注意：只能放置 picker-view-column 组件，一个组件为一个列，组件的高度会撑开picker-view的高度

 

uni ui提供了增强版<uni-data-picker>组件，详见：https://ext.dcloud.net.cn/plugin?id=3796

 

radio 单选框

属性说明

属性名	类型	默认值	说明
value	String		<radio> 标识。当该 <radio> 选中时，<radio-group> 的 change 事件会携带 <radio> 的 value
checked	Boolean	false	当前是否选中
disabled	Boolean	false	是否禁用
color	Color		radio的颜色，同css的color

注意

• radio的默认颜色，在不同平台不一样。微信小程序是绿色的，抖音小程序为红色，其他平台是蓝色的。更改颜色使用color属性。
• 如需调节radio大小，可通过css的scale方法调节，如缩小到70%style="transform:scale(0.7)"
• radio不是checkbox，点击一个已经选中的radio，不会将其取消选中

扩展

• uni-ui提供了增强的uni-data-checkbox组件，基于datacom规范，只需传入data数据，即可自动生成一组单选框，使用方式更简洁，并且支持uni-forms的表单验证。uni-data-checkbox组件详见https://ext.dcloud.net.cn/plugin?id=3456

 

radio-group 单选框父组件

单项选择器，内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。

属性说明

属性名	类型	默认值	说明
@change	EventHandle		<radio-group> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}

 

 

Slider滑动选择器

属性说明

属性名	类型	默认值	说明
min	Number	0	最小值
max	Number	100	最大值
step	Number	1	步长，取值必须大于 0，并且可被(max - min)整除
disabled	Boolean	false	是否禁用
value	Number	0	当前取值
activeColor	Color	各个平台不同，详见下	滑块左侧已选择部分的线条颜色
backgroundColor	Color	#e9e9e9	滑块右侧背景条的颜色
block-size	Number	28	滑块的大小，取值范围为 12 - 28
block-color	Color	#ffffff	滑块的颜色
show-value	Boolean	false	是否显示当前 value
@change	EventHandle		完成一次拖动后触发的事件，event.detail = {value: value}
@changing	EventHandle		拖动过程中触发的事件，event.detail = {value: value}

Tips

• activeColor默认值在不同平台不一样，微信是绿色(#1aad19)，头条是红色，其他平台是 #007aff（蓝色）
• 如需要区间滑块，即一根横条上使用2个滑块选择一段范围，可见插件市场

 

 

Switch开关选择器

属性说明

属性名	类型	默认值	说明	平台差异说明
checked	Boolean	false	是否选中
disabled	Boolean	false	是否禁用	抖音小程序与飞书小程序不支持
type	String	switch	样式，有效值：switch, checkbox
color	Color		switch 的颜色，同 css 的 color
@change	EventHandle		checked 改变时触发 change 事件，event.detail={ value:checked}

 

 

textarea多行输入框

属性说明

属性名	类型	默认值	说明	平台差异说明
value	String		输入框的内容
placeholder	String		输入框为空时占位符
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	textarea-placeholder	指定 placeholder 的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/	抖音小程序、飞书小程序、快手小程序不支持
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
focus	Boolean	false	获取焦点	在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点
auto-focus	Boolean	false	自动聚焦，拉起键盘	京东小程序
auto-height	Boolean	false	是否自动增高，设置auto-height时，style.height不生效
fixed	Boolean	false	如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true	微信小程序、百度小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序
cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离	App、微信小程序、百度小程序、抖音小程序、飞书小程序、QQ小程序、京东小程序
cursor	Number		指定focus时的光标位置	微信小程序、App、H5、百度小程序、抖音小程序、飞书小程序、QQ小程序、京东小程序
confirm-type	String	done	设置键盘右下角按钮的文字	微信小程序基础库2.13.0+、App-vue和H5(2.9.9+，且要求设备webview内核Chrome81+、Safari13.7+)
confirm-hold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起	App(3.3.7+)、H5 (3.3.7+)、微信小程序 (基础库 2.16.0+)、百度小程序 (基础库 3.130.1+)、快手小程序
show-confirm-bar	Boolean	true	是否显示键盘上方带有”完成“按钮那一栏	微信小程序、百度小程序、QQ小程序、京东小程序
selection-start	Number	-1	光标起始位置，自动聚焦时有效，需与selection-end搭配使用	微信小程序、App、H5、百度小程序、抖音小程序、飞书小程序、QQ小程序、京东小程序
selection-end	Number	-1	光标结束位置，自动聚焦时有效，需与selection-start搭配使用	微信小程序、App、H5、百度小程序、抖音小程序、飞书小程序、QQ小程序、京东小程序
adjust-position	Boolean	true	键盘弹起时，是否自动上推页面	App-Android（softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序、京东小程序
disable-default-padding	boolean	false	是否去掉 iOS 下的默认内边距	微信小程序2.10.0、飞书小程序 3.46
hold-keyboard	boolean	false	focus时，点击页面的时候不收起键盘	微信小程序2.8.2
auto-blur	boolean	false	键盘收起时，是否自动失去焦点	App-vue 3.0.0+ ，App-nvue不支持
ignoreCompositionEvent	boolean	true	是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件	App-vue (3.4.4+)、H5 (3.4.4+)、App-nvue不支持
inputmode	String	"text"	是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。有效值	H5（3.7.0+）、App-vue（3.7.0+）
@focus	EventHandle		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度	仅微信小程序、京东小程序、App（HBuilderX 2.0+ nvue uni-app模式） 、QQ小程序支持 height
@blur	EventHandle		输入框失去焦点时触发，event.detail = {value, cursor}	快手小程序不支持
@linechange	EventHandle		输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}	抖音小程序、飞书小程序、快手小程序不支持
@input	EventHandle		当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上	快手小程序不支持
@confirm	EventHandle		点击完成时， 触发 confirm 事件，event.detail = {value: value}	微信小程序、百度小程序、QQ小程序、京东小程序
@keyboardheightchange	Eventhandle		键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}	微信小程序基础库2.7.0+、App 3.1.0+

confirm-type 有效值

值	说明
send	右下角按钮为“发送”
search	右下角按钮为“搜索”
next	右下角按钮为“下一个”
go	右下角按钮为“前往”
done	右下角按钮为“完成”

 

inputmode 有效值

新增于 uni-app 3.7.0+ inputmode是html规范后期更新的内容。各家小程序还未支持此属性。

在符合条件的高版本webview里，uni-app的web和app-vue平台中可使用本属性。

值	说明
none	无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。
text	使用用户本地区域设置的标准文本输入键盘。
decimal	小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。
numeric	数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。
tel	电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 <input type="tel"> 。
search	为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。
email	为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 <input type="email"> 。
url	为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <input type="url"> 。

 

路由页面跳转

navigator 组件

页面跳转。该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。

属性说明

属性名	类型	默认值	说明	平台差异说明
url	String		应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-type	String	navigate	跳转方式
delta	Number		当 open-type 为 'navigateBack' 时有效，表示回退的层数
animation-type	String	pop-in/out	当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画	App
animation-duration	Number	300	当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。	App
hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	微信小程序
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒
target	String	self	在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram	微信2.0.7+、百度2.5.2+、QQ

open-type 有效值

值	说明	平台差异说明
navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能	抖音小程序与飞书小程序不支持
navigateBack	对应 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

这些细节可在页面路由API文档查阅。

注意

• 跳转tabbar页面，必须设置open-type="switchTab"
• navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> 的子节点背景色应为透明色。
• navigator-open-type属性 如果使用对应的值，则对应值的功能会高于对应跳转路径。
• app-nvue 平台只有纯nvue项目（render为native）才支持 <navigator>。非render为native的情况下，nvue暂不支持navigator组件，请使用API跳转。
• app下退出应用，Android平台可以使用plus.runtime.quit。iOS没有退出应用的概念。
• uLink组件是navigator组件的增强版，样式上自带下划线，功能上支持打开在线网页、其他App的schema、mailto发邮件、tel打电话。
• Vue3 项目因 SSR 需要，H5 端会在外层嵌套 a 标签

 

媒体组件

animation-view

Lottie动画组件，动画资源参考Lottie官方链接

不支持微信小程序，略

 

audio音频

微信小程序平台自基础库 1.6.0 版本开始，不再维护 audio 组件，推荐使用API方式而不是组件方式来播放音频。

API见 uni.createInnerAudioContext 替代。

属性说明

属性名	类型	默认值	说明
id	String		audio 组件的唯一标识符
src	String		要播放音频的资源地址
loop	Boolean	false	是否循环播放
controls	Boolean	false	是否显示默认控件
poster	String		默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name	String	未知音频	默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
author	String	未知作者	默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
@error	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
@play	EventHandle		当开始/继续播放时触发play事件
@pause	EventHandle		当暂停播放时触发 pause 事件
@timeupdate	EventHandle		当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
@ended	EventHandle		当播放到末尾时触发 ended 事件

MediaError.code

返回错误码	描述
1	获取资源被用户禁止
2	网络错误
3	解码错误
4	不合适资源

 

camera

页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。

属性说明

属性名	类型	默认值	说明	平台差异说明
mode	String	normal	应用模式，有效值为 normal(相机模式), scanCode(扫码模式)，不支持动态修改
resolution	string	medium	分辨率，有效值为low, medium, high，不支持动态修改	微信小程序2.10.0、抖音小程序、飞书小程序
device-position	String	back	前置或后置摄像头，值为front, back
flash	String	auto	闪光灯，值为auto, on, off, torch
frame-size	string	medium	指定期望的相机帧数据尺寸，值为small, medium, large	微信小程序2.7.0、快应用、支付宝小程序、抖音小程序
output-dimension	String	720P	相机拍照，录制的分辨率。有效值为 360P、540P、720P、1080P、max。	支付宝小程序1.23.0
@stop	EventHandle		摄像头在非正常终止时触发，如退出后台等情况
@error	EventHandle		用户不允许使用摄像头时触发
@initdone	eventhandle		相机初始化完成时触发，e.detail = {maxZoom}	微信小程序2.7.0、抖音小程序1.78.0、飞书小程序、快手小程序
@ready	EventHandle		相机初始化成功时触发。event.detail = {maxZoom}	支付宝小程序1.24.3
@scancode	EventHandle		在扫码识别成功时触发，仅在 mode="scanCode" 时生效	微信小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序

Tips：

• camera 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。
• 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。
• 同一页面只能插入一个 camera 组件。
• 相关API：createCameraContext

 

 

image图片

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效	微信小程序、百度小程序、抖音小程序、飞书小程序
fade-show	Boolean	true	图片显示动画效果	仅App-nvue 2.3.4+ Android有效
webp	boolean	false	在系统不支持webp的情况下是否单独启用webp。默认false，只支持网络资源。webp支持详见下面说明	微信小程序2.9.0
show-menu-by-longpress	boolean	false	开启长按图片显示识别小程序码菜单	微信小程序2.7.0
draggable	boolean	true	是否能拖动图片	H5 3.1.1+、App（iOS15+）
@error	HandleEvent		当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
@load	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

 

Tips

• <image> 组件未设置宽高时，默认宽度320px、高度240px。尤其注意当图片加载失败时，widthFix模式指定宽度的图片，虽然图片空白，但其高度会变成240px；app-nvue平台，暂时默认为屏幕宽度、高度 240px；
• src 仅支持相对路径、绝对路径，支持 base64 码；
• 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform}，可优化此问题。
• 自定义组件里面使用 <image>时，若 src 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。

 

mode 有效值

mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
缩放	heightFix	高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

原图

scaleToFill：不保持纵横比缩放图片，使图片完全适应

aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来

aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来

top：不缩放图片，只显示图片的顶部区域

bottom：不缩放图片，只显示图片的底部区域

center：不缩放图片，只显示图片的中间区域

left：不缩放图片，只显示图片的左边区域

right：不缩放图片，只显示图片的右边边区域

top left：不缩放图片，只显示图片的左上边区域

top right：不缩放图片，只显示图片的右上边区域

bottom left：不缩放图片，只显示图片的左下边区域

bottom right：不缩放图片，只显示图片的右下边区域

 

video视频

视频播放组件。

属性说明

属性名	类型	默认值	说明	平台差异说明
src	String		要播放视频的资源地址
autoplay	Boolean	false	是否自动播放
loop	Boolean	false	是否循环播放
muted	Boolean	false	是否静音播放	飞书小程序不支持
initial-time	Number		指定视频初始播放位置，单位为秒（s）。	飞书小程序不支持
duration	Number		指定视频时长，单位为秒（s）。	抖音小程序、飞书小程序、快手小程序、京东小程序不支持
controls	Boolean	true	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）	快手小程序不支持
danmu-list	Object Array		弹幕列表	抖音小程序、飞书小程序、快手小程序、京东小程序不支持
danmu-btn	Boolean	false	是否显示弹幕按钮，只在初始化时有效，不能动态变更	抖音小程序、飞书小程序、快手小程序、京东小程序不支持
enable-danmu	Boolean	false	是否展示弹幕，只在初始化时有效，不能动态变更	抖音小程序、飞书小程序、快手小程序、京东小程序不支持
page-gesture	Boolean	false	在非全屏模式下，是否开启亮度与音量调节手势	微信小程序、H5
direction	Number		设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）	H5、飞书小程序、快手小程序、京东小程序不支持
show-progress	Boolean	true	若不设置，宽度大于240时才会显示	抖音小程序、飞书小程序、快手小程序、京东小程序不支持
show-fullscreen-btn	Boolean	true	是否显示全屏按钮	京东小程序不支持
show-play-btn	Boolean	true	是否显示视频底部控制栏的播放按钮	京东小程序不支持
show-center-play-btn	Boolean	true	是否显示视频中间的播放按钮	抖音小程序、京东小程序不支持
show-loading	Boolean	true	是否显示loading控件	仅app 2.8.12+
enable-progress-gesture	Boolean	true	是否开启控制进度的手势	抖音小程序、京东小程序不支持
object-fit	String	contain	当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖	App、微信小程序、抖音小程序、飞书小程序、H5、京东小程序
poster	String		视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
show-mute-btn	Boolean	false	是否显示静音按钮	微信小程序、抖音小程序、App-nvue
title	String		视频的标题，全屏时在顶部展示	微信小程序、App（3.6.7+）
play-btn-position	String	bottom	播放按钮的位置	微信小程序、抖音小程序、飞书小程序
mobilenet-hint-type	number	1	移动网络提醒样式：0是不提醒，1是提醒，默认值为1	京东小程序
enable-play-gesture	Boolean	false	是否开启播放手势，即双击切换播放/暂停	微信小程序、快手小程序
auto-pause-if-navigate	Boolean	true	当跳转到其它小程序页面时，是否自动暂停本页面的视频	微信小程序
auto-pause-if-open-native	Boolean	true	当跳转到其它微信原生页面时，是否自动暂停本页面的视频	微信小程序
vslide-gesture	Boolean	false	在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）	微信小程序、App（3.4.0+）、快手小程序
vslide-gesture-in-fullscreen	Boolean	true	在全屏模式下，是否开启亮度与音量调节手势	微信小程序、App（3.4.0+）、快手小程序
ad-unit-id	String		视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告	微信小程序
poster-for-crawler	String		用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址	微信小程序
codec	String	hardware	解码器选择，hardware：硬解码（硬解码可以增加解码算力，提高视频清晰度。少部分老旧硬件可能存在兼容性问题）；software：ffmpeg 软解码；	App-Android 3.1.0+
http-cache	Boolean	true	是否对 http、https 视频源开启本地缓存。缓存策略:开启了此开关的视频源，在视频播放时会在本地保存缓存文件，如果本地缓存池已超过100M，在进行缓存前会清空之前的缓存（不适用于m3u8等流媒体协议）	App-Android 3.1.0+
play-strategy	Number	0	播放策略，0：普通模式，适合绝大部分视频播放场景；1：平滑播放模式（降级），增加缓冲区大小，采用open sl解码音频，避免音视频脱轨的问题，可能会降低首屏展现速度、视频帧率，出现开屏音频延迟等。 适用于高码率视频的极端场景；2： M3U8优化模式，增加缓冲区大小，提升视频加载速度和流畅度，可能会降低首屏展现速度。 适用于M3U8在线播放的场景	App-Android 3.1.0+
header	Object		HTTP 请求 Header	App 3.1.19+
is-live	Boolean	false	是否为直播源	App 3.7.2+、微信小程序（2.28.1+）
@play	EventHandle		当开始/继续播放时触发play事件	飞书小程序不支持
@pause	EventHandle		当暂停播放时触发 pause 事件	飞书小程序不支持
@ended	EventHandle		当播放到末尾时触发 ended 事件	飞书小程序不支持
@timeupdate	EventHandle		播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次	飞书小程序不支持
@fullscreenchange	EventHandle		当视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal	飞书小程序不支持
@waiting	EventHandle		视频出现缓冲时触发	飞书小程序、快手小程序不支持
@error	EventHandle		视频播放出错时触发	飞书小程序不支持
@progress	EventHandle		加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比	微信小程序、抖音小程序、H5
@loadeddata	EventHandle		视频资源开始加载时触发	京东小程序
@loadstart	EventHandle		开始加载数据	京东小程序
@seeked	EventHandle		拖动进度条结束	京东小程序
@seeking	EventHandle		正在拖动进度条	京东小程序
@loadedmetadata	EventHandle		视频元数据加载完成时触发。event.detail = {width, height, duration}	微信小程序、H5、抖音小程序、京东小程序
@fullscreenclick	EventHandle		视频播放全屏播放时点击事件。event.detail = { screenX:"Number类型，点击点相对于屏幕左侧边缘的 X 轴坐标", screenY:"Number类型，点击点相对于屏幕顶部边缘的 Y 轴坐标", screenWidth:"Number类型，屏幕总宽度", screenHeight:"Number类型，屏幕总高度"}	App 2.6.3+
@controlstoggle	EventHandle		切换 controls 显示隐藏时触发。event.detail = {show}	微信小程序2.9.5

<video> 默认宽度 300px、高度 225px，可通过 css 设置宽高。

direction 的合法值

值	说明
0	正常竖向
90	屏幕逆时针90度
-90	屏幕顺时针90度

object-fit 的合法值

值	说明
contain	包含
fill	填充
cover	覆盖

play-btn-position 的合法值

值	说明
bottom	controls bar上
center	视频中间

 

注意

• 视频播放格式说明：
  • H5平台：支持的视频格式视浏览器而定，一般通用的都支持：mp4、webm 和 ogg。（<video/> 组件编译到 H5 时会替换为标准 html 的 video 标签）。H5端也可以自行在条件编译里使用video.js等三方库，这些库可以自动判断环境兼容以决定使用标准video或flash来播放。
  • 小程序平台：各小程序平台支持程度不同，详见各家文档：微信小程序视频组件文档、支付宝小程序video组件、百度小程序视频组件文档、抖音小程序视频组件文档、QQ小程序视频组件文档、华为快应用视频组件文档
  • App平台： 支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。
• video全屏后，如何自行绘制界面？比如加个标题、加个分享按钮
  • 微信基础库 2.4.0 以上可通过cover-view来绘制界面覆盖元素
  • app端 2.1.5 以上nvue页面的video也可以通过cover-view来绘制界面覆盖元素
  • H5端可通过通用h5做法实现
  • 其他端无法全屏后自行绘制内容
• 如何实现抖音、映客等全屏视频垂直滑动切换效果？
  • 微信基础库 2.4.0 和 app端nvue 2.1.5 以上，可通过在垂直的swiper中内嵌video来实现。原生导航栏设置为custom，视频长宽设为手机屏幕大小，通过cover-view覆盖视频内容。插件市场有相关示例
• <video/> 组件在非H5端是原生组件，层级高于普通前端组件，覆盖其需要使用cover-view组件或plus.nativeObj.view、subNVue。微信基础库 2.4.0+和抖音小程序 已支持 video 组件的同层渲染，也就是video在非全屏时，可以被前端元素通过调节z-index来遮挡，但video全屏时，仍需要cover-view覆盖。
• 除微信基础库 2.4.0+ 和 抖音小程序 和 app-nvue 2.1.5+，其他情况下非H5的video不能放入scroll-view和swiper。注意参考 原生组件使用限制。
• 你也可以尝试换个设计思路，如：列表中的视频组件是通过图片与icon模拟的，点击后播放全屏播放视频的方案。详情【video组件会覆盖页面其他非原生组件的设计替代方案示例】
• App平台：使用 <video/> 组件，打包 App 时必须勾选 manifest.json->App 模块权限配置->VideoPlayer 模块。此模块体积较大，非默认内置。
• App平台：如果使用的视频路径为本地路径，需要配置资源为释放模式：在 manifest.json 文件内 app-plus 节点下新增 runmode 配置，设置值为liberate。
• App平台：如果想使用非原生的video，即原来普通的html5自带video，可使用web-view组件load html页面，在其中使用普通h5 video。
• App平台：app-vue即使选择了使用x5内核，也不会使用x5的video播放，仍然使用uni-app的App引擎自带的原生视频播放。
• App平台：3.6.14 以及 手机系统 iOS16 以上video全屏 需要配置应用支持横屏： 在 manifest.json 文件内 app-plus 节点下新增 screenOrientation 配置，设置值为["portrait-primary","portrait-secondary","landscape-primary","landscape-secondary"]。
• H5平台： 在部分浏览器中会强制调用原生播放器播放（如：微信内置浏览器、UC浏览器等），在 x5 内核的浏览器中支持配置同层播放器。
• HBuilderX内置浏览器，使用video标签暂时存在问题，请先使用其他外部浏览器。

 

live-player直播拉流

实时音视频播放，也称直播拉流。

使用live-player 组件需注意：如果发布到小程序，需要先通过各家小程序的审核。指定类目的小程序才能使用（微信小程序类目、百度小程序类目），审核通过后在各家小程序管理后台自助开通该组件权限。

属性说明

属性名	类型	默认值	说明	平台差异说明
id	String		live-player 属性的唯一标志符
src	String		音视频地址。百度小程序支持 m3u8 格式；微信小程序支持 flv, rtmp 格式
mode	String	live	live（直播），RTC（实时通话，该模式时延更低）	微信小程序
autoplay	Boolean	false	自动播放
muted	Boolean	false	是否静音
orientation	String	vertical	画面方向，可选值有 vertical，horizontal
object-fit	String	contain	填充模式，可选值:contain、fillCrop
background-mute	Boolean	false	进入后台时是否静音
sound-mode	string	speaker	声音输出方式;可选值speaker、ear	微信小程序、QQ小程序1.5.0（仅支持speaker）
min-cache	Number	1	最小缓冲区，单位s
max-cache	Number	3	最大缓冲区，单位s
picture-in-picture-mode	string/Array	3	设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]）	微信小程序（2.10.3）
@statechange	EventHandle		播放状态变化事件，detail = {code}
@netstatus	EventHandle		网络状态通知，detail = {info}
@fullscreenchange	EventHandle		全屏变化事件，detail = {direction, fullScreen}。
@audiovolumenotify	EventHandle		播放音量大小通知，detail = {}	微信小程序（2.10.0）
@enterpictureinpicture	EventHandle		播放器进入小窗	微信小程序（2.11.0）
@leavepictureinpicture	EventHandle		播放器退出小窗	2.11.0

mode 的合法值

值	说明
live	直播
RTC	实时通话，该模式时延更低

orientation 的合法值

值	说明
vertical	竖直
horizontal	水平

object-fit 的合法值

值	说明
contain	图像长边填满屏幕，短边区域会被填充⿊⾊
fillCrop	图像铺满屏幕，超出显示区域的部分将被截掉

sound-mode 的合法值

值	说明
speaker	扬声器
ear	听筒

Tips

• 百度小程序 iOS 端不支持设置 orientation 属性；
• 微信小程序已废弃 background-mute 属性，默认为进入后台静音；
• live-player 默认宽度 300px、高度 225px；
• live-player 是原生组件，层级高于前端组件，请勿在 scroll-view、swiper、picker-view、movable-view 中使用
• 小程序下覆盖live-player需要使用cover-view。详见
• live-player 组件相关 JS API：createLivePlayerContext
• 小程序平台使用live-player有审核限制，请注意参考各家文档。
• App端使用直播，推荐nvue页面下用video组件，可避免复杂的层级问题和全屏覆盖问题。

状态码

代码	说明
2001	已经连接服务器
2002	已经连接服务器,开始拉流
2003	网络接收到首个视频数据包(IDR)
2004	视频播放开始
2005	视频播放进度
2006	视频播放结束
2007	视频播放Loading
2008	解码器启动
2009	视频分辨率改变
-2301	网络断连，且经多次重连抢救无效，更多重试请自行重启播放
-2302	获取加速拉流地址失败
2101	当前视频帧解码失败
2102	当前音频帧解码失败
2103	网络断连, 已启动自动重连
2104	网络来包不稳：可能是下行带宽不足，或由于主播端出流不均匀
2105	当前视频播放出现卡顿
2106	硬解启动失败，采用软解
2107	当前视频帧不连续，可能丢帧
2108	当前流硬解第一个I帧失败，SDK自动切软解
3001	RTMP -DNS解析失败
3002	RTMP服务器连接失败
3003	RTMP服务器握手失败
3005	RTMP 读/写失败

网络状态数据

键名	说明
videoBitrate	当前视频编/码器输出的比特率，单位 kbps
audioBitrate	当前音频编/码器输出的比特率，单位 kbps
videoFPS	当前视频帧率
videoGOP	当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s
netSpeed	当前的发送/接收速度
netJitter	网络抖动情况，抖动越大，网络越不稳定
videoWidth	视频画面的宽度
videoHeight	视频画面的高度

 

live-pusher直播推流

实时音视频录制，也称直播推流。

 

参数说明

设置live-pusher组件的推流地址，推流视频模式等。

属性	类型	默认值	必填	说明	平台差异说明
url	string		是	推流地址，支持RTMP协议。
mode	string	SD	否	推流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清）。
aspect	string	3:2	否	视频宽高比例
muted	Boolean	false	否	是否静音。
enable-camera	Boolean	true	否	开启摄像头。
auto-focus	Boolean	true	否	自动聚集。
beauty	Number	0	否	美颜，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。
whiteness	Number	0	否	美白，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。
orientation	String	"vertical"	否	画面方向
min-bitrate	Number	200	否	最小码率。
max-bitrate	Number	1000	否	最大码率。
audio-quality	string	high	否	高音质(48KHz)或低音质(16KHz)，值为high, low	微信小程序1.7.0
waiting-image	string		否	进入后台时推流的等待画面	微信小程序1.7.0
waiting-image-hash	string		否	等待画面资源的MD5值	微信小程序1.7.0
zoom	boolean	false	否	调整焦距	微信小程序2.1.0
device-position	string	front	否	前置或后置，值为front, back	微信小程序2.3.0
background-mute	boolean	false	否	进入后台时是否静音	微信小程序1.7.0
remote-mirror	boolean	false	否	设置推流画面是否镜像，产生的效果在 live-player 反应到	微信小程序2.10.0
local-mirror	string	auto	否	控制本地预览画面是否镜像	微信小程序2.10.0
audio-reverb-type	number	0	否	音频混响类型	微信小程序2.10.0
enable-mic	boolean	true	否	开启或关闭麦克风	微信小程序2.10.0
enable-agc	boolean	false	否	是否开启音频自动增益	微信小程序2.10.0
enable-ans	boolean	false	否	是否开启音频噪声抑制	微信小程序2.10.0
audio-volume-type	string	voicecall	否	音量类型	微信小程序2.10.0
@statechange	EventHandle			状态变化事件，detail = {code}
@netstatus	EventHandle			网络状态通知，detail = {info}
@error	EventHandle			渲染错误事件，detail = {errMsg, errCode}
@bgmstart	EventHandle			背景音开始播放时触发	微信小程序2.4.0
@bgmprogress	EventHandle			背景音进度变化时触发，detail = {progress, duration}	微信小程序2.4.0
@bgmcomplete	EventHandle			背景音播放完成时触发	微信小程序2.4.0

orientation 的合法值

值	说明
vertical	竖直
horizontal	水平

local-mirror 的合法值

值	说明
auto	前置摄像头镜像，后置摄像头不镜像
enable	前后置摄像头均镜像
disable	前后置摄像头均不镜像

audio-reverb-type 的合法值

值	说明
0	关闭
1	KTV
2	小房间
3	大会堂
4	低沉
5	洪亮
6	金属声
7	磁性

audio-volume-type 的合法值

值	说明
media	媒体音量
voicecall	通话音量

网络状态数据（info）安卓

键名	说明
videoBitrate	当前视频编/码器输出的比特率，单位 kbps
audioBitrate	当前音频编/码器输出的比特率，单位 kbps
videoFPS	当前视频帧率
videoGOP	当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s
netSpeed	当前的发送/接收速度
netJitter	网络抖动情况，抖动越大，网络越不稳定
videoWidth	视频画面的宽度
videoHeight	视频画面的高度

网络状态数据（info）iOS

参数	类型	说明
code	Number	code码
message	string	具体的网络状态信息

事件

statechange

状态变化事件

返回参数（detail）的详细说明

参数	类型	说明
code	Number
message	string

netstatus

网络状态通知事件

安卓 返回参数（detail）的详细说明

键名	说明
videoBitrate	当前视频编/码器输出的比特率，单位 kbps
audioBitrate	当前音频编/码器输出的比特率，单位 kbps
videoFPS	当前视频帧率
videoGOP	当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s
netSpeed	当前的发送/接收速度
netJitter	网络抖动情况，抖动越大，网络越不稳定
videoWidth	视频画面的宽度
videoHeight	视频画面的高度

iOS 返回参数（detail）的详细说明

参数	类型	说明
code	Number	code码
message	string	具体的网络状态信息

error

渲染错误事件

返回参数（detail）的详细说明

参数	类型	说明
errCode	Number
errMsg	string

 

地图

map地图

地图组件用于展示地图，而定位API只是获取坐标，请勿混淆两者。

地图服务商说明

地图服务商	App	H5	微信小程序
高德	√	3.6.0+
Goolge	3.4+ 仅nvue页面	3.2.10+
腾讯		√	√

 

属性说明

属性名	类型	默认值	说明	平台差异说明
longitude	Number		中心经度
latitude	Number		中心纬度
scale	Number	16	缩放级别，取值范围为3-20	高德地图缩放比例与微信小程序不同
theme	String	normal	主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持）	京东小程序
min-scale	Number	3	最小缩放级别	App-nvue 3.1.0+、微信小程序2.13+
max-scale	Number	20	最大缩放级别	App-nvue 3.1.0+、微信小程序2.13+
layer-style	Number/String	1	个性化地图	App-nvue 3.1.0+、微信小程序2.13+
markers	Array		标记点
polyline	Array		路线	飞书小程序不支持
circles	Array		圆
controls	Array		控件
include-points	Array		缩放视野以包含所有给定的坐标点	App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序
enable-3D	Boolean	false	是否显示3D楼块	App-nvue 2.1.5+、微信小程序2.3.0
show-compass	Boolean	false	是否显示指南针	App-nvue 2.1.5+、微信小程序2.3.0
enable-zoom	Boolean	true	是否支持缩放	App-nvue 2.1.5+、微信小程序2.3.0
enable-scroll	Boolean	true	是否支持拖动	App-nvue 2.1.5+、微信小程序2.3.0
enable-rotate	Boolean	false	是否支持旋转	App-nvue 2.1.5+、微信小程序2.3.0
enable-overlooking	Boolean	false	是否开启俯视	App-nvue 2.1.5+、微信小程序2.3.0
enable-satellite	Boolean	false	是否开启卫星图	App-nvue 2.1.5+、微信小程序2.7.0
enable-traffic	Boolean	false	是否开启实时路况	App-nvue 2.1.5+、微信小程序2.7.0
enable-poi	Boolean	false	是否展示 POI 点	App-nvue 3.1.0+
enable-building	Boolean	false	是否展示建筑物	App-nvue 3.1.0+ 支持 (废除原enable-3D属性 高德地图默认开启建筑物就是3D无法设置)
show-location	Boolean		显示带有方向的当前定位点	微信小程序、H5、百度小程序、支付宝小程序、京东小程序
polygons（支付宝为: polygon）	Array.<polygon>		多边形	App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序、支付宝小程序
enable-indoorMap	Boolean	false	是否展示室内地图	App-nvue 3.1.0+
@markertap	EventHandle		点击标记点时触发，e.detail = {markerId}	App-nvue 2.3.3+、H5、微信小程序、支付宝小程序 （App和H5平台需要指定 marker 对象属性 id）
@labeltap	EventHandle		点击label时触发，e.detail = {markerId}	微信小程序2.9.0
@callouttap	EventHandle		点击标记点对应的气泡时触发，e.detail = {markerId}
@controltap	EventHandle		点击控件时触发，e.detail = {controlId}
@regionchange	EventHandle		视野发生变化时触发	微信小程序、H5、百度小程序、支付宝小程序、京东小程序
@tap	EventHandle		点击地图时触发; App-nvue、微信小程序2.9支持返回经纬度
@updated	EventHandle		在地图渲染更新完成时触发	微信小程序、H5、百度小程序
@anchorpointtap	EventHandle		点击定位标时触发，e.detail = {longitude, latitude}	App-nvue 3.1.0+、微信小程序2.13+
@poitap	EventHandle		点击地图poi点时触发，e.detail = {name, longitude, latitude}	微信小程序2.3.0+

注意

• <map> 组件的宽/高推荐写直接量，比如：750rpx，不要设置百分比值。
• 谷歌地图使用 wgs84 坐标，其他地图使用 gcj02 坐标，用错坐标类型会显示偏移。
• App平台 layer-style 属性需要在地图服务商后台创建，值设置为高德后台申请的字符串，详情。
• H5 端高德地图 include-points 属性仅支持 2 个坐标点，表示显示范围的西南角和东北角。

 

近期新增功能

1. 支持点聚合，适用于marker过多场景。
2. 支持彩虹蚯蚓线，常用于路线规划场景。
3. 覆盖物支持调整与其它地图元素的压盖关系。
4. 支持marker（小车）平移动画，适用于轨迹回放场景。

 

markers

标记点用于在地图上显示标记的位置

属性	说明	类型	必填	备注	平台差异说明
id	标记点id	Number	是	marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。最大限制9位数
latitude	纬度	Number	是	浮点数，范围 -90 ~ 90
longitude	经度	Number	是	浮点数，范围 -180 ~ 180
title	标注点名	String	否	点击时显示，callout存在时将被忽略	App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序
iconPath	显示的图标	String	是	项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径
rotate	旋转角度	Number	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0	App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序
alpha	标注的透明度	Number	否	默认1，无透明，范围 0 ~ 1	App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序
width	标注图标宽度	Number	否	默认为图片实际宽度	App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序
height	标注图标高度	Number	否	默认为图片实际高度	App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序
callout	自定义标记点上方的气泡窗口	Object	否	支持的属性见下表，可识别换行符。	App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序
label	为标记点旁边增加标签	Object	否	支持的属性见下表，可识别换行符。	App-nvue 2.1.5+、微信小程序、H5、App、百度小程序、支付宝小程序
anchor	经纬度在标注图标的锚点，默认底边中点	Object	否	{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点	App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序
clusterId	自定义点聚合簇效果时使用	Number	否		App-nvue 3.1.0+、微信小程序
customCallout	自定义气泡窗口	Object	否		App-nvue 2.1.5+、微信小程序、支付宝小程序
aria-label	无障碍访问，（属性）元素的额外描述	String	否		App-nvue 3.1.0+、微信小程序
joinCluster	是否参与点聚合	Boolean	否	如果指定点聚合 此选项值必须设置为true,才会生效	App-nvue 3.1.0+、微信小程序

 

marker 上的气泡 callout

属性	说明	类型	平台差异说明
content	文本	String	App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序、支付宝小程序
color	文本颜色	String	App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序
fontSize	文字大小	Number	App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序
borderRadius	callout边框圆角	Number	App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序
borderWidth	边框宽度	Number	微信小程序、京东小程序、百度小程序
borderColor	边框颜色	String	微信小程序、京东小程序、百度小程序
bgColor	背景色	String	App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序
padding	文本边缘留白	Number	App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序
display	'BYCLICK':点击显示; 'ALWAYS':常显	String	App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序
textAlign	文本对齐方式。有效值: left, right, center	String	App-nvue 2.1.5+、微信小程序、百度小程序、京东小程序
anchorX	横向偏移量，向右为正数	Number	微信小程序2.11.0
anchorY	纵向偏移量，向下为正数	Number	微信小程序2.11.0

 

marker 上的标签 label

属性	说明	类型	平台差异说明
content	文本	String
color	文本颜色	String	App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序
fontSize	文字大小	Number	App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序
x	label的坐标，原点是 marker 对应的经纬度	Number	H5、百度小程序
y	label的坐标，原点是 marker 对应的经纬度	Number	H5、百度小程序
anchorX	label的坐标，原点是 marker 对应的经纬度	Number	App-nvue 2.1.5+、微信小程序
anchorY	label的坐标，原点是 marker 对应的经纬度	Number	App-nvue 2.1.5+、微信小程序
borderWidth	边框宽度	Number	微信小程序、百度小程序
borderColor	边框颜色	String	微信小程序、百度小程序
borderRadius	边框圆角	Number	App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序
bgColor	背景色	String	App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序
padding	文本边缘留白	Number	App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序
textAlign	文本对齐方式。有效值: left, right, center	String	App-nvue 2.1.5+、微信小程序、百度小程序
aria-label	无障碍访问，（属性）元素的额外描述	String	App-nvue 3.1.0+、微信小程序

 

 

点聚合

当地图上需要展示的标记点 marker 过多时，可能会导致界面上 marker 出现压盖，展示不全，并导致整体性能变差。针对此类问题，推出点聚合能力。

使用流程如下：

MapContext.initMarkerCluster 对聚合点进行初始化配置（可选）； MapContext.addMarkers 指定参与聚合的 marker； MapContext.on('markerClusterCreate', callback) 触发时，通过 MapContext.addMarkers 更新聚合簇的样式 （可选）； MapContext.removeMarkers 移除参与聚合的 marker；

polyline

指定一系列坐标点，从数组第一项连线至最后一项

属性	说明	类型	必填	备注	平台差异说明
points	经纬度数组	Array	是	[{latitude: 0, longitude: 0}]
color	线的颜色	String	否	8位十六进制表示，后两位表示alpha值，如：#0000AA
width	线的宽度	Number	否
dottedLine	是否虚线	Boolean	否	默认false	App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序
arrowLine	带箭头的线	Boolean	否	默认false，微信小程序开发者工具暂不支持该属性	App-nvue 2.1.5+、微信小程序、百度小程序、京东小程序
arrowIconPath	更换箭头图标	String	否	在arrowLine为true时生效	App-nvue 2.1.5+、微信小程序、百度小程序、京东小程序
borderColor	线的边框颜色	String	否		微信小程序、H5、百度小程序、京东小程序
borderWidth	线的厚度	Number	否		微信小程序、H5、百度小程序、京东小程序
colorList	彩虹线	Array	否	存在时忽略 color 值	App-nvue 3.1.0+、微信小程序
level	压盖关系 abovelabels 显示在所有 POI 之上（默认） abovebuildings 显示在楼块之上 POI 之下 aboveroads 显示在所有 POI 之上	String	否		微信小程序

 

注意事项

• App-nvue 当 arrowLine 为 true 时，显示的是带箭头的图片拼接的线 color 值会被忽略，替换箭头图片的方法参考文档

polygon
指定一系列坐标点，根据 points 坐标数据生成闭合多边形

属性	说明	类型	必填	备注
points	经纬度数组	array	是	[{latitude: 0, longitude: 0}]
strokeWidth	描边的宽度	Number	否
strokeColor	描边的颜色	String	否	十六进制
fillColor	填充颜色	String	否	十六进制
zIndex	设置多边形 Z 轴数值	Number	否
level	压盖关系 abovelabels 显示在所有 POI 之上（默认） abovebuildings 显示在楼块之上 POI 之下 aboveroads 显示在所有 POI 之上	String	false	微信小程序

 

circles

在地图上显示圆

属性	说明	类型	必填	备注
latitude	纬度	Number	是	浮点数，范围 -90 ~ 90
longitude	经度	Number	是	浮点数，范围 -180 ~ 180
color	描边的颜色	String	否	8位十六进制表示，后两位表示alpha值，如：#000000AA；#00000为十六进制
fillColor	填充颜色	String	否	8位十六进制表示，后两位表示alpha值，如：#000000AA；#00000为十六进制
radius	半径	Number	是
strokeWidth	描边的宽度	Number	否
level	压盖关系 abovelabels 显示在所有 POI 之上（默认） abovebuildings 显示在楼块之上 POI 之下 aboveroads 显示在所有 POI 之上	String	false	微信小程序

 

controls

在地图上显示控件，控件不随着地图移动

属性	说明	类型	必填	备注
id	控件id	Number	否	在控件点击事件回调会返回此id
position	控件在地图的位置	Object	是	控件相对地图位置
iconPath	显示的图标	String	是	项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对项目根目录；也支持临时路径
clickable	是否可点击	Boolean	否	默认不可点击

 

position

属性	说明	类型	必填	备注
left	距离地图的左边界多远	Number	否	默认为0
top	距离地图的上边界多远	Number	否	默认为0
width	控件宽度	Number	否	默认为图片宽度
height	控件高度	Number	否	默认为图片高度

地图组件的经纬度必填，如果不填经纬度则默认值是北京的经纬度。

 

详情：https://uniapp.dcloud.net.cn/component/map.html#

 

unicloud-map 云端一体组件

若想要在地图上展示自定义的POI信息，试试 unicloud-map 云端一体组件，该组件将前端地图组件与云端数据库无缝连接，只需写一个<unicloud-map>组件，即可从数据库中获取附近的POI信息并在地图上呈现。无论是静态还是动态的POI，甚至更多自定义功能，都轻松实现。让地图开发变得愉快又高效。

详情：https://uniapp.dcloud.net.cn/component/map.html#

 

画布

canvas

属性说明

属性名	类型	默认值	说明	平台差异说明
type	String		指定 canvas 类型，支持 2d (2.9.0) 和 webgl	微信小程序 2.7.0+ 抖音小程序1.78.0+
canvas-id	String		canvas 组件的唯一标识符
disable-scroll	Boolean	false	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新	抖音小程序与飞书小程序不支持
hidpi	Boolean	true	是否启用高清处理	H5 (HBuilder X 3.4.0+)、App-vue (HBuilder X 3.4.0+)
@touchstart	EventHandle		手指触摸动作开始	抖音小程序1.78.0+
@touchmove	EventHandle		手指触摸后移动	抖音小程序1.78.0+
@touchend	EventHandle		手指触摸动作结束	抖音小程序1.78.0+
@touchcancel	EventHandle		手指触摸动作被打断，如来电提醒，弹窗	抖音小程序1.78.0+
@longtap	EventHandle		手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动	抖音小程序与飞书小程序不支持
@error	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}	抖音小程序与飞书小程序不支持

详情：https://uniapp.dcloud.net.cn/component/canvas.html#

 

Vue组件

component

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
√ (Vue2 需传入 String 类型)	√	x	x	x	x	x	x	x	x	x

 

template

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
√	√	√	√	√	√	√	√	√	√	√

 

transition

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
x	√	x	x	x	x	x	x	x	x	x

 

keep-alive

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
x	√	x	x	x	x	x	x	x	x	x

 

slot

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
√	√	√	√	√	√	√	√	√	√	√

 

小程序组件

official-account

微信公众号关注组件。当用户扫小程序码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内。规范详情

 

open-data

用于展示平台开放的数据。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序	飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
x	x	√	x	√	√	x	√	x	x	x	x

Tips

该功能为各小程序平台提供的开放能力。App端和H5端不涉及此概念。

支付宝没有open-data组件，但提供了API方式获取相关信息。参考

属性说明

属性名	类型	默认值	说明	平台差异说明
type	String		开放数据类型
open-gid	String		当 type="groupName" 时生效, 群id	微信小程序、QQ小程序
lang	String	en	当 type="user*" 时生效，以哪种语言展示 userInfo，有效值有：en, zh_CN, zh_TW	微信小程序、QQ小程序

type 有效值

值	说明	平台差异说明
userNickName	用户昵称	微信小程序基础库 1.9.90+ 返回 "微信用户"
userAvatarUrl	用户头像	微信小程序基础库 1.9.90+ 不再返回，展示 灰色头像
userGender	用户性别	微信小程序基础库 1.9.90+ 不再返回
groupName	拉取群名称	微信小程序、QQ小程序
userCity	用户所在城市	微信小程序基础库 1.9.90+ 不再返回、QQ小程序
userProvince	用户所在省份	微信小程序基础库 1.9.90+ 不再返回、QQ小程序
userCountry	用户所在国家	微信小程序基础库 1.9.90+ 不再返回、QQ小程序
userLanguage	用户的语言	微信小程序基础库 1.9.90+ 不再返回、QQ小程序

注意

• 微信小程序平台从 2022年2月21日24时起 回收通过 <open-data> 展示个人信息的能力，详情。若小程序需收集用户昵称头像等信息，可以通过 头像昵称填写功能 进行收集。具体回收方式为：
  • 头像展示 灰色头像
  • 用户昵称展示 微信用户
  • 用户性别、地区、语言展示为为空 “”
• 小程序通过 <open-data> 展示群名称能力保留，平台会针对小程序生命周期内首次调用该组件展示群名称向用户提示：“群名称仅你可见，小程序无法获取。”

示例

<open-data type="userNickName"></open-data>
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender"></open-data>