注冊(cè)

微信小程序官方基礎(chǔ)組件庫(kù),微信小程序組件列表

2017-12-25
導(dǎo)讀：基礎(chǔ)組件 框架為開發(fā)者提供了一系列基礎(chǔ)組件，開發(fā)者可以通過(guò)組合這些基礎(chǔ)組件進(jìn)行快速開發(fā)。 什么是組件： 組件是視圖層的基本組成單元。 組件自帶一些功能與微信風(fēng)格的樣式。...

基礎(chǔ)組件

框架為開發(fā)者提供了一系列基礎(chǔ)組件，開發(fā)者可以通過(guò)組合這些基礎(chǔ)組件進(jìn)行快速開發(fā)。

什么是組件：

  • 組件是視圖層的基本組成單元。
  • 組件自帶一些功能與微信風(fēng)格的樣式。

  • 一個(gè)組件通常包括開始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來(lái)修飾這個(gè)組件，內(nèi)容在兩個(gè)標(biāo)簽之內(nèi)。

    <tagname property="value">
  Content goes here ...
</tagename>

    注意：所有組件與屬性都是小寫，以連字符-連接

屬性類型

類型 描述 注解
Boolean 布爾值 組件寫上該屬性，不管該屬性等于什么，其值都為true，只有組件上沒(méi)有寫該屬性時(shí)，屬性值才為false。如果屬性值為變量，變量的值會(huì)被轉(zhuǎn)換為Boolean類型
Number 數(shù)字 1, 2.5
String 字符串 "string"
Array 數(shù)組 [ 1, "string" ]
Object 對(duì)象 { key: value }
EventHandler 事件處理函數(shù)名 "handlerName"是Page中定義的事件處理函數(shù)名
Any 任意屬性  

共同屬性類型

所有組件都有的屬性：

屬性名 類型 描述 注解
id String 組件的唯一標(biāo)示 保持整個(gè)頁(yè)面唯一
class String 組件的樣式類 在對(duì)應(yīng)的wxss中定義的樣式類
style String 組件的內(nèi)聯(lián)樣式 可以動(dòng)態(tài)設(shè)置的內(nèi)聯(lián)樣式
hidden Boolean 組件是否顯示 所有組件默認(rèn)顯示
data-* Any 自定義屬性 組件上觸發(fā)的事件時(shí)，會(huì)發(fā)送給事件處理函數(shù)
bind* / catch* EventHandler 組件的事件 詳見事件

特殊屬性

幾乎所有組件都有各自定義的屬性，可以對(duì)該組件的功能或樣式進(jìn)行修飾，請(qǐng)參考各個(gè)組件的定義。

組件列表

基礎(chǔ)組件分為以下八大類：

視圖容器(View Container)：

組件名 說(shuō)明
view 視圖容器
scroll-view 可滾動(dòng)視圖容器
swiper 可滑動(dòng)的視圖容器

基礎(chǔ)內(nèi)容(Basic Content)：

組件名 說(shuō)明
icon 圖標(biāo)
text 文字
progress 進(jìn)度條

表單(Form)：

標(biāo)簽名 說(shuō)明
button 按鈕
form 表單
input 輸入框
checkbox 多項(xiàng)選擇器
radio 單項(xiàng)選擇器
picker 列表選擇器
picker-view 內(nèi)嵌列表選擇器
slider 滑動(dòng)選擇器
switch 開關(guān)選擇器
label 標(biāo)簽

導(dǎo)航(Navigation)：

組件名 說(shuō)明
navigator 應(yīng)用內(nèi)跳轉(zhuǎn)

多媒體(Media)：

組件名 說(shuō)明
audio 音頻
image 圖片
video 視頻

地圖(Map)：

組件名 說(shuō)明
map 地圖

畫布(Canvas)：

 

組件名 說(shuō)明
canvas 畫布

 

客服會(huì)話：

組件名 說(shuō)明
contact-button 進(jìn)入客服會(huì)話按鈕

更多微信小程序開發(fā)教程，可以關(guān)注hi小程序。
重磅推薦：小程序開店目錄

第一部分：小商店是什么

第二部分：如何開通一個(gè)小商店

第三部分：如何登錄小商店

第四部分：開店任務(wù)常見問(wèn)題

第五部分：小商店可以賣什么

第六部分：HiShop小程序特色功能

第七部分：小程序直播

第八部分：小程序收貨/物流

第九部分：小程序怎么結(jié)算

第十部分：小程序客服

第十一部分：電商創(chuàng)業(yè)

第十二部分：小程序游戲開發(fā)