這篇文章將為大家詳細講解有關微信小程序組件列表的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
框架為開發者提供了一系列基礎組件，開發者可以通過組合這些基礎組件進行快速開發。
什么是組件：
組件是視圖層的基本組成單元。
組件自帶一些功能與微信風格的樣式。
一個組件通常包括開始標簽和結束標簽，屬性用來修飾這個組件，內容在兩個標簽之內。
<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 | 進入客服會話按鈕 |
關于“微信小程序組件列表的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
