微信小程序組件說明表

這裏搜集整理了微信小程序開發中各種常用組件的概念、功能、相關屬性及使用方法,方便需要的朋友進行快速查詢。提供給需要的朋友查詢使用。

爲了方便大家理解與查詢微信小程序組件,這裏整理了微信小程序的常用組件分類與功能描述。內容整理自官網。內容不斷整理補充中。。。

官網原鏈接https://mp.weixin.qq.com/debug/wxadoc/dev/component/

基礎組件

框架为开发者提供了一系列基礎組件,开发者可以通过组合这些基礎組件进行快速开发。

什麽是組件:

  • 組件是視圖層的基本組成單元。
  • 組件自帶一些功能與微信風格的樣式。
  • 一個組件通常包括開始標簽和結束標簽,屬性用來修飾這個組件,內容在兩個標簽之內。
<tagname property="value">
  Content goes here ...
</tagename>

屬性類型

類型 描述 注解
Boolean 布爾值 组件写上该屬性,不管该屬性等于什么,其值都为true,只有组件上没有写该屬性时,屬性值才为false。如果屬性值为变量,变量的值会被转换为Boolean類型
Number 數字 1, 2.5
String 字符串 “string”
Array 數組 [ 1, “string” ]
Object 對象 { key: value }
EventHandler 事件處理函數名 “handlerName” 是 Page中定义的事件處理函數名
Any 任意屬性
共同屬性類型
屬性 類型 描述 注解
id String 組件的唯一標示 保持整個頁面唯一
class String 組件的樣式類 在对应的 WXSS 中定义的样式类
style String 組件的內聯樣式 可以動態設置的內聯樣式
hidden String 組件是否顯示 所有組件默認顯示
data-* Any 自定义屬性 組件上觸發的事件時,會發送給事件處理函數
bind* / catch* EventHandler 組件的事件

基本組件列表

基礎組件分为以下几类:

視圖容器(View Container):

組件名 注釋 组件屬性
屬性名 類型 默認值 說明 最低版本
view 視圖容器 hover-class String none 指定按下去的樣式類。當?hover-class="none"?時,沒有點擊態效果  
hover-stop-propagation Boolean false 指定是否阻止本節點的祖先節點出現點擊態 1.5.0
hover-start-time Number 50 按住後多久出現點擊態,單位毫秒  
hover-stay-time Number 400 手指松開後點擊態保留時間,單位毫秒  
scroll-view 可滚动視圖容器 scroll-x Boolean false 允許橫向滾動  
scroll-y Boolean false 允許縱向滾動  
upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件  
lower-threshold Number 50 距底部/右边多远时(单位px),触发 scrolltolower 事件  
scroll-top Number   設置豎向滾動條位置  
scroll-left Number   設置橫向滾動條位置  
scroll-into-view String   值应为某子元素id(id不能以數字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素  
scroll-with-animation Boolean false 在設置滾動條位置時使用動畫過渡  
enable-back-to-top Boolean false iOS點擊頂部狀態欄、安卓雙擊標題欄時,滾動條返回頂部,只支持豎向  
bindscrolltoupper EventHandle   滚动到顶部/左边,会触发 scrolltoupper 事件  
bindscrolltolower EventHandle   滚动到底部/右边,会触发 scrolltolower 事件  
bindscroll EventHandle   滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}  
swiper 滑块視圖容器 indicator-dots Boolean false 是否顯示面板指示點  
indicator-color Color rgba(0, 0, 0, .3) 指示點顔色 1.1.0
indicator-active-color Color #000000 当前选中的指示點顔色 1.1.0
autoplay Boolean false 是否自動切換  
current Number 0 当前所在页面的 index  
interval Number 5000 自動切換時間間隔  
duration Number 500 滑動動畫時長  
circular Boolean false 是否采用銜接滑動  
vertical Boolean false 滑動方向是否爲縱向  
bindchange EventHandle   current 改变时会触发 change 事件,event.detail = {current: current, source: source}  

基础内容(Basic Content):

組件名 注釋 组件屬性
屬性名 類型 默認值 說明 最低版本
icon 圖標 type String   icon的類型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear  
size Number 23 icon的大小,單位px  
color Color   icon的顔色,同css的color  
text 文字 selectable Boolean false 文本是否可選 1.1.0
space String false 顯示連續空格
有效值 ensp:中文字符空格一半大小 emsp:中文字符空格大小 nbsp:根据字体设置的空格大小
1.4.0
decode Boolean false 是否解碼 1.4.0
progress 進度條 percent Float 百分比0~100  
show-info Boolean false 在進度條右侧显示百分比  
stroke-width Number 6 進度條线的宽度,单位px  
color Color #09BB07 進度條颜色 (请使用 activeColor)  
activeColor Color   已选择的進度條的颜色  
backgroundColor Color   未选择的進度條的颜色  
active Boolean false 進度條从左往右的动画  
active-mode String backwards backwards: 动画从头播;forwards:动画从上次结束点接着播 1.7.0

表單(Form):

組件名 注釋 组件屬性
屬性名 類型 默認值 說明 生效時機 最低版本
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   微信開放能力   1.1.0
hover-class String button-hover 指定按鈕按下去的样式类。当?hover-class="none"?时,没有点击态效果    
hover-stop-propagation Boolean false 指定是否阻止本節點的祖先節點出現點擊態   1.5.0
hover-start-time Number 20 按住後多久出現點擊態,單位毫秒    
hover-stay-time Number 70 手指松開後點擊態保留時間,單位毫秒    
bindgetuserinfo Handler   用户点击该按鈕时,会返回获取到的用户信息,从返回参数的detail中获取到的值同wx.getUserInfo open-type="getUserInfo' 1.3.0
lang String en 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。 open-type="getUserInfo" 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
show-message-card Boolean false 顯示會話內消息卡片 open-type="contact" 1.5.0
bindcontact Handler   客服消息回調 open-type="contact" 1.5.0
bindgetphonenumber Handler   獲取用戶手機號回調 open-type="getphonenumber" 1.2.0
form 表單 report-submit Boolean   是否返回 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 指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离  
auto-focus Boolean false (即将废弃,请直接使用 focus )自动聚焦,拉起键盘  
focus Boolean false 獲取焦點  
confirm-type String "done" 设置键盘右下角按鈕的文字 1.1.0
confirm-hold Boolean false 点击键盘右下角按鈕时是否保持键盘不收起 1.1.0
cursor Number   指定focus時的光標位置 1.5.0
bindinput EventHandle   当键盘输入时,触发input事件,event.detail = {value, cursor},处理函数可以直接 return 一个字符串,将替换輸入框的内容。  
bindfocus EventHandle   輸入框聚焦时触发,event.detail = {value: value}  
bindblur EventHandle   輸入框失去焦点时触发,event.detail = {value: value}  
bindconfirm EventHandle   点击完成按鈕时触发,event.detail = {value: value}  
checkbox 多項選擇器 value String   <checkbox/>标识,选中时触发<checkbox-group/>的 change 事件,并携带?<checkbox/>?的 value  
disabled Boolean false 是否禁用  
checked Boolean false 當前是否選中,可用來設置默認選中  
color Color   checkbox的顔色,同css的color  
radio 單項選擇器 value String   <radio/>?标识。当该<radio/>?选中时,<radio-group/>?的 change 事件会携带<radio/>的value  
disabled Boolean false 是否禁用  
checked Boolean false 當前是否選中,可用來設置默認選中  
color Color   radio的顔色,同css的color  
picker
(mode = selector)
(普通)列表選擇器 range Array / Object Array [] mode为 selector 或 multiSelector 时,range 有效  
range-key String   当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容  
value Number 0 value 的值表示选择了 range 中的第几个(下标从 0 开始)  
bindchange EventHandle   value 改变时触发 change 事件,event.detail = {value: value}  
disabled Boolean false 是否禁用  
picker
(mode = multiSelector)
(多列)列表選擇器 range 二维Array / 二维Object Array [] mode为 selector 或 multiSelector 时,range 有效。二维數組,长度表示多少列,數組的每项表示每列的数据,如[["a","b"], ["c","d"]]  
range-key String   当 range 是一个 二维Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容  
value Array 0 value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始)  
bindchange EventHandle   value 改变时触发 change 事件,event.detail = {value: value}  
bindcolumnchange EventHandle   某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标  
disabled Boolean false 是否禁用  
picker
(mode = time)
(時間)列表選擇器 value String   表示選中的時間,格式爲"hh:mm"  
start String   表示有效時間範圍的開始,字符串格式爲"hh:mm"  
end String   表示有效時間範圍的結束,字符串格式爲"hh:mm"  
bindchange EventHandle   value 改变时触发 change 事件,event.detail = {value: value}  
disabled Boolean false 是否禁用  
picker
(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: value}  
disabled Boolean false 是否禁用  
picker
(mode = region)
(日期)列表選擇器 value Array [] 表示選中的省市區,默認選中每一列的第一個值  
custom-item String   可爲每一列的頂部添加一個自定義的項 1.5.0
bindchange EventHandle   value 改变时触发 change 事件,event.detail = {value: value}  
disabled Boolean false 是否禁用  
picker-view 內嵌列表選擇器 value NumberArray   數組中的數字依次表示 picker-view 内的 picker-view-colume 选择的第几项(下标从 0 开始),數字大于 picker-view-column 可选项长度时,选择最后一项。  
indicator-style String   設置選擇器中間選中框的樣式  
indicator-class String   設置選擇器中間選中框的類名 1.1.0
mask-style String   設置蒙層的樣式 1.5.0
mask-class String   設置蒙層的類名 1.5.0
bindchange EventHandle   当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为數組,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)  
slider 滾動選擇器 min Number 0 最小值  
max Number 100 最大值  
step Number 0 步长,取值必须大于 0,并且可被(max - min)整除  
disabled Boolean false 是否禁用  
value Number 0 當前取值  
color Color #e9e9e9 背景條的顔色(请使用 backgroundColor)  
selected-color Color #1aad19 已選擇的顔色(请使用 activeColor)  
activeColor Color #1aad19 已選擇的顔色  
backgroundColor Color #e9e9e9 背景條的顔色  
show-value Boolean false 是否显示当前 value  
bindchange EventHandle   完成一次拖动后触发的事件,event.detail = {value: value}  
bindchanging EventHandle   拖动过程中触发的事件,event.detail = {value: value} 1.7.0
switch 開關選擇器 checked Boolean false 是否選中  
type String switch 样式,有效值:switch, checkbox  
bindchange EventHandle   checked 改变时触发 change 事件,event.detail={ value:checked}  
color Color   switch 的颜色,同 css 的 color  
label 標簽 for String   绑定控件的 id  

導航(Navigation):

組件名 注釋 组件屬性
屬性名 類型 默認值 說明 最低版本
navigator 應用鏈接 url String   應用內的跳轉鏈接  
open-type String navigate 跳轉方式  
delta Number   当 open-type 为 'navigateBack' 时有效,表示回退的层数  
hover-class String navigator-hover 指定點擊時的樣式類,當hover-class="none"時,沒有點擊態效果  
hover-stop-propagation Boolean false 指定是否阻止本節點的祖先節點出現點擊態 1.5.0
hover-start-time Number 50 按住後多久出現點擊態,單位毫秒  
hover-stay-time Number 600 手指松開後點擊態保留時間,單位毫秒  
其中open-type 的有效值如下:
說明最低版本
navigate对应 wx.navigateTo 的功能 
redirect对应 wx.redirectTo 的功能 
switchTab对应 wx.switchTab 的功能 
reLaunch对应 wx.reLaunch 的功能1.1.0
navigateBack对应 wx.navigateBack 的功能1.1.0

多媒體(Media):

組件名 注釋 组件屬性
屬性名 類型 默認值 說明 最低版本
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 事件  
image 圖片 src String   圖片资源地址  
mode String 'scaleToFill' 圖片裁剪、缩放的模式  
lazy-load Boolean false 圖片懒加载。只针对page与scroll-view下的image有效 1.5.0
binderror HandleEvent   当错误发生时,发布到 AppService 的事件名,事件對象event.detail = {errMsg: 'something wrong'}  
bindload HandleEvent   当圖片载入完毕时,发布到 AppService 的事件名,事件對象event.detail = {height:'圖片高度px', width:'圖片宽度px'}  
video 視頻 src String   要播放視頻的资源地址  
initial-time Number   指定視頻初始播放位置 1.6.0
duration Number   指定視頻时长 1.1.0
controls Boolean true 是否显示默认播放控件(播放/暂停按鈕、播放进度、时间)  
danmu-list Object Array   彈幕列表  
danmu-btn Boolean false 是否显示弹幕按鈕,只在初始化时有效,不能动态变更  
enable-danmu Boolean false 是否展示彈幕,只在初始化時有效,不能動態變更  
autoplay Boolean false 是否自動播放  
loop Boolean false 是否循環播放 1.4.0
muted Boolean false 是否靜音播放 1.4.0
page-gesture Boolean false 在非全屏模式下,是否開啓亮度與音量調節手勢 1.6.0
direction Number   设置全屏时視頻的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度) 1.7.0
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 1.4.0
objectFit String contain 当視頻大小与 video 容器大小不一致时,視頻的表现形式。contain:包含,fill:填充,cover:覆盖  
poster String   視頻封面的圖片网络资源地址,如果 controls 屬性值为 false 则设置 poster 無效  

地圖(Map):

組件名 注釋 组件屬性
屬性名 類型 默認值 說明 最低版本
map 地圖 longitude Number   中心經度  
latitude Number   中心緯度  
scale Number 16 縮放級別,取值範圍爲5-18  
markers Array   標記點  
covers Array   即将移除,请使用 markers  
polyline Array   路線  
circles Array    
controls Array   控件  
include-points Array   縮放視野以包含所有給定的坐標點  
show-location Boolean   顯示帶有方向的當前定位點  
bindmarkertap EventHandle   点击標記點时触发  
bindcallouttap EventHandle   点击標記點对应的气泡时触发 1.2.0
bindcontroltap EventHandle   點擊控件時觸發  
bindregionchange EventHandle   視野發生變化時觸發  
bindtap EventHandle   点击地圖时触发  
bindupdated EventHandle   在地圖渲染更新完成时触发 1.6.0

畫布(Canvas):

組件名 注釋 组件屬性
屬性名 類型 默認值 說明 最低版本
canvas 畫布 src String   要播放視頻的资源地址  
initial-time Number   指定視頻初始播放位置 1.6.0
duration Number   指定視頻时长 1.1.0
controls Boolean true 是否显示默认播放控件(播放/暂停按鈕、播放进度、时间)  
danmu-list Object Array   彈幕列表  
danmu-btn Boolean false 是否显示弹幕按鈕,只在初始化时有效,不能动态变更  
enable-danmu Boolean false 是否展示彈幕,只在初始化時有效,不能動態變更  
autoplay Boolean false 是否自動播放  
loop Boolean false 是否循環播放 1.4.0
muted Boolean false 是否靜音播放 1.4.0
page-gesture Boolean false 在非全屏模式下,是否開啓亮度與音量調節手勢 1.6.0
direction Number   设置全屏时視頻的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度) 1.7.0
show-progress Boolean true 若不設置,寬度大于240時才會顯示 1.9.0
show-fullscreen-btn Boolean true 是否显示全屏按鈕 1.9.0
show-play-btn Boolean true 是否显示視頻底部控制栏的播放按鈕 1.9.0
show-center-play-btn Boolean true 是否显示視頻中间的播放按鈕 1.9.0
enable-progress-gesture Boolean true 是否開啓控制進度的手勢 1.9.0
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 1.4.0
objectFit String contain 当視頻大小与 video 容器大小不一致时,視頻的表现形式。contain:包含,fill:填充,cover:覆盖  
poster String   視頻封面的圖片网络资源地址,如果 controls 屬性值为 false 则设置 poster 無效  

xxfseo.com