目录
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天左右 |
教育 | 在线视频课程 | 网课、在线培训、讲座等教育类直播 |
医疗 | 互联网医院,公立医院 | 问诊、大型健康讲座等直播 |
金融 | 银行、信托、基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台(港股/美股)、消费金融 | 金融产品视频客服理赔、金融产品推广直播等 |
汽车 | 汽车预售服务 | 汽车预售、推广直播 |
政府主体帐号 | / | 政府相关工作推广直播、领导讲话直播等 |
工具 | 视频客服 | 不涉及以上几类内容的一对一视频客服服务,如企业售后一对一视频服务等 |
相关api:wx.createLivePusherContext
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
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 | 否 | 背景音播放完成时触发 |
orientation 的合法值
值 | 说明 |
---|---|
vertical | 竖直 |
horizontal | 水平 |
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} |
参考自:微信小程序开发