小程序组件

本文详细介绍了微信小程序的基础组件、视图组件、表单组件、导航组件、媒体组件、地图组件和画布组件,包括各组件的功能、属性和使用场景,如text、button、video、map等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

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

6 媒体组件

audio

camera

image

live-player

live-pusher

video

7 地图组件

map

8 画布组件

canvas


1 基础组件

text

文本。

属性类型默认值必填说明
selectablebooleanfalse文本是否可选
spacestring 显示连续空格
decodebooleanfalse是否解码

space 的合法值

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

rich-text

富文本。

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

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。

属性类型默认值必填说明
typestring icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
sizenumber/string23icon的大小
colorstring icon的颜色,同css的color

progress

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

属性类型默认值必填说明
percentnumber 百分比0~100
show-infobooleanfalse在进度条右侧显示百分比
border-radiusnumber/string0圆角大小
font-sizenumber/string16右侧百分比字体大小
stroke-widthnumber/string6进度条线的宽度
colorstring#09BB07进度条颜色(请使用activeColor)
activeColorstring#09BB07已选择的进度条的颜色
backgroundColorstring#EBEBEB未选择的进度条的颜色
activebooleanfalse进度条从左往右的动画
active-modestringbackwardsbackwards: 动画从头播;forwards:动画从上次结束点接着播
bindactiveendeventhandle 动画完成事件

2 视图组件

cover-image

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

属性类型默认值必填说明
srcstring 图标路径,支持临时路径、网络地址(1.6.0起支持)、云文件ID(2.2.3起支持)。暂不支持base64格式。
bindloadeventhandle 图片加载成功时触发
binderroreventhandle 图片加载失败时触发

cover-view

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

可覆盖的原生组件包括 mapvideocanvascameralive-playerlive-pusher

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

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

mavable-area

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

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

movable-view

可移动的视图容器,在页面中可以拖拽滑动。<movable-view>必须在 <movable-area> 组件中,并且必须是直接子节点,否则不能移动。

属性类型默认值必填说明
directionstringnonemovable-view的移动方向,属性值有all、vertical、horizontal、none
inertiabooleanfalsemovable-view是否带有惯性
out-of-boundsbooleanfalse超过可移动区域后,movable-view是否还可以移动
xnumber 定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画
ynumber 定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画
dampingnumber20阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快
frictionnumber2摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值
disabledbooleanfalse是否禁用
scalebooleanfalse是否支持双指缩放,默认缩放手势生效区域是在movable-view内
scale-minnumber0.5定义缩放倍数最小值
scale-maxnumber10定义缩放倍数最大值
scale-valuenumber1定义缩放倍数,取值范围为 0.5 - 10
animationbooleantrue是否使用动画
bindchangeeventhandle 拖动过程中触发的事件,event.detail = {x, y, source}
bindscaleeventhandle 缩放过程中触发的事件,event.detail = {x, y, scale},x和y字段在2.1.0之后支持
htouchmoveeventhandle 初次手指触摸后移动为横向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch
vtouchmoveeventhandle 初次手指触摸后移动为纵向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch

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

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

scroll-view

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

属性类型默认值必填说明
scroll-xbooleanfalse允许横向滚动
scroll-ybooleanfalse允许纵向滚动
upper-thresholdnumber/string50距顶部/左边多远时,触发 scrolltoupper 事件
lower-thresholdnumber/string50距底部/右边多远时,触发 scrolltolower 事件
scroll-topnumber/string 设置竖向滚动条位置
scroll-leftnumber/string 设置横向滚动条位置
scroll-into-viewstring 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animationbooleanfalse在设置滚动条位置时使用动画过渡
enable-back-to-topbooleanfalseiOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
bindscrolltouppereventhandle 滚动到顶部/左边时触发
bindscrolltolowereventhandle 滚动到底部/右边时触发
bindscrolleventhandle 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

swiper

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

属性类型默认值必填说明
indicator-dotsbooleanfalse是否显示面板指示点
indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorcolor#000000当前选中的指示点颜色
autoplaybooleanfalse是否自动切换
currentnumber0当前所在滑块的 index
intervalnumber5000自动切换时间间隔
durationnumber500滑动动画时长
circularbooleanfalse是否采用衔接滑动
verticalbooleanfalse滑动方向是否为纵向
previous-marginstring"0px"前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值
next-marginstring"0px"后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值
display-multiple-itemsnumber1同时显示的滑块数量
skip-hidden-item-layoutbooleanfalse是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息
easing-functionstring"default"指定 swiper 切换缓动动画类型
bindchangeeventhandle current 改变时会触发 change 事件,event.detail = {current, source}
bindtransitioneventhandle swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}
bindanimationfinisheventhandle 动画结束时会触发 animationfinish 事件,event.detail 同上

easing-function 的合法值

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

swiper-item

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

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

view

视图容器

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

3 表单组件

button

按钮。

属性类型默认值必填说明
sizestringdefault按钮的大小
typestringdefault按钮的样式类型
plainbooleanfalse按钮是否镂空,背景色透明
disabledbooleanfalse是否禁用
loadingbooleanfalse名称前是否带 loading 图标
form-typestring 用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件
open-typestring 微信开放能力
hover-classstringbutton-hover指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态
hover-start-timenumber20按住后多久出现点击态,单位毫秒
hover-stay-timenumber70手指松开后点击态保留时间,单位毫秒
langstringen指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。
session-fromstring 会话来源,open-type="contact"时有效
send-message-titlestring当前标题会话内消息卡片标题,open-type="contact"时有效
send-message-pathstring当前分享路径会话内消息卡片点击跳转小程序路径,open-type="contact"时有效
send-message-imgstring截图会话内消息卡片图片,open-type="contact"时有效
app-parameterstring 打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效
show-message-cardbooleanfalse是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效
bindgetuserinfoeventhandle 用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,open-type="getUserInfo"时有效
bindcontacteventhandle 客服消息回调,open-type="contact"时有效
bindgetphonenumbereventhandle 获取用户手机号回调,open-type=getPhoneNumber时有效
binderroreventhandle 当使用开放能力时,发生错误的回调,open-type=launchApp时有效
bindopensettingeventhandle 在打开授权设置页后回调,open-type=openSetting时有效
bindlaunchappeventhandle 打开 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

多选项目。

属性类型默认值必填说明
valuestring <checkbox>标识,选中时触发<checkbox-group>的 change 事件,并携带 <checkbox> 的 value
disabledbooleanfalse是否禁用
checkedbooleanfalse当前是否选中,可用来设置默认选中
colorstring#09BB07checkbox的颜色,同css的color

checkbox-group

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

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

form

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

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

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

input

输入框。

属性类型默认值必填说明
valuestring 输入框的初始内容
typestringtextinput 的类型
passwordbooleanfalse是否是密码类型
placeholderstring 输入框为空时占位符
placeholder-stylestring 指定 placeholder 的样式
placeholder-classstringinput-placeholder指定 placeholder 的样式类
disabledbooleanfalse是否禁用
maxlengthnumber140最大输入长度,设置为 -1 的时候不限制最大长度
cursor-spacingnumber0指定光标与键盘的距离,取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
auto-focusbooleanfalse(即将废弃,请直接使用 focus )自动聚焦,拉起键盘
focusbooleanfalse获取焦点
confirm-typestringdone设置键盘右下角按钮的文字,仅在type='text'时生效
confirm-holdbooleanfalse点击键盘右下角按钮时是否保持键盘不收起
cursornumber 指定focus时的光标位置
selection-startnumber-1光标起始位置,自动聚集时有效,需与selection-end搭配使用
selection-endnumber-1光标结束位置,自动聚集时有效,需与selection-start搭配使用
adjust-positionbooleantrue键盘弹起时,是否自动上推页面
bindinputeventhandle 键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容。
bindfocuseventhandle 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持
bindblureventhandle 输入框失去焦点时触发,event.detail = {value: value}
bindconfirmeventhandle 点击完成按钮时触发,event.detail = {value: value}

type 的合法值

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

confirm-type 的合法值

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

label

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

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

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

picker

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

属性类型默认值必填说明
modestringselector选择器类型
disabledbooleanfalse是否禁用
bindcanceleventhandle 取消选择时触发

mode 的合法值

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

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

普通选择器:mode = selector

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

时间选择器:mode = time

属性名类型默认值说明
valuestring 表示选中的时间,格式为"hh:mm"
startstring 表示有效时间范围的开始,字符串格式为"hh:mm"
endstring 表示有效时间范围的结束,字符串格式为"hh:mm"
bindchangeeventhandle value 改变时触发 change 事件,event.detail = {value}

日期选择器:mode = date

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

fields 有效值:*

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

省市区选择器:mode = region 1.4.0

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

picker-view

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

属性类型默认值必填说明
valueArray.<number> 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。
indicator-stylestring 设置选择器中间选中框的样式
indicator-classstring 设置选择器中间选中框的类名
mask-stylestring 设置蒙层的样式
mask-classstring 设置蒙层的类名
bindchangeeventhandle 滚动选择时触发change事件,event.detail = {value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)
bindpickstarteventhandle 当滚动选择开始时候触发事件
bindpickendeventhandle 当滚动选择结束时候触发事件

radio

单选项目。

属性类型默认值必填说明
valuestring <radio> 标识。当该<radio> 选中时,<radio-group> 的 change 事件会携带<radio>的value
checkedbooleanfalse当前是否选中
disabledbooleanfalse是否禁用
colorstring#09BB07radio的颜色,同css的color

radio-group

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

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

slider

滑动选择器。

属性类型默认值必填说明
minnumber0最小值
maxnumber100最大值
stepnumber1步长,取值必须大于 0,并且可被(max - min)整除
disabledbooleanfalse是否禁用
valuenumber0当前取值
colorcolor#e9e9e9背景条的颜色(请使用 backgroundColor)
selected-colorcolor#1aad19已选择的颜色(请使用 activeColor)
activeColorcolor#1aad19已选择的颜色
backgroundColorcolor#e9e9e9背景条的颜色
block-sizenumber28滑块的大小,取值范围为 12 - 28
block-colorcolor#ffffff滑块的颜色
show-valuebooleanfalse是否显示当前 value
bindchangeeventhandle 完成一次拖动后触发的事件,event.detail = {value}
bindchangingeventhandle 拖动过程中触发的事件,event.detail = {value}

swith

开关选择器。

属性类型默认值必填说明
checkedbooleanfalse是否选中
disabledbooleanfalse是否禁用
typestringswitch样式,有效值:switch, checkbox
colostring#04BE02switch 的颜色,同 css 的 color
bindchangeeventhandle checked 改变时触发 change 事件,event.detail={ value}

textarea

多行输入框。

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

5 导航组件

functional-page-navigator

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

属性类型默认值必填说明
versionstringrelease跳转到的小程序版本,线上版本必须设置为 release
namestring 要跳转到的功能页
argsobject 功能页参数,参数格式与具体功能页相关
bindsuccesseventhandler 功能页返回,且操作成功时触发, detail 格式与具体功能页相关
bindfaileventhandler 功能页返回,且操作失败时触发, detail 格式与具体功能页相关

version 的合法值

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

name 的合法值

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

页面链接。

属性类型默认值必填说明
targetstringself在哪个目标上发生跳转,默认当前小程序
urlstring 当前小程序内的跳转链接
open-typestringnavigate跳转方式
deltanumber1当 open-type 为 'navigateBack' 时有效,表示回退的层数
app-idstring target="miniProgram"时有效,要打开的小程序 appId
pathstring target="miniProgram"时有效,打开的页面路径,如果为空则打开首页
extra-dataobject target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch()App.onShow() 中获取到这份数据。
versionstringreleasetarget="miniProgram"时有效,要打开的小程序版本
hover-classstringnavigator-hover指定点击时的样式类,当hover-class="none"时,没有点击态效果
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态
hover-start-timenumber50按住后多久出现点击态,单位毫秒
hover-stay-timenumber600手指松开后点击态保留时间,单位毫秒
bindsuccessstring target="miniProgram"时有效,跳转小程序成功
bindfailstring target="miniProgram"时有效,跳转小程序失败
bindcompletestring 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

音频。

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

MediaError.code

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

camera

系统相机

属性类型默认值必填说明
modestringnormal应用模式
device-positionstringback摄像头朝向
flashstringauto闪光灯,值为auto, on, off
bindstopeventhandle 摄像头在非正常终止时触发,如退出后台等情况
binderroreventhandle 用户不允许使用摄像头时触发
bindscancodeeventhandle 在扫码识别成功时触发,仅在 mode="scanCode" 时生效

mode 的合法值

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

device-position 的合法值

说明
front前置
back后置

flash 的合法值

说明
auto自动
on打开
off关闭

image

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

属性类型默认值必填说明
srcstring 图片资源地址
modestringscaleToFill图片裁剪、缩放的模式
lazy-loadbooleanfalse图片懒加载,在即将进入一定范围(上下三屏)时才开始加载
binderroreventhandle 当错误发生时触发,,event.detail = {errMsg}
bindloadeventhandle 当图片载入完毕时触发,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 天左右
教育在线视频课程网课、在线培训、讲座等教育类直播
医疗互联网医院,公立医院问诊、大型健康讲座等直播
金融银行、信托、基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台(港股/美股)、消费金融金融产品视频客服理赔、金融产品推广直播等
汽车汽车预售服务汽车预售、推广直播
政府主体帐号/政府相关工作推广直播、领导讲话直播等
工具视频客服不涉及以上几类内容的一对一视频客服服务,如企业售后一对一视频服务等
属性类型默认值必填说明
srcstring 音视频地址。目前仅支持 flvrtmp 格式
modestringlive模式
autoplaybooleanfalse自动播放
mutedbooleanfalse是否静音
orientationstringvertical画面方向
object-fitstringcontain填充模式,可选值有 containfillCrop
background-mutebooleanfalse进入后台时是否静音(已废弃,默认退台静音)
min-cachenumber1最小缓冲区,单位s(RTC 模式推荐 0.2s)
max-cachenumber3最大缓冲区,单位s(RTC 模式推荐 0.8s)
sound-modestringspeaker声音输出方式
auto-pause-if-navigatebooleantrue当跳转到其它小程序页面时,是否自动暂停本页面的实时音视频播放
auto-pause-if-open-nativebooleantrue当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放
bindstatechangeeventhandle 播放状态变化事件,detail = {code}
bindfullscreenchangeeventhandle 全屏变化事件,detail = {direction, fullScreen}
bindnetstatuseventhandle 网络状态通知,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自动切软解
3001RTMP -DNS解析失败
3002RTMP服务器连接失败
3003RTMP服务器握手失败
3005RTMP 读/写失败

网络状态数据

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

live-pusher

实时音视频录制。

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

相关api:wx.createLivePusherContext

属性类型默认值必填说明
urlstring 推流地址。目前仅支持 flvrtmp 格式
modestringRTCSD(标清), HD(高清), FHD(超清), RTC(实时通话)
autopushbooleanfalse自动推流
mutedbooleanfalse是否静音
enable-camerabooleantrue开启摄像头
auto-focusbooleantrue自动聚集
orientationstringvertical画面方向
beautynumber0美颜,取值范围 0-9 ,0 表示关闭
whitenessnumber0美白,取值范围 0-9 ,0 表示关闭
aspectstring9:16宽高比,可选值有 3:49:16
min-bitratenumber200最小码率
max-bitratenumber1000最大码率
waiting-imagestring 进入后台时推流的等待画面
waiting-image-hashstring 等待画面资源的MD5值
zoombooleanfalse调整焦距
device-positionstringfront前置或后置,值为frontback
background-mutebooleanfalse进入后台时是否静音
bindstatechangeeventhandle 状态变化事件,detail = {code}
bindnetstatuseventhandle 网络状态通知,detail = {info}
binderroreventhandle 渲染错误事件,detail = {errMsg, errCode}
bindbgmstarteventhandle 背景音开始播放时触发
bindbgmprogresseventhandle 背景音进度变化时触发,detail = {progress, duration}
bindbgmcompleteeventhandle 背景音播放完成时触发

orientation 的合法值

说明
vertical竖直
horizontal水平

video

视频。

属性类型默认值必填说明
srcstring 要播放视频的资源地址,支持云文件ID(2.3.0
durationnumber 指定视频时长
controlsbooleantrue是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
danmu-listArray.<object> 弹幕列表
danmu-btnbooleanfalse是否显示弹幕按钮,只在初始化时有效,不能动态变更
enable-danmubooleanfalse是否展示弹幕,只在初始化时有效,不能动态变更
autoplaybooleanfalse是否自动播放
loopbooleanfalse是否循环播放
mutedbooleanfalse是否静音播放
initial-timenumber0指定视频初始播放位置
page-gesturebooleanfalse在非全屏模式下,是否开启亮度与音量调节手势(废弃,见 vslide-gesture)
directionnumber 设置全屏时视频的方向,不指定则根据宽高比自动判断
show-progressbooleantrue若不设置,宽度大于240时才会显示
show-fullscreen-btnbooleantrue是否显示全屏按钮
show-play-btnbooleantrue是否显示视频底部控制栏的播放按钮
show-center-play-btnbooleantrue是否显示视频中间的播放按钮
enable-progress-gesturebooleantrue是否开启控制进度的手势
object-fitstringcontain当视频大小与 video 容器大小不一致时,视频的表现形式
posterstring 视频封面的图片网络资源地址或云文件ID(2.3.0)。若 controls 属性值为 false 则设置 poster 无效
show-mute-btnbooleanfalse是否显示静音按钮
titlestring 视频的标题,全屏时在顶部展示
play-btn-positionstringbottom播放按钮的位置
enable-play-gesturebooleanfalse是否开启播放手势,即双击切换播放/暂停
auto-pause-if-navigatebooleantrue当跳转到其它小程序页面时,是否自动暂停本页面的视频
auto-pause-if-open-nativebooleantrue当跳转到其它微信原生页面时,是否自动暂停本页面的视频
vslide-gesturebooleanfalse在非全屏模式下,是否开启亮度与音量调节手势(同 page-gesture)
vslide-gesture-in-fullscreenbooleantrue在全屏模式下,是否开启亮度与音量调节手势
bindplayeventhandle 当开始/继续播放时触发play事件
bindpauseeventhandle 当暂停播放时触发 pause 事件
bindendedeventhandle 当播放到末尾时触发 ended 事件
bindtimeupdateeventhandle 播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次
bindfullscreenchangeeventhandle 视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction 有效值为 vertical 或 horizontal
bindwaitingeventhandle 视频出现缓冲时触发
binderroreventhandle 视频播放出错时触发
bindprogresseventhandle 加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比

direction 的合法值

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

object-fit 的合法值

说明
contain包含
fill填充
cover覆盖

play-btn-position 的合法值

说明
bottomcontrols bar上
center视频中间

7 地图组件

map

地图。

属性类型默认值必填说明
longitudenumber 中心经度
latitudenumber 中心纬度
scalenumber16缩放级别,取值范围为5-18
markersArray.<marker> 标记点
coversArray.<cover> 即将移除,请使用 markers
polylineArray.<polyline> 路线
circlesArray.<circle> 
controlsArray.<control> 控件(即将废弃,建议使用 cover-view 代替)
include-pointsArray.<point> 缩放视野以包含所有给定的坐标点
show-locationbooleanfalse显示带有方向的当前定位点
polygonsArray.<polygon> 多边形
subkeystring 个性化地图使用的key,仅初始化地图时有效
enable-3Dbooleanfalse展示3D楼块(工具暂不支持)
show-compassbooleanfalse显示指南针
enable-overlookingbooleanfalse开启俯视
enable-zoombooleantrue是否支持缩放
enable-scrollbooleantrue是否支持拖动
enable-rotatebooleanfalse是否支持旋转
bindtapeventhandle 点击地图时触发
bindmarkertapeventhandle 点击标记点时触发,会返回marker的id
bindcontroltapeventhandle 点击控件时触发,会返回control的id
bindcallouttapeventhandle 点击标记点对应的气泡时触发,会返回marker的id
bindupdatedeventhandle 在地图渲染更新完成时触发
bindregionchangeeventhandle 视野发生变化时触发
bindpoitapeventhandle 点击地图poi点时触发

marker

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

属性说明类型必填备注
id标记点 idnumbermarker 点击事件回调会返回此 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, centerstring

marker 上的气泡 label

属性说明类型
content文本string
color文本颜色string
fontSize文字大小number
xlabel的坐标(废弃)number
ylabel的坐标(废弃)number
anchorXlabel的坐标,原点是 marker 对应的经纬度number
anchorYlabel的坐标,原点是 marker 对应的经纬度number
borderWidth边框宽度number
borderColor边框颜色string
borderRadius边框圆角number
bgColor背景色string
padding文本边缘留白number
textAlign文本对齐方式。有效值: left, right, centerstring

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控件idnumber在控件点击事件回调会返回此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-idstring canvas 组件的唯一标识符
disable-scrollbooleanfalse当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
bindtouchstarteventhandle 手指触摸动作开始
bindtouchmoveeventhandle 手指触摸后移动
bindtouchendeventhandle 手指触摸动作结束
bindtouchcanceleventhandle 手指触摸动作被打断,如来电提醒,弹窗
bindlongtapeventhandle 手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动
binderroreventhandle 当发生错误时触发 error 事件,detail = {errMsg}

 

参考自:微信小程序开发 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值