微信小程序.wxml模板

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))

組件屬性

控制屬性(需要在雙引號之內(nèi))

控制屬性

關(guān)鍵字(需要在雙引號之內(nèi))

true:boolean 類型的 true节芥,代表真值裹虫。

false: boolean 類型的 false,代表假值滑燃。

特別注意:不要直接寫?checked="false",其計算結(jié)果是一個字符串颓鲜,轉(zhuǎn)成 boolean 類型后代表真值表窘。

運(yùn)算:{{ }}

三元運(yùn)算

三元運(yùn)算用法

算數(shù)運(yùn)算

算數(shù)運(yùn)算用法

邏輯判斷

邏輯判斷用法

字符串運(yùn)算

字符串運(yùn)算用法

數(shù)據(jù)路徑運(yùn)算

數(shù)據(jù)路徑運(yùn)算用法

組合:也可以在 Mustache 內(nèi)直接進(jìn)行組合,構(gòu)成新的對象或者數(shù)組灾杰。


數(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用法

使用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 位置,如:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末盏浙,一起剝皮案震驚了整個濱河市眉睹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌废膘,老刑警劉巖竹海,帶你破解...
    沈念sama閱讀 206,723評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異丐黄,居然都是意外死亡斋配,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評論 2 382
  • 文/潘曉璐 我一進(jìn)店門灌闺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來艰争,“玉大人,你說我怎么就攤上這事桂对∷ψ浚” “怎么了?”我有些...
    開封第一講書人閱讀 152,998評論 0 344
  • 文/不壞的土叔 我叫張陵蕉斜,是天一觀的道長逾柿。 經(jīng)常有香客問我,道長宅此,這世上最難降的妖魔是什么机错? 我笑而不...
    開封第一講書人閱讀 55,323評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮父腕,結(jié)果婚禮上毡熏,老公的妹妹穿的比我還像新娘。我一直安慰自己侣诵,他們只是感情好痢法,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,355評論 5 374
  • 文/花漫 我一把揭開白布狱窘。 她就那樣靜靜地躺著,像睡著了一般财搁。 火紅的嫁衣襯著肌膚如雪蘸炸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,079評論 1 285
  • 那天尖奔,我揣著相機(jī)與錄音搭儒,去河邊找鬼。 笑死提茁,一個胖子當(dāng)著我的面吹牛淹禾,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播茴扁,決...
    沈念sama閱讀 38,389評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼铃岔,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了峭火?” 一聲冷哼從身側(cè)響起毁习,我...
    開封第一講書人閱讀 37,019評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎卖丸,沒想到半個月后纺且,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,519評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡稍浆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,971評論 2 325
  • 正文 我和宋清朗相戀三年载碌,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片衅枫。...
    茶點(diǎn)故事閱讀 38,100評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡嫁艇,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出为鳄,到底是詐尸還是另有隱情裳仆,我是刑警寧澤腕让,帶...
    沈念sama閱讀 33,738評論 4 324
  • 正文 年R本政府宣布孤钦,位于F島的核電站,受9級特大地震影響纯丸,放射性物質(zhì)發(fā)生泄漏偏形。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,293評論 3 307
  • 文/蒙蒙 一觉鼻、第九天 我趴在偏房一處隱蔽的房頂上張望俊扭。 院中可真熱鬧,春花似錦坠陈、人聲如沸萨惑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽庸蔼。三九已至解总,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間姐仅,已是汗流浹背花枫。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留掏膏,地道東北人劳翰。 一個月前我還...
    沈念sama閱讀 45,547評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像馒疹,于是被迫代替她去往敵國和親佳簸。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,834評論 2 345

推薦閱讀更多精彩內(nèi)容

  • WXML WXML(WeiXin Markup Language)是微信的一套標(biāo)簽語言行冰,結(jié)合基礎(chǔ)組件溺蕉、事件系統(tǒng),可...
    許劍鋒閱讀 6,774評論 3 51
  • 微信小程序代碼復(fù)用技術(shù)-模板/組件/插件 MD by Jimbowhy and you can visit my ...
    堅果jimbowhy閱讀 10,779評論 1 13
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理悼做,服務(wù)發(fā)現(xiàn)疯特,斷路器,智...
    卡卡羅2017閱讀 134,600評論 18 139
  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line)肛走,也就是一...
    悟名先生閱讀 4,118評論 0 13
  • 自戀和依戀的一個重要區(qū)別是漓雅,學(xué)會了依戀的人會擁抱真實世界,而一直停留在自戀中的人容易待在自己的世界中朽色,并認(rèn)為自己的...
    尹二尹閱讀 602評論 1 2