微信小程序 基礎(chǔ)組件

基礎(chǔ)組件

---

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

什么是組件：

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

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

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

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

屬性類型

---

類型	描述	注解
Boolean	布爾值	組件寫(xiě)上該屬性，不管該屬性等于什么，其值都為true，只有組件上沒(méi)有寫(xiě)該屬性時(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	組件的事件	詳見(jiàn)事件

特殊屬性

---

幾乎所有組件都有各自定義的屬性，可以對(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	開(kāi)關(guān)選擇器
label	標(biāo)簽

導(dǎo)航(Navigation)：

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

多媒體(Media)：

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

地圖(Map)：

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

畫(huà)布(Canvas)：

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

客服會(huì)話：

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