1. 程式人生 > >微信小程式 基礎元件

微信小程式 基礎元件

基礎元件


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

什麼是元件:

  • 元件是檢視層的基本組成單元。
  • 元件自帶一些功能與微信風格的樣式。
  • 一個元件通常包括開始標籤結束標籤屬性用來修飾這個元件,內容在兩個標籤之內。

    <tagname property="value">
      Content goes here ...
    </tagename>

    注意:所有元件與屬性都是小寫,以連字元-連線

屬性型別


型別 描述 註解
Boolean 布林值 元件寫上該屬性,不管該屬性等於什麼,其值都為true,只有元件上沒有寫該屬性時,屬性值才為false。如果屬性值為變數,變數的值會被轉換為Boolean型別
Number 數字 12.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 進入客服會話按鈕