小程序组件

关注

原创最新推荐文章于 2026-04-27 09:46:51 发布 2.4k 阅读 AI 写同款· GEO 优化 ›

微信小程序const app=getApp()的作用，实现page页面获取全局数据微信小程序const app=getApp()的作用，实现page页面获取app.js globalData全局数据，获取用户登录状态阅读详情

1 基础组件

text

rich-text

nodes

icon

progress

2 视图组件

cover-image

cover-view

mavable-area

movable-view

scroll-view

swiper

swiper-item

view

3 表单组件

button

checkbox

checkbox-group

form

input

label

picker

picker-view

radio

radio-group

slider

swith

textarea

5 导航组件

functional-page-navigator

navigator

6 媒体组件

audio

camera

image

live-player

live-pusher

video

7 地图组件

map

8 画布组件

canvas

1 基础组件

text

文本。

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string		否	显示连续空格
decode	boolean	false	否	是否解码

space 的合法值

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

rich-text

富文本。

属性	类型	默认值	必填	说明
nodes	array/string	[]	否	节点列表/HTML String
space	string		否	显示连续空格

space 的合法值

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

nodes

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node*

属性	说明	类型	必填	备注
name	标签名	string	是	支持部分受信任的 HTML 节点
attrs	属性	object	否	支持部分受信任的属性，遵循 Pascal 命名法
children	子节点列表	array	否	结构和 nodes 一致

文本节点：type = text*

属性	说明	类型	必填	备注
text	文本	string	是	支持entities

icon

图标，组件属性的长度单位默认为px。

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的大小
color	string		否	icon的颜色，同css的color

progress

进度条，组件属性的长度单位默认为px。

属性	类型	默认值	必填	说明
percent	number		否	百分比0~100
show-info	boolean	false	否	在进度条右侧显示百分比
border-radius	number/string	0	否	圆角大小
font-size	number/string	16	否	右侧百分比字体大小
stroke-width	number/string	6	否	进度条线的宽度
color	string	#09BB07	否	进度条颜色（请使用activeColor）
activeColor	string	#09BB07	否	已选择的进度条的颜色
backgroundColor	string	#EBEBEB	否	未选择的进度条的颜色
active	boolean	false	否	进度条从左往右的动画
active-mode	string	backwards	否	backwards: 动画从头播；forwards：动画从上次结束点接着播
bindactiveend	eventhandle		否	动画完成事件

2 视图组件

cover-image

覆盖在原生组件之上的图片视图，可覆盖的原生组件同<cover-view>，支持嵌套在<cover-view>里。

属性	类型	必填	说明
src	string	否	图标路径，支持临时路径、网络地址（1.6.0起支持）、云文件ID（2.2.3起支持）。暂不支持base64格式。
bindload	eventhandle	否	图片加载成功时触发
binderror	eventhandle	否	图片加载失败时触发

cover-view

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

可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	类型	默认值	必填	说明
scroll-top	number/string		否	设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效

mavable-area

<movable-view>的可移动区域。

属性	类型	默认值	必填	说明
scale-area	Boolean	false	否	当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area

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		否	定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	number		否	定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping	number	20	否	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction	number	2	否	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
disabled	boolean	false	否	是否禁用
scale	boolean	false	否	是否支持双指缩放，默认缩放手势生效区域是在movable-view内
scale-min	number	0.5	否	定义缩放倍数最小值
scale-max	number	10	否	定义缩放倍数最大值
scale-value	number	1	否	定义缩放倍数，取值范围为 0.5 - 10
animation	boolean	true	否	是否使用动画
bindchange	eventhandle		否	拖动过程中触发的事件，event.detail = {x, y, source}
bindscale	eventhandle		否	缩放过程中触发的事件，event.detail = {x, y, scale}，x和y字段在2.1.0之后支持
htouchmove	eventhandle		否	初次手指触摸后移动为横向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch
vtouchmove	eventhandle		否	初次手指触摸后移动为纵向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch

bindchange 返回的 source 表示产生移动的原因

值	说明
touch	拖动
touch-out-of-bounds	超出移动范围
out-of-bounds	超出移动范围后的回弹
friction	惯性
空字符串	setData

scroll-view

可滚动视图区域。使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px。

属性	类型	默认值	必填	说明
scroll-x	boolean	false	否	允许横向滚动
scroll-y	boolean	false	否	允许纵向滚动
upper-threshold	number/string	50	否	距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold	number/string	50	否	距底部/右边多远时，触发 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点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper	eventhandle		否	滚动到顶部/左边时触发
bindscrolltolower	eventhandle		否	滚动到底部/右边时触发
bindscroll	eventhandle		否	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

swiper

滑块视图容器。其中只可放置<swiper-item>组件，否则会导致未定义的行为。

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
display-multiple-items	number	1	否	同时显示的滑块数量
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上

easing-function 的合法值

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

swiper-item

仅可放置在<swiper>组件中，宽高自动设置为100%。

属性	类型	必填	说明
item-id	string	否	该 swiper-item 的标识符

view

视图容器

属性	类型	默认值	必填	说明
hover-class	string	none	否	指定按下去的样式类。当 `hover-class="none"`时，没有点击态效果
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒

3 表单组件

button

按钮。

属性	类型	默认值	必填	说明
size	string	default	否	按钮的大小
type	string	default	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带 loading 图标
form-type	string		否	用于 `<form>` 组件，点击分别会触发 `<form>` 组件的 submit/reset 事件
open-type	string		否	微信开放能力
hover-class	string	button-hover	否	指定按钮按下去的样式类。当 `hover-class="none"` 时，没有点击态效果
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	20	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	70	否	手指松开后点击态保留时间，单位毫秒
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"时有效
app-parameter	string		否	打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
show-message-card	boolean	false	否	是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
bindgetuserinfo	eventhandle		否	用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效
bindcontact	eventhandle		否	客服消息回调，open-type="contact"时有效
bindgetphonenumber	eventhandle		否	获取用户手机号回调，open-type=getPhoneNumber时有效
binderror	eventhandle		否	当使用开放能力时，发生错误的回调，open-type=launchApp时有效
bindopensetting	eventhandle		否	在打开授权设置页后回调，open-type=openSetting时有效
bindlaunchapp	eventhandle		否	打开 APP 成功的回调，open-type=launchApp时有效

size 的合法值

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

type 的合法值

值	说明
primary	绿色
default	白色
warn	红色

form-type 的合法值

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

open-type 的合法值

值	说明
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
share	触发用户转发
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数
openSetting	打开授权设置页
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

lang 的合法值

值	说明
en	英文
zh_CN	简体中文
zh_TW	繁体中文

checkbox

多选项目。

属性	类型	默认值	必填	说明
value	string		否	`<checkbox>`标识，选中时触发`<checkbox-group>`的 change 事件，并携带 `<checkbox>` 的 value
disabled	boolean	false	否	是否禁用
checked	boolean	false	否	当前是否选中，可用来设置默认选中
color	string	#09BB07	否	checkbox的颜色，同css的color

checkbox-group

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

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

form

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

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

属性	类型	默认值	必填	说明
report-submit	boolean	false	否	是否返回 formId 用于发送模板信息
report-submit-timeout	number	0	否	等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId
bindsubmit	eventhandle		否	携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
bindreset	eventhandle		否	表单重置时会触发 reset 事件

input

输入框。

属性	类型	默认值	必填	说明
value	string		是	输入框的初始内容
type	string	text	否	input 的类型
password	boolean	false	否	是否是密码类型
placeholder	string		是	输入框为空时占位符
placeholder-style	string		是	指定 placeholder 的样式
placeholder-class	string	input-placeholder	否	指定 placeholder 的样式类
disabled	boolean	false	否	是否禁用
maxlength	number	140	否	最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing	number	0	否	指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
auto-focus	boolean	false	否	(即将废弃，请直接使用 focus )自动聚焦，拉起键盘
focus	boolean	false	否	获取焦点
confirm-type	string	done	否	设置键盘右下角按钮的文字，仅在type='text'时生效
confirm-hold	boolean	false	否	点击键盘右下角按钮时是否保持键盘不收起
cursor	number		是	指定focus时的光标位置
selection-start	number	-1	否	光标起始位置，自动聚集时有效，需与selection-end搭配使用
selection-end	number	-1	否	光标结束位置，自动聚集时有效，需与selection-start搭配使用
adjust-position	boolean	true	否	键盘弹起时，是否自动上推页面
bindinput	eventhandle		是	键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus	eventhandle		是	输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持
bindblur	eventhandle		是	输入框失去焦点时触发，event.detail = {value: value}
bindconfirm	eventhandle		是	点击完成按钮时触发，event.detail = {value: value}

type 的合法值

值	说明
text	文本输入键盘
number	数字输入键盘
idcard	身份证输入键盘
digit	带小数点的数字键盘

confirm-type 的合法值

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

label

用来改进表单组件的可用性。

使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。目前可以绑定的控件有：button, checkbox, radio, switch。

属性	类型	默认值	必填	说明
for	string		否	绑定控件的 id

picker

从底部弹起的滚动选择器。

属性	类型	默认值	必填	说明
mode	string	selector	否	选择器类型
disabled	boolean	false	否	是否禁用
bindcancel	eventhandle		否	取消选择时触发

mode 的合法值

值	说明
selector	普通选择器
multiSelector	多列选择器
time	时间选择器
date	日期选择器
region	省市区选择器

除了上述通用的属性，对于不同的mode，picker拥有不同的属性。

普通选择器：mode = selector

属性名	类型	默认值	说明
range	array/object array	[]	mode 为 selector 或 multiSelector 时，range 有效
range-key	string		当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	number	0	表示选择了 range 中的第几个（下标从 0 开始）
bindchange	eventhandle		value 改变时触发 change 事件，event.detail = {value}

时间选择器：mode = time

属性名	类型	说明
value	string	表示选中的时间，格式为"hh:mm"
start	string	表示有效时间范围的开始，字符串格式为"hh:mm"
end	string	表示有效时间范围的结束，字符串格式为"hh:mm"
bindchange	eventhandle	value 改变时触发 change 事件，event.detail = {value}

日期选择器：mode = date

属性名	类型	默认值	说明
value	string	0	表示选中的日期，格式为"YYYY-MM-DD"
start	string		表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end	string		表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields	string	day	有效值 year,month,day，表示选择器的粒度
bindchange	eventhandle		value 改变时触发 change 事件，event.detail = {value}

fields 有效值：*

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

省市区选择器：mode = region 1.4.0

属性名	类型	默认值	说明
value	array	[]	表示选中的省市区，默认选中每一列的第一个值
custom-item	string		可为每一列的顶部添加一个自定义的项
bindchange	eventhandle		value 改变时触发 change 事件，event.detail = {value, code, postcode}，其中字段 code 是统计用区划代码，postcode 是邮政编码

picker-view

嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示。

属性	类型	必填	说明
value	Array.<number>	否	数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style	string	否	设置选择器中间选中框的样式
indicator-class	string	否	设置选择器中间选中框的类名
mask-style	string	否	设置蒙层的样式
mask-class	string	否	设置蒙层的类名
bindchange	eventhandle	否	滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
bindpickstart	eventhandle	否	当滚动选择开始时候触发事件
bindpickend	eventhandle	否	当滚动选择结束时候触发事件

radio

单选项目。

属性	类型	默认值	必填	说明
value	string		否	`<radio>` 标识。当该`<radio>` 选中时，`<radio-group>` 的 change 事件会携带`<radio>`的value
checked	boolean	false	否	当前是否选中
disabled	boolean	false	否	是否禁用
color	string	#09BB07	否	radio的颜色，同css的color

radio-group

单项选择器，内部由多个 <radio> 组成。

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

slider

滑动选择器。

属性	类型	默认值	必填	说明
min	number	0	否	最小值
max	number	100	否	最大值
step	number	1	否	步长，取值必须大于 0，并且可被(max - min)整除
disabled	boolean	false	否	是否禁用
value	number	0	否	当前取值
color	color	#e9e9e9	否	背景条的颜色（请使用 backgroundColor）
selected-color	color	#1aad19	否	已选择的颜色（请使用 activeColor）
activeColor	color	#1aad19	否	已选择的颜色
backgroundColor	color	#e9e9e9	否	背景条的颜色
block-size	number	28	否	滑块的大小，取值范围为 12 - 28
block-color	color	#ffffff	否	滑块的颜色
show-value	boolean	false	否	是否显示当前 value
bindchange	eventhandle		否	完成一次拖动后触发的事件，event.detail = {value}
bindchanging	eventhandle		否	拖动过程中触发的事件，event.detail = {value}

swith

开关选择器。

属性	类型	默认值	必填	说明
checked	boolean	false	否	是否选中
disabled	boolean	false	否	是否禁用
type	string	switch	否	样式，有效值：switch, checkbox
colo	string	#04BE02	否	switch 的颜色，同 css 的 color
bindchange	eventhandle		否	checked 改变时触发 change 事件，event.detail={ value}

textarea

多行输入框。

属性	类型	默认值	必填	说明
value	string		否	输入框的内容
placeholder	string		否	输入框为空时占位符
placeholder-style	string		否	指定 placeholder 的样式，目前仅支持color,font-size和font-weight
placeholder-class	string	textarea-placeholder	否	指定 placeholder 的样式类
disabled	boolean	false	否	是否禁用
maxlength	number	140	否	最大输入长度，设置为 -1 的时候不限制最大长度
auto-focus	boolean	false	否	自动聚焦，拉起键盘。
focus	boolean	false	否	获取焦点
auto-height	boolean	false	否	是否自动增高，设置auto-height时，style.height不生效
fixed	boolean	false	否	如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true
cursor-spacing	number	0	否	指定光标与键盘的距离。取`textarea`距离底部的距离和`cursor-spacing`指定的距离的最小值作为光标与键盘的距离
cursor	number	-1	否	指定focus时的光标位置
show-confirm-bar	boolean	true	否	是否显示键盘上方带有”完成“按钮那一栏
selection-start	number	-1	否	光标起始位置，自动聚集时有效，需与`selection-end`搭配使用
selection-end	number	-1	否	光标结束位置，自动聚集时有效，需与`selection-start`搭配使用
adjust-position	boolean	true	否	键盘弹起时，是否自动上推页面
bindfocus	eventhandle		否	输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持
bindblur	eventhandle		否	输入框失去焦点时触发，event.detail = {value, cursor}
bindlinechange	eventhandle		否	输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput	eventhandle		否	当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}，keyCode 为键值，目前工具还不支持返回keyCode参数。bindinput 处理函数的返回值并不会反映到 textarea 上
bindconfirm	eventhandle		否	点击完成时，触发 confirm 事件，event.detail = {value: value}

5 导航组件

functional-page-navigator

仅在插件中有效，用于跳转到插件功能页。

属性	类型	默认值	必填	说明
version	string	release	否	跳转到的小程序版本，线上版本必须设置为 release
name	string		否	要跳转到的功能页
args	object		否	功能页参数，参数格式与具体功能页相关
bindsuccess	eventhandler		否	功能页返回，且操作成功时触发， detail 格式与具体功能页相关
bindfail	eventhandler		否	功能页返回，且操作失败时触发， detail 格式与具体功能页相关

version 的合法值

值	说明
develop	开发版
trial	体验版
release	正式版

name 的合法值

值	说明
loginAndGetUserInfo	用户信息功能页
requestPayment	支付功能页

navigator

页面链接。

属性	类型	默认值	必填	说明
target	string	self	否	在哪个目标上发生跳转，默认当前小程序
url	string		否	当前小程序内的跳转链接
open-type	string	navigate	否	跳转方式
delta	number	1	否	当 open-type 为 'navigateBack' 时有效，表示回退的层数
app-id	string		否	当`target="miniProgram"`时有效，要打开的小程序 appId
path	string		否	当`target="miniProgram"`时有效，打开的页面路径，如果为空则打开首页
extra-data	object		否	当`target="miniProgram"`时有效，需要传递给目标小程序的数据，目标小程序可在 `App.onLaunch()`，`App.onShow()` 中获取到这份数据。
version	string	release	否	当`target="miniProgram"`时有效，要打开的小程序版本
hover-class	string	navigator-hover	否	指定点击时的样式类，当`hover-class="none"`时，没有点击态效果
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	600	否	手指松开后点击态保留时间，单位毫秒
bindsuccess	string		否	当`target="miniProgram"`时有效，跳转小程序成功
bindfail	string		否	当`target="miniProgram"`时有效，跳转小程序失败
bindcomplete	string		否	当`target="miniProgram"`时有效，跳转小程序完成

target 的合法值

值	说明
self	当前小程序
miniProgram	其它小程序

open-type 的合法值

值	说明
navigate	对应 `wx.navigateTo` 或 `wx.navigateToMiniProgram` 的功能
redirect	对应 `wx.redirectTo` 的功能
switchTab	对应 `wx.switchTab` 的功能
reLaunch	对应 `wx.reLaunch` 的功能
navigateBack	对应 `wx.navigateBack` 的功能
exit	退出小程序，`target="miniProgram"`时生效

version 的合法值

值	说明
develop	开发版
trial	体验版
release	正式版，仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版。

6 媒体组件

audio

音频。

属性	类型	默认值	必填	说明
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 无效
binderror	eventhandle		否	当发生错误时触发 error 事件，detail = {errMsg:MediaError.code}
bindplay	eventhandle		否	当开始/继续播放时触发play事件
bindpause	eventhandle		否	当暂停播放时触发 pause 事件
bindtimeupdate	eventhandle		否	当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
bindended	eventhandle		否	当播放到末尾时触发 ended 事件

MediaError.code

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

camera

系统相机

属性	类型	默认值	必填	说明
mode	string	normal	否	应用模式
device-position	string	back	否	摄像头朝向
flash	string	auto	否	闪光灯，值为auto, on, off
bindstop	eventhandle		否	摄像头在非正常终止时触发，如退出后台等情况
binderror	eventhandle		否	用户不允许使用摄像头时触发
bindscancode	eventhandle		否	在扫码识别成功时触发，仅在 mode="scanCode" 时生效

mode 的合法值

值	说明
normal	相机模式
scanCode	扫码模式

device-position 的合法值

值	说明
front	前置
back	后置

flash 的合法值

值	说明
auto	自动
on	打开
off	关闭

image

图片，支持JPG、PNG、SVG格式。

属性	类型	默认值	必填	说明
src	string		否	图片资源地址
mode	string	scaleToFill	否	图片裁剪、缩放的模式
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
binderror	eventhandle		否	当错误发生时触发，，event.detail = {errMsg}
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}

mode 的合法值

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

live-player

实时音视频播放。

一级类目/主体类型	二级类目	小程序内容场景
社交	直播	涉及娱乐性质，如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核，需经当地互联网主管机关审核确认，预计审核时长 7 天左右
教育	在线视频课程	网课、在线培训、讲座等教育类直播
医疗	互联网医院，公立医院	问诊、大型健康讲座等直播
金融	银行、信托、基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台（港股/美股）、消费金融	金融产品视频客服理赔、金融产品推广直播等
汽车	汽车预售服务	汽车预售、推广直播
政府主体帐号	/	政府相关工作推广直播、领导讲话直播等
工具	视频客服	不涉及以上几类内容的一对一视频客服服务，如企业售后一对一视频服务等

属性	类型	默认值	必填	说明
src	string		否	音视频地址。目前仅支持 `flv`, `rtmp` 格式
mode	string	live	否	模式
autoplay	boolean	false	否	自动播放
muted	boolean	false	否	是否静音
orientation	string	vertical	否	画面方向
object-fit	string	contain	否	填充模式，可选值有 `contain`，`fillCrop`
background-mute	boolean	false	否	进入后台时是否静音（已废弃，默认退台静音）
min-cache	number	1	否	最小缓冲区，单位s（RTC 模式推荐 0.2s）
max-cache	number	3	否	最大缓冲区，单位s（RTC 模式推荐 0.8s）
sound-mode	string	speaker	否	声音输出方式
auto-pause-if-navigate	boolean	true	否	当跳转到其它小程序页面时，是否自动暂停本页面的实时音视频播放
auto-pause-if-open-native	boolean	true	否	当跳转到其它微信原生页面时，是否自动暂停本页面的实时音视频播放
bindstatechange	eventhandle		否	播放状态变化事件，detail = {code}
bindfullscreenchange	eventhandle		否	全屏变化事件，detail = {direction, fullScreen}
bindnetstatus	eventhandle		否	网络状态通知，detail = {info}

mode 的合法值

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

orientation 的合法值

值	说明
vertical	竖直
horizontal	水平

sound-mode 的合法值

值	说明
speaker	扬声器
ear	听筒

状态码

代码	说明
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

实时音视频录制。

一级类目/主体类型	二级类目	小程序内容场景
社交	直播	涉及娱乐性质，如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核，需经当地互联网主管机关审核确认，预计审核时长7天左右
教育	在线视频课程	网课、在线培训、讲座等教育类直播
医疗	互联网医院，公立医院	问诊、大型健康讲座等直播
金融	银行、信托、基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台（港股/美股）、消费金融	金融产品视频客服理赔、金融产品推广直播等
汽车	汽车预售服务	汽车预售、推广直播
政府主体帐号	/	政府相关工作推广直播、领导讲话直播等
工具	视频客服	不涉及以上几类内容的一对一视频客服服务，如企业售后一对一视频服务等

video

视频。

属性	类型	默认值	必填	说明
src	string		是	要播放视频的资源地址，支持云文件ID（2.3.0）
duration	number		否	指定视频时长
controls	boolean	true	否	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
danmu-list	Array.<object>		否	弹幕列表
danmu-btn	boolean	false	否	是否显示弹幕按钮，只在初始化时有效，不能动态变更
enable-danmu	boolean	false	否	是否展示弹幕，只在初始化时有效，不能动态变更
autoplay	boolean	false	否	是否自动播放
loop	boolean	false	否	是否循环播放
muted	boolean	false	否	是否静音播放
initial-time	number	0	否	指定视频初始播放位置
page-gesture	boolean	false	否	在非全屏模式下，是否开启亮度与音量调节手势（废弃，见 vslide-gesture）
direction	number		否	设置全屏时视频的方向，不指定则根据宽高比自动判断
show-progress	boolean	true	否	若不设置，宽度大于240时才会显示
show-fullscreen-btn	boolean	true	否	是否显示全屏按钮
show-play-btn	boolean	true	否	是否显示视频底部控制栏的播放按钮
show-center-play-btn	boolean	true	否	是否显示视频中间的播放按钮
enable-progress-gesture	boolean	true	否	是否开启控制进度的手势
object-fit	string	contain	否	当视频大小与 video 容器大小不一致时，视频的表现形式
poster	string		否	视频封面的图片网络资源地址或云文件ID（2.3.0）。若 controls 属性值为 false 则设置 poster 无效
show-mute-btn	boolean	false	否	是否显示静音按钮
title	string		否	视频的标题，全屏时在顶部展示
play-btn-position	string	bottom	否	播放按钮的位置
enable-play-gesture	boolean	false	否	是否开启播放手势，即双击切换播放/暂停
auto-pause-if-navigate	boolean	true	否	当跳转到其它小程序页面时，是否自动暂停本页面的视频
auto-pause-if-open-native	boolean	true	否	当跳转到其它微信原生页面时，是否自动暂停本页面的视频
vslide-gesture	boolean	false	否	在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）
vslide-gesture-in-fullscreen	boolean	true	否	在全屏模式下，是否开启亮度与音量调节手势
bindplay	eventhandle		否	当开始/继续播放时触发play事件
bindpause	eventhandle		否	当暂停播放时触发 pause 事件
bindended	eventhandle		否	当播放到末尾时触发 ended 事件
bindtimeupdate	eventhandle		否	播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
bindfullscreenchange	eventhandle		否	视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal
bindwaiting	eventhandle		否	视频出现缓冲时触发
binderror	eventhandle		否	视频播放出错时触发
bindprogress	eventhandle		否	加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比

direction 的合法值

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

object-fit 的合法值

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

play-btn-position 的合法值

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

7 地图组件

map

地图。

属性	类型	默认值	必填	说明
longitude	number		是	中心经度
latitude	number		是	中心纬度
scale	number	16	否	缩放级别，取值范围为5-18
markers	Array.<marker>		否	标记点
covers	Array.<cover>		否	即将移除，请使用 markers
polyline	Array.<polyline>		否	路线
circles	Array.<circle>		否	圆
controls	Array.<control>		否	控件（即将废弃，建议使用 cover-view 代替）
include-points	Array.<point>		否	缩放视野以包含所有给定的坐标点
show-location	boolean	false	否	显示带有方向的当前定位点
polygons	Array.<polygon>		否	多边形
subkey	string		否	个性化地图使用的key，仅初始化地图时有效
enable-3D	boolean	false	否	展示3D楼块(工具暂不支持）
show-compass	boolean	false	否	显示指南针
enable-overlooking	boolean	false	否	开启俯视
enable-zoom	boolean	true	否	是否支持缩放
enable-scroll	boolean	true	否	是否支持拖动
enable-rotate	boolean	false	否	是否支持旋转
bindtap	eventhandle		否	点击地图时触发
bindmarkertap	eventhandle		否	点击标记点时触发，会返回marker的id
bindcontroltap	eventhandle		否	点击控件时触发，会返回control的id
bindcallouttap	eventhandle		否	点击标记点对应的气泡时触发，会返回marker的id
bindupdated	eventhandle		否	在地图渲染更新完成时触发
bindregionchange	eventhandle		否	视野发生变化时触发
bindpoitap	eventhandle		否	点击地图poi点时触发

marker

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

属性	说明	类型	必填	备注
id	标记点 id	number	否	marker 点击事件回调会返回此 id。
latitude	纬度	number	是	浮点数，范围 -90 ~ 90
longitude	经度	number	是	浮点数，范围 -180 ~ 180
title	标注点名	string	否
zIndex	显示层级	number	否
iconPath	显示的图标	string	是	项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径和网络图片
rotate	旋转角度	number	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0
alpha	标注的透明度	number	否	默认 1，无透明，范围 0 ~ 1
width	标注图标宽度	number/string	否	默认为图片实际宽度
height	标注图标高度	number/string	否	默认为图片实际高度
callout	自定义标记点上方的气泡窗口	Object	否	支持的属性见下表，可识别换行符。
label	为标记点旁边增加标签	Object	否	支持的属性见下表，可识别换行符。
anchor	经纬度在标注图标的锚点，默认底边中点	Object	否	{x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点
aria-label	无障碍访问，（属性）元素的额外描述	string	否

marker 上的气泡 callout

属性	说明	类型
content	文本	string
color	文本颜色	string
fontSize	文字大小	number
borderRadius	边框圆角	number
borderWidth	边框宽度	number
borderColor	边框颜色	string
bgColor	背景色	string
padding	文本边缘留白	number
display	'BYCLICK':点击显示; 'ALWAYS':常显	string
textAlign	文本对齐方式。有效值: left, right, center	string

marker 上的气泡 label

属性	说明	类型
content	文本	string
color	文本颜色	string
fontSize	文字大小	number
x	label的坐标（废弃）	number
y	label的坐标（废弃）	number
anchorX	label的坐标，原点是 marker 对应的经纬度	number
anchorY	label的坐标，原点是 marker 对应的经纬度	number
borderWidth	边框宽度	number
borderColor	边框颜色	string
borderRadius	边框圆角	number
bgColor	背景色	string
padding	文本边缘留白	number
textAlign	文本对齐方式。有效值: left, right, center	string

polyline

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

属性	说明	类型	必填	备注
points	经纬度数组	array	是	[{latitude: 0, longitude: 0}]
color	线的颜色	string	否	十六进制
width	线的宽度	number	否
dottedLine	是否虚线	boolean	否	默认 false
arrowLine	带箭头的线	boolean	否	默认 false，开发者工具暂不支持该属性
arrowIconPath	更换箭头图标	string	否	在 arrowLine 为 true 时生效
borderColor	线的边框颜色	string	否
borderWidth	线的厚度	number	否

polygon

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

属性	说明	类型	必填	备注
points	经纬度数组	array	是	[{latitude: 0, longitude: 0}]
strokeWidth	描边的宽度	number	否
strokeColor	描边的颜色	string	否	十六进制
fillColor	填充颜色	string	否	十六进制
zIndex	设置多边形Z轴数值	number	否

circle

在地图上显示圆

属性	说明	类型	必填	备注
latitude	纬度	number	是	浮点数，范围 -90 ~ 90
longitude	经度	number	是	浮点数，范围 -180 ~ 180
color	描边的颜色	string	否	十六进制
fillColor	填充颜色	string	否	十六进制
radius	半径	number	是
strokeWidth	描边的宽度	number	否

control

在地图上显示控件，控件不随着地图移动。即将废弃，请使用 cover-view

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

position

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

bindregionchange 返回值

属性	说明	类型	备注
type	视野变化开始、结束时触发	string	视野变化开始为begin，结束为end
causedBy	导致视野变化的原因	string	拖动地图导致(drag)、缩放导致(scale)、调用接口导致(update)

8 画布组件

canvas

画布。相关api：wx.createCanvasContext。

属性	类型	默认值	必填	说明
canvas-id	string		是	canvas 组件的唯一标识符
disable-scroll	boolean	false	否	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart	eventhandle		否	手指触摸动作开始
bindtouchmove	eventhandle		否	手指触摸后移动
bindtouchend	eventhandle		否	手指触摸动作结束
bindtouchcancel	eventhandle		否	手指触摸动作被打断，如来电提醒，弹窗
bindlongtap	eventhandle		否	手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror	eventhandle		否	当发生错误时触发 error 事件，detail = {errMsg}

参考自：微信小程序开发

收录于

小程序

【微信小程序开发】第 7 课 - 小程序的常用组件 小程序的组件包括视图容器、文本、图片、按钮、输入框、列表、轮播图、导航栏、下拉菜单和弹窗等，用于构建小程序界面和实现交互功能！阅读详情

属性	类型	默认值	必填	说明
url	string		否	推流地址。目前仅支持 `flv`, `rtmp` 格式
mode	string	RTC	否	`SD`（标清）, `HD`（高清）, `FHD`（超清）, `RTC`（实时通话）
autopush	boolean	false	否	自动推流
muted	boolean	false	否	是否静音
enable-camera	boolean	true	否	开启摄像头
auto-focus	boolean	true	否	自动聚集
orientation	string	vertical	否	画面方向
beauty	number	0	否	美颜，取值范围 0-9 ，0 表示关闭
whiteness	number	0	否	美白，取值范围 0-9 ，0 表示关闭
aspect	string	9:16	否	宽高比，可选值有 `3:4`, `9:16`
min-bitrate	number	200	否	最小码率
max-bitrate	number	1000	否	最大码率
waiting-image	string		否	进入后台时推流的等待画面
waiting-image-hash	string		否	等待画面资源的MD5值
zoom	boolean	false	否	调整焦距
device-position	string	front	否	前置或后置，值为`front`, `back`
background-mute	boolean	false	否	进入后台时是否静音
bindstatechange	eventhandle		否	状态变化事件，detail = {code}
bindnetstatus	eventhandle		否	网络状态通知，detail = {info}
binderror	eventhandle		否	渲染错误事件，detail = {errMsg, errCode}
bindbgmstart	eventhandle		否	背景音开始播放时触发
bindbgmprogress	eventhandle		否	背景音进度变化时触发，detail = {progress, duration}
bindbgmcomplete	eventhandle		否	背景音播放完成时触发

小程序组件

目录

1 基础组件

text

rich-text

nodes

icon

progress

2 视图组件

cover-image

cover-view

mavable-area

movable-view

scroll-view

swiper

swiper-item

view

3 表单组件

button

checkbox

checkbox-group

form

input

label

picker

picker-view

radio

radio-group

slider

swith

textarea

5 导航组件

functional-page-navigator

navigator

6 媒体组件

audio

camera

image

live-player

live-pusher

video

7 地图组件

map

8 画布组件

canvas

相关推荐