微信小程式開發(七)
阿新 • • 發佈:2019-01-09
基礎元件
框架為開發者提供了一系列基礎元件,開發者可以通過組合這些基礎元件進行快速開發。
本質上和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
直接操控DOM
,JS
只需要管理狀態即可,然後再通過一種模板語法來描述狀態和介面結構的關係即可。
資料繫結
通過{{ }}
的語法把一個變數繫結到介面上
控制繫結
僅僅通過資料繫結還不夠完整的描述狀態和介面的關係,還需要if/else, for
等控制能力,在小程式裡邊,這些控制能力都用 wx:
開頭的屬性來表達。