【微信小程序】WXML-组件

---

前言

学习微信小程序的组件，参考官方DOC。
需要啥组件直接去官方DOC拿code就完事=）

---

一、常见组件

view

相当于HTML里的<div></div>

属性说明

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

注：
如果需要使用滚动视图，请使用 scroll-view

text

相当于HTML里的<span></span>

通用属性

属性	类型	默认值	必填	说明	最低版本
selectable	boolean	false	否	文本是否可选 (已废弃)	1.1.0
user-select	boolean	false	否	文本是否可选，该属性会使文本节点显示为 inline-block	2.12.1

Skyline 特有属性

属性	类型	默认值	必填	说明
overflow	string	visible	是	文本溢出处理
max-lines	number		是	限制文本最大行数

• overflow合法值及说明

合法值	说明
clip	修剪文本
fade	淡出
ellipsis	显示省略号
visible	文本不截断

WebView 特有属性

属性	类型	默认值	必填	说明	最低版本
space	string		否	显示连续空格	1.4.0
decode	boolean	false	否	是否解码	1.4.0

• WebView合法值及说明

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

注：

1. tip: decode可以解析的有   < > & '    
2. tip: 各个操作系统的空格标准并不一致。
3. tip:text 组件内只支持 text 嵌套。
4. tip: 除了文本节点以外的其他节点都无法长按选中。
5. bug: 基础库版本低于 2.1.0 时， text 组件内嵌的 text style 设置可能不会生效。

swiper

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

• 使用 worklet 函数需要开启开发者工具 “将 JS 编译成 ES5” 或 “编译 worklet 函数” 选项。

通用属性

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前所在滑块的 index	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
duration	number	500	否	滑动动画时长	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0
vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
display-multiple-items	number	1	否	同时显示的滑块数量	1.9.0
previous-margin	string	“0px”	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
next-margin	string	“0px”	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值。skyline 于 3.5.1 版本支持	1.9.0
easing-function	string	“default”	否	指定 swiper 切换缓动动画类型	2.6.5
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}	1.0.0
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}。Skyline 仅支持非 worklet 的组件方法作为回调。	2.4.3
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同 bindchange。Skyline 仅支持非 worklet 的组件方法作为回调。	1.9.0

• easing-function合法值及说明

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

Skyline 特有属性

属性	类型	默认值	必填	说明	最低版本
layout-type	string	normal	否	渲染模式	3.2.0
transformer-type	string	scaleAndFade	否	layout-type 为 transformer 时指定动画类型	3.2.0
indicator-type	string	normal	否	指示点动画类型	3.2.0
indicator-margin	number	10	否	指示点四周边距	3.2.0
indicator-spacing	number	4	否	指示点间距	3.2.0
indicator-radius	number	4	否	指示点圆角大小	3.2.0
indicator-width	number	8	否	指示点宽度	3.2.0
indicator-height	number	8	否	指示点高度	3.2.0
indicator-alignment	Array./string	auto	否	指示点的相对位置	3.2.0
indicator-offset	Array.	[0, 0]	否	指示点位置的偏移量	3.2.0
scroll-with-animation	boolean	true	否	改变 current 时使用动画过渡	2.29.0
cache-extent	number	0	否	缓存区域大小，值为 1 表示提前渲染上下各一屏区域（swiper 容器大小）	2.29.0
worklet:onscrollstart	worklet		否	滑动开始时触发，仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy}
worklet:onscrollupdate	worklet		否	滑动位置更新时触发，仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy}
worklet:onscrollend	worklet		否	滑动结束时触发，仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy}

• layout-type合法值及说明

合法值	说明
normal	默认方式
stackLeft	左向堆叠
stackRight	右向堆叠
tinder	滑动卡片
transformer	过渡动画

• transformer-type合法值及说明

合法值	说明
scaleAndFade
accordion
threeD
zoomIn
zoomOut
deepthPage

• indicator-type合法值及说明

合法值	说明
normal
worm
wormThin
wormUnderground
wormThinUnderground
expand
jump
jumpWithOffset
scroll
scrollFixedCenter
slide
slideUnderground
scale
swap
swapYRotation
color

WebView 特有属性

属性	类型	默认值	必填	说明	最低版本
snap-to-edge	boolean	false	否	当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素	2.12.1

注：

1. layout-type 为 stackLeft stackRight 和 tinder 时仅支持 indicator-type=normal
2. indicator-type 为 scrollFixedCenter swap swapYRotation 无法在循环模式 circular 下使用
3. indicator-alignment 可指定为关键词 auto 或 长度为 2 的数组。
   • 横向滑动时 auto 相当于 bottomCenter [0, 1]
   • 纵向滑动时，auto 相当于 centerRight [1, 0]
   • 传入数组时，表示 x/y 轴的相对位置，取值范围 [-1, 1]，底边中点为 [0, 1]
4. indicator-offset 是长度为 2 的数组，表示指示点在 x/y 轴上的偏移量，单位 px。
5. skyline 的 previous-margin、 display-multiple-items 和 vertical 属性与 webview 表现略有不同，当skyline 使用 next-margin 属性且其值大于 0 时，会将前述三个属性对齐 webview 实现。

progress

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

通用属性

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

button

按钮

通用属性

属性	类型	默认值	必填	说明	最低版本
size	string	default	否	按钮的大小	1.0.0
type	string	default	否	按钮的样式类型	1.0.0
plain	boolean	false	否	按钮是否镂空，背景色透明	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
loading	boolean	false	否	名称前是否带 loading 图标	1.0.0
form-type	string		否	用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件	1.0.0
open-type	string		否	微信开放能力	1.1.0
hover-class	string	button-hover	否	指定按钮按下去的样式类。当 hover-class=“none” 时，没有点击态效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	number	20	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	70	否	手指松开后点击态保留时间，单位毫秒	1.0.0
lang	string	en	否	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文	1.3.0
session-from	string		否	会话来源，open-type="contact"时有效	1.4.0
send-message-title	string	当前标题	否	会话内消息卡片标题，open-type="contact"时有效	1.5.0
send-message-path	string	当前分享路径	否	会话内消息卡片点击跳转小程序路径，open-type="contact"时有效	1.5.0
send-message-img	string	截图	否	会话内消息卡片图片，open-type="contact"时有效	1.5.0
app-parameter	string		否	打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效	1.9.5
show-message-card	boolean	false	否	是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效	1.5.0
phone-number-no-quota-toast	boolean	true	否	当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type=“getPhoneNumber” 或 open-type=“getRealtimePhoneNumber” 时有效	3.0.1
bindgetuserinfo	eventhandle		否	用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效	1.3.0
bindcontact	eventhandle		否	客服消息回调，open-type="contact"时有效	1.5.0
createliveactivity	eventhandle		否	新的一次性订阅消息下发机制回调，open-type=liveActivity时有效	2.26.2
bindgetphonenumber	eventhandle		否	手机号快速验证回调，open-type=getPhoneNumber时有效。Tips：在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用	1.2.0
bindgetrealtimephonenumber	eventhandle		否	手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用	2.24.4
binderror	eventhandle		否	当使用开放能力时，发生错误的回调，open-type=launchApp时有效	1.9.5
bindopensetting	eventhandle		否	在打开授权设置页后回调，open-type=openSetting时有效	2.0.7
bindlaunchapp	eventhandle		否	打开 APP 成功的回调，open-type=launchApp时有效	2.4.4
bindchooseavatar	eventhandle		否	获取用户头像回调，open-type=chooseAvatar时有效	2.21.2
bindagreeprivacyauthorization	eventhandle		否	用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 （Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: “agree”, buttonId })）	2.32.3

注：

1. tip: button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
2. tip: bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。
3. tip: 在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
4. tip: 从 2.21.2 起，对getPhoneNumber接口进行了安全升级，bindgetphonenumber 返回的信息中增加code参数，code是一个动态的令牌，开发者拿到code后需调用微信后台接口换取手机号。详情新版接口使用指南
5. tip: 从 2.1.0 起，button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力。
6. tip: 目前设置了 form-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 form 在自定义组件外，将会使这个 button 的 form-type 失效。

二、不常用组件【看官方DOC】

---