微信小程序官方基礎組件庫,微信小程序組件列表
2017-12-25
導讀：基礎組件 框架為開發者提供了一系列基礎組件，開發者可以通過組合這些基礎組件進行快速開發。 什么是組件： 組件是視圖層的基本組成單元。 組件自帶一些功能與微信風格的樣式。...
基礎組件
框架為開發者提供了一系列基礎組件，開發者可以通過組合這些基礎組件進行快速開發。
什么是組件：
- 組件是視圖層的基本組成單元。
- 組件自帶一些功能與微信風格的樣式。
-
一個組件通常包括
開始標簽和結束標簽，屬性用來修飾這個組件，內容在兩個標簽之內。<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 | Boolean | 組件是否顯示 | 所有組件默認顯示 |
| data-* | Any | 自定義屬性 | 組件上觸發的事件時，會發送給事件處理函數 |
| bind* / catch* | EventHandler | 組件的事件 | 詳見事件 |
特殊屬性
幾乎所有組件都有各自定義的屬性，可以對該組件的功能或樣式進行修飾，請參考各個組件的定義。
組件列表
基礎組件分為以下八大類：
視圖容器(View Container)：
| 組件名 | 說明 |
|---|---|
| view | 視圖容器 |
| scroll-view | 可滾動視圖容器 |
| swiper | 可滑動的視圖容器 |
基礎內容(Basic Content)：
| 組件名 | 說明 |
|---|---|
| icon | 圖標 |
| text | 文字 |
| progress | 進度條 |
表單(Form)：
| 標簽名 | 說明 |
|---|---|
| button | 按鈕 |
| form | 表單 |
| input | 輸入框 |
| checkbox | 多項選擇器 |
| radio | 單項選擇器 |
| picker | 列表選擇器 |
| picker-view | 內嵌列表選擇器 |
| slider | 滑動選擇器 |
| switch | 開關選擇器 |
| label | 標簽 |
導航(Navigation)：
| 組件名 | 說明 |
|---|---|
| navigator | 應用內跳轉 |
多媒體(Media)：
| 組件名 | 說明 |
|---|---|
| audio | 音頻 |
| image | 圖片 |
| video | 視頻 |
地圖(Map)：
| 組件名 | 說明 |
|---|---|
| map | 地圖 |
畫布(Canvas)：
| 組件名 | 說明 |
|---|---|
| canvas | 畫布 |
客服會話：
| 組件名 | 說明 |
|---|---|
| contact-button | 進入客服會話按鈕 |
更多微信小程序開發教程，可以關注hi小程序。
第二部分：如何開通一個小商店
您可能感興趣:
掃碼免費領取運營資料包
