WXML?充當(dāng)?shù)木褪穷愃?HTML?的角色涨醋,用來描述當(dāng)前這個頁面的結(jié)構(gòu),WXML?由標(biāo)簽、屬性等等構(gòu)成
WXML具有的能力:
數(shù)據(jù)綁定:WXML 中的動態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data而柑。
數(shù)據(jù)綁定使用 Mustache 語法(雙大括號)將變量包起來
組件屬性(需要在雙引號之內(nèi))
控制屬性(需要在雙引號之內(nèi))
關(guān)鍵字(需要在雙引號之內(nèi))
true:boolean 類型的 true节芥,代表真值裹虫。
false: boolean 類型的 false,代表假值滑燃。
特別注意:不要直接寫?checked="false",其計算結(jié)果是一個字符串颓鲜,轉(zhuǎn)成 boolean 類型后代表真值表窘。
運(yùn)算:{{ }}
三元運(yùn)算
算數(shù)運(yùn)算
邏輯判斷
字符串運(yùn)算
數(shù)據(jù)路徑運(yùn)算
組合:也可以在 Mustache 內(nèi)直接進(jìn)行組合,構(gòu)成新的對象或者數(shù)組灾杰。
數(shù)組
對象
也可以用擴(kuò)展運(yùn)算符...?來將一個對象展開
如果對象的 key 和 value 相同蚊丐,也可以間接地表達(dá)。
注意:上述方式可以隨意組合艳吠,但是如有存在變量名相同的情況麦备,后邊的會覆蓋前面,如:
注意:花括號和引號之間如果有空格,將最終被解析成為字符串
列表渲染:就是我們沉莞荩看到的列表視圖
wx:for
在組件上使用 wx:for 控制屬性綁定一個數(shù)組黍匾,即可使用數(shù)組中的各項的數(shù)據(jù)重復(fù)渲染該組件
默認(rèn)數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為?index,數(shù)組當(dāng)前項的變量名默認(rèn)為?item
使用wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名呛梆,
使用wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名
wx:for?也可以嵌套锐涯,下邊是一個九九乘法表
block wx:for
類似block wx:if ,也可以將 wx:for 用在<block/>標(biāo)簽上填物,以渲染一個包含多節(jié)點(diǎn)的結(jié)構(gòu)塊纹腌。
wx:key
如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中,并且希望列表中的項目保持自己的特征和狀態(tài)(如<input/> 中的輸入內(nèi)容滞磺,<switch/> 的選中狀態(tài))升薯,需要使用 wx:key 來指定列表中項目的唯一標(biāo)識符。
wx:key 的值以兩種形式提供
1击困、字符串涎劈,代表在for循環(huán)的array中item的某個property,該property的值需要是列表中唯一的字符串或數(shù)字阅茶,且不能動態(tài)改變
2蛛枚、保留關(guān)鍵字 *this 代表在for循環(huán)中的item本身,這種表示需要item本身是一個唯一的字符串或者數(shù)字脸哀,例如:當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候蹦浦,會校正帶有key的組件,框架會確保他們被重新排序撞蜂,而不是重新創(chuàng)建白筹,以確保使組件保持自身的狀態(tài),并且提高列表渲染時的效率
如不提供 wx:key谅摄,會抱一個warning徒河,如果明確知道該列表是靜態(tài),或者不必關(guān)注其順序送漠,可以選擇忽略
代碼示例可參考:wx:key代碼示例
注意:
條件渲染
wx:if
在框架中顽照,使用wx:if="{{condition}}"來判斷是否需要渲染該代碼塊:
也可以用?wx:elif?和?wx:else?來添加一個 else 塊:
block wx:if
因為?wx:if?是一個控制屬性,需要將它添加到一個標(biāo)簽上闽寡。如果要一次性判斷多個組件標(biāo)簽代兵,可以使用一個??標(biāo)簽將多個組件包裝起來,并在上邊使用?wx:if?控制屬性爷狈。
注意:??并不是一個組件植影,它僅僅是一個包裝元素,不會在頁面中做任何渲染涎永,只接受控制屬性思币。
wx:if?vs?hidden
因為?wx:if?之中的模板也可能包含數(shù)據(jù)綁定鹿响,所以當(dāng)?wx:if?的條件值切換時,框架有一個局部渲染的過程谷饿,因為它會確保條件塊在切換時銷毀或重新渲染惶我。
同時?wx:if?也是惰性的,如果在初始渲染條件為?false博投,框架什么也不做绸贡,在條件第一次變成真的時候才開始局部渲染。
相比之下毅哗,hidden?就簡單的多听怕,組件始終會被渲染,只是簡單的控制顯示與隱藏虑绵。
一般來說叉跛,wx:if?有更高的切換消耗而?hidden?有更高的初始渲染消耗。因此蒸殿,如果需要頻繁切換的情景下,用?hidden?更好鸣峭,如果在運(yùn)行時條件不大可能改變則?wx:if?較好宏所。
模板
WXML提供模板(template),可以在模板中定義代碼片段摊溶,然后在不同的地方調(diào)用爬骤。
定義模板
使用 name 屬性,作為模板的名字莫换。然后在<template/>內(nèi)定義代碼片段霞玄,如:
使用模板
使用 is 屬性,聲明需要的使用的模板拉岁,然后將模板所需要的 data 傳入坷剧,如:
is 屬性可以使用 Mustache 語法,來動態(tài)決定具體需要渲染哪個模板:
模板的作用域
模板擁有自己的作用域喊暖,只能使用 data 傳入的數(shù)據(jù)以及模版定義文件中定義的??模塊惫企。
事件
什么是事件?
1陵叽、事件是視圖層到邏輯層的通訊方式
2狞尔、事件可以將用戶的行為反饋到邏輯層進(jìn)行處理
3、事件可以綁定在組件上巩掺,當(dāng)達(dá)到觸發(fā)事件偏序,就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)
4、事件對象可以攜帶額外信息胖替,如id研儒,dataset豫缨,touches
事件的使用方式
1、在組件中綁定一個事件處理函數(shù)殉摔。
如bindtap州胳,當(dāng)用戶點(diǎn)擊該組件的時候會在該頁面對應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。
2逸月、在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù)栓撞,參數(shù)是event。
3碗硬、可以看到log出來的信息大致如下:
事件詳解
一瓤湘、事件分類:冒泡事件和非冒泡事件
1、冒泡事件:當(dāng)一個組件上的事情被觸發(fā)后恩尾,該事件會向父節(jié)點(diǎn)傳遞
2弛说、非冒泡事件:當(dāng)一個組件上的事情被觸發(fā)后,該事件不會向父節(jié)點(diǎn)傳遞
wxml的冒泡事件列表
注:除上表之外的其他組件自定義事件如無特殊聲明都是非冒泡事件翰意,如<form/>的submit事件刽辙,<input/>的input事件,<scroll-view/>的scroll事件扎即。(詳細(xì)各個基礎(chǔ)組件詳細(xì))
二花沉、事件綁定和冒泡
事件綁定的寫法同組件的屬性,以key进鸠、value的形式
1稠曼、key以bind或catch開頭,然后跟上事件的類型客年,如bindtap霞幅、catchtouchstart。自基礎(chǔ)庫版本?1.5.0?起量瓜,在非原生組件中司恳,bind和catch后可以緊跟一個冒號,其含義不變绍傲,如bind:tap抵赢、catch:touchstart。
2唧取、value是一個字符串铅鲤,需要在對應(yīng)的Page中定義同名的函數(shù),不然當(dāng)觸發(fā)事件的時候會報錯
bind事件綁定不會阻止冒泡事件向上冒泡枫弟,catch事件綁定可以阻止冒泡事件向上冒泡
如在下邊這個例子中邢享,點(diǎn)擊 inner view 會先后調(diào)用handleTap3和handleTap2(因為tap事件會冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡淡诗,不再向父節(jié)點(diǎn)傳遞)骇塘,點(diǎn)擊 middle view 會觸發(fā)handleTap2伊履,點(diǎn)擊 outer view 會觸發(fā)handleTap1。
事件的捕獲階段
觸摸類事件支持捕獲階段款违。捕獲階段位于冒泡階段之前唐瀑,且在捕獲階段中,事件到達(dá)節(jié)點(diǎn)的順序與冒泡階段恰好相反插爹。需要在捕獲階段監(jiān)聽事件時哄辣,可以采用capture-bind、capture-catch關(guān)鍵字赠尾,后者將中斷捕獲階段和取消冒泡階段力穗。
事件對象
如無特殊說明,當(dāng)組件觸發(fā)事件時气嫁,邏輯層綁定該事件的處理函數(shù)會收到一個事件對象当窗。
BaseEvent 基礎(chǔ)事件對象屬性列表:
type:代表事件的類型
timeStamp:頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù)。
target:觸發(fā)事件的源組件寸宵。
currentTarget:事件綁定的當(dāng)前組件崖面。
說明: target 和 currentTarget 可以參考上例中,點(diǎn)擊 inner view 時梯影,handleTap3?收到的事件對象 target 和 currentTarget 都是 inner巫员,而handleTap2?收到的事件對象 target 就是 inner,currentTarget 就是 middle光酣。
dataset
在組件中可以定義數(shù)據(jù),這些數(shù)據(jù)將會通過事件傳遞給 SERVICE脉课。 書寫方式: 以data-開頭救军,多個單詞由連字符-鏈接,不能有大寫(大寫會自動轉(zhuǎn)成小寫)如data-element-type倘零,最終在 event.currentTarget.dataset 中會將連字符轉(zhuǎn)成駝峰elementType唱遭。
CustomEvent 自定義事件對象屬性列表(繼承 BaseEvent):
TouchEvent 觸摸事件對象屬性列表(繼承 BaseEvent):
touches
touches 是一個數(shù)組,每個元素為一個 Touch 對象(canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數(shù)組)呈驶。 表示當(dāng)前停留在屏幕上的觸摸點(diǎn)拷泽。
Touch對象
CanvasTouch 對象
changedTouches
changedTouches 數(shù)據(jù)格式同 touches。 表示有變化的觸摸點(diǎn)袖瞻,如從無變有(touchstart)司致,位置變化(touchmove),從有變無(touchend聋迎、touchcancel)脂矫。
detail
自定義事件所攜帶的數(shù)據(jù),如表單組件的提交事件會攜帶用戶的輸入霉晕,媒體的錯誤事件會攜帶錯誤信息庭再,詳見組件定義中各個事件的定義捞奕。
點(diǎn)擊事件的detail?帶有的 x, y 同 pageX, pageY 代表距離文檔左上角的距離。
引用
WXML 提供兩種文件引用方式import和include拄轻。
import
import可以在該文件中使用目標(biāo)文件定義的template颅围,如:
在 item.wxml 中定義了一個叫item的template:
在 index.wxml 中引用了 item.wxml,就可以使用item模板:
import 的作用域
import有作用域的概念恨搓,即只會import目標(biāo)文件中定義的template院促,而不會import目標(biāo)文件import的template
如:C import B,B import A奶卓,在C中可以使用B定義的template一疯,在B中可以使用A定義的template,但是C不能使用A定義的template夺姑。
include
include?可以將目標(biāo)文件除了<template/>? <wxs/> 外的整個代碼引入墩邀,相當(dāng)于是拷貝到 include 位置,如: