小程序組件概述

基礎組件

框架為開發者提供了一系列基礎組件，開發者可以通過組合這些基礎組件進行快速開發。

什么是組件：

• 組件是視圖層的基本組成單元。

• 組件自帶一些功能與微信風格的樣式。

• 一個組件通常包括開始標簽和結束標簽，屬性用來修飾這個組件，內容在兩個標簽之內。

  <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中定義的事件處理函數名
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	畫布