組件 · 我的開發之路系列 - 微信開發指南

# 組件同普通的HTML不一樣，小程序內置一些組件，用法跟HTML標簽相似。 ## 什么是組件 - 組件是視圖層的基本組成單元。 - 組件自帶一些功能與微信風格的樣式。 - 一個組件通常包括開始標簽和結束標簽，屬性用來修飾這個組件，內容在兩個標簽之內。 ```html <tagname property="value"> Content goes here ... </tagname> ``` ## 基礎組件 ## 屬性類型 | 類型 | 描述 | 注解 | | ------------ | ------- | ---------------------------------------- | | Boolean | 布爾值 | 組件寫上該屬性，不管該屬性等于什么，其值都為`true`，只有組件上沒有寫該屬性時，屬性值才為`false`。如果屬性值為變量，變量的值會被轉換為Boolean類型 | | Number | 數字 | `1`, `2.5` | | String | 字符串 | `"string"` | | Array | 數組 | `[ 1, "string" ]` | | Object | 對象 | `{ key: value }` | | EventHandler | 事件處理函數名 | `"handlerName"` 是 [Page](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html)中定義的事件處理函數名 | | Any | 任意屬性 | | ## 共同屬性類型所有組件都有的屬性： | 屬性名 | 類型 | 描述 | 注解 | | -------------- | ------------ | ------- | ---------------------------------------- | | id | String | 組件的唯一標示 | 保持整個頁面唯一 | | class | String | 組件的樣式類 | 在對應的 WXSS 中定義的樣式類 | | style | String | 組件的內聯樣式 | 可以動態設置的內聯樣式 | | hidden | Boolean | 組件是否顯示 | 所有組件默認顯示 | | data-* | Any | 自定義屬性 | 組件上觸發的事件時，會發送給事件處理函數 | | bind* / catch* | EventHandler | 組件的事件 | 詳見[事件](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html) | ## 特殊屬性幾乎所有組件都有各自定義的屬性，可以對該組件的功能或樣式進行修飾，請參考各個[組件](https://mp.weixin.qq.com/debug/wxadoc/dev/component/#%E7%BB%84%E4%BB%B6%E5%88%97%E8%A1%A8)的定義。 ## 組件分類基礎組件分為以下七大類： ### **視圖容器(View Container)：** | 組件名 | 說明 | | ---------------------------------------- | ------- | | [view](https://mp.weixin.qq.com/debug/wxadoc/dev/component/view.html) | 視圖容器 | | [scroll-view](https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html) | 可滾動視圖容器 | | [swiper](https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html) | 滑塊視圖容器 | ### **基礎內容(Basic Content)：** | 組件名 | 說明 | | ---------------------------------------- | ---- | | [icon](https://mp.weixin.qq.com/debug/wxadoc/dev/component/icon.html) | 圖標 | | [text](https://mp.weixin.qq.com/debug/wxadoc/dev/component/text.html) | 文字 | | [progress](https://mp.weixin.qq.com/debug/wxadoc/dev/component/progress.html) | 進度條 | ### **表單(Form)：** | 標簽名 | 說明 | | ---------------------------------------- | ------- | | [button](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | 按鈕 | | [form](https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html) | 表單 | | [input](https://mp.weixin.qq.com/debug/wxadoc/dev/component/input.html) | 輸入框 | | [checkbox](https://mp.weixin.qq.com/debug/wxadoc/dev/component/checkbox.html) | 多項選擇器 | | [radio](https://mp.weixin.qq.com/debug/wxadoc/dev/component/radio.html) | 單項選擇器 | | [picker](https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html) | 列表選擇器 | | [picker-view](https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker-view.html) | 內嵌列表選擇器 | | [slider](https://mp.weixin.qq.com/debug/wxadoc/dev/component/slider.html) | 滾動選擇器 | | [switch](https://mp.weixin.qq.com/debug/wxadoc/dev/component/switch.html) | 開關選擇器 | | [label](https://mp.weixin.qq.com/debug/wxadoc/dev/component/label.html) | 標簽 | ### **導航(Navigation)：** | 組件名 | 說明 | | ---------------------------------------- | ---- | | [navigator](https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html) | 應用鏈接 | ### **多媒體(Media)：** | 組件名 | 說明 | | ---------------------------------------- | ---- | | [audio](https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html) | 音頻 | | [image](https://mp.weixin.qq.com/debug/wxadoc/dev/component/image.html) | 圖片 | | [video](https://mp.weixin.qq.com/debug/wxadoc/dev/component/video.html) | 視頻 | ### **地圖(Map)：** | 組件名 | 說明 | | ---------------------------------------- | ---- | | [map](https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html) | 地圖 | ### **畫布(Canvas)：** | 組件名 | 說明 | | ---------------------------------------- | ---- | | [canvas](https://mp.weixin.qq.com/debug/wxadoc/dev/component/canvas.html) | 畫布 |