微信小程式 基礎元件
阿新 • • 發佈:2018-11-05
基礎元件
框架為開發者提供了一系列基礎元件,開發者可以通過組合這些基礎元件進行快速開發。
什麼是元件:
- 元件是檢視層的基本組成單元。
- 元件自帶一些功能與微信風格的樣式。
一個元件通常包括
開始標籤
和結束標籤
,屬性
用來修飾這個元件,內容
在兩個標籤之內。<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" |
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 | 進入客服會話按鈕 |