1. 程式人生 > >微信小程式開發(七)

微信小程式開發(七)

基礎元件

框架為開發者提供了一系列基礎元件,開發者可以通過組合這些基礎元件進行快速開發。
本質上和html 標籤類似

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

注意:所有元件與屬性都是小寫,連字元為-連線
屬性型別
型別 描述 註解
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 畫布

頁面邏輯

wxml中會使用 {{}}來實行 頁面邏輯 ,不再使用 DOM API操控
遵循 MVVM開發模式 ,把渲染和邏輯分離

簡單來說就是不要再讓 JS直接操控DOMJS只需要管理狀態即可,然後再通過一種模板語法來描述狀態和介面結構的關係即可。

資料繫結

通過{{ }}的語法把一個變數繫結到介面上

控制繫結

僅僅通過資料繫結還不夠完整的描述狀態和介面的關係,還需要if/else, for等控制能力,在小程式裡邊,這些控制能力都用 wx:開頭的屬性來表達。