本篇文章給大家?guī)?lái)了關(guān)于微信小程序的相關(guān)知識(shí)，其中主要介紹了關(guān)于WXML模板語(yǔ)法的相關(guān)內(nèi)容，包括了數(shù)據(jù)綁定、事件綁定、條件渲染、列表渲染等等問(wèn)題，下面一起來(lái)看一下，希望對(duì)大家有幫助。

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

WXML 模板語(yǔ)法 - 數(shù)據(jù)綁定

1.數(shù)據(jù)綁定的基本原則

① 在 data 中定義數(shù)據(jù)

② 在 WXML 中使用數(shù)據(jù)

2. 在 data 中定義頁(yè)面的數(shù)據(jù)

在頁(yè)面對(duì)應(yīng)的 .js 文件中，把數(shù)據(jù)定義到 data 對(duì)象中即可：

3. Mustache 語(yǔ)法的格式

????????把data中的數(shù)據(jù)綁定到頁(yè)面中渲染，使用 Mustache 語(yǔ)法（雙大括號(hào)）將變量包起來(lái)即可。類似于vue中的插值表達(dá)式，語(yǔ)法格式為：

4. Mustache 語(yǔ)法的應(yīng)用場(chǎng)景?

1. 綁定內(nèi)容
2. 綁定屬性
3. 運(yùn)算（三元運(yùn)算、算術(shù)運(yùn)算等）

?5. 動(dòng)態(tài)綁定內(nèi)容

????????頁(yè)面的數(shù)據(jù)如下：

????????????????

????????頁(yè)面的結(jié)構(gòu)如下：

?????????????????

6. 動(dòng)態(tài)綁定屬性?

?????????頁(yè)面的數(shù)據(jù)如下：

????????????????

????????頁(yè)面的結(jié)構(gòu)如下：

????????????????

7. 三元運(yùn)算?

????????頁(yè)面的數(shù)據(jù)如下：

????????????????

????????頁(yè)面的結(jié)構(gòu)如下：

?????????????????

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

????????

WXML 模板語(yǔ)法 - 事件綁定?：

1. 什么是事件

????????事件是渲染層到邏輯層的通訊方式。通過(guò)事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進(jìn)行業(yè)務(wù)的處理。

2. 小程序中常用的事件?

類型	綁定方式	事件描述
tap	bindtap 或 bind:tap	手指觸摸后馬上離開，類似于 HTML 中的 click 事件
input	bindinput 或 bind:input	文本框的輸入事件
change	bindchange 或 bind:change	狀態(tài)改變時(shí)觸發(fā)

?3. 事件對(duì)象的屬性列表

???????當(dāng)事件回調(diào)觸發(fā)的時(shí)候，會(huì)收到一個(gè)事件對(duì)象 event，它的詳細(xì)屬性如下表所示：?

屬性	類型	說(shuō)明
type	String	事件類型
timeStamp	Integer	頁(yè)面打開到觸發(fā)事件所經(jīng)過(guò)的毫秒數(shù)
target	Object	觸發(fā)事件的組件的一些屬性值集合
currentTarget	Object	當(dāng)前組件的一些屬性值集合
detail	Object	額外的信息
touches	Array	觸摸事件，當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組
changedTouches	Array	觸摸事件，當(dāng)前變化的觸摸點(diǎn)信息的數(shù)組

4. target 和 currentTarget 的區(qū)別?

????????target 是觸發(fā)該事件的源頭組件，而 currentTarget 則是當(dāng)前事件所綁定的組件。舉例如下：

點(diǎn)擊內(nèi)部的按鈕時(shí)，點(diǎn)擊事件以冒泡的方式向外擴(kuò)散，也會(huì)觸發(fā)外層 view 的 tap 事件處理函數(shù)。

此時(shí)，對(duì)于外層的 view 來(lái)說(shuō)：

1.target 指向的是觸發(fā)事件的源頭組件，因此，e.target 是內(nèi)部的按鈕組件

2.currentTarget 指向的是當(dāng)前正在觸發(fā)事件的那個(gè)組件，因此，e.currentTarget 是當(dāng)前的 view 組件

5. bindtap 的語(yǔ)法格式?

在小程序中，不存在 HTML 中的 onclick 鼠標(biāo)點(diǎn)擊事件，而是通過(guò) tap 事件來(lái)響應(yīng)用戶的觸摸行為。

①通過(guò) bindtap ，可以為組件綁定 tap 觸摸事件，語(yǔ)法如下：

????????②在頁(yè)面的 .js 文件中定義對(duì)應(yīng)的事件處理函數(shù)，事件參數(shù)通過(guò)形參 event（一般簡(jiǎn)寫成 e） 來(lái)接收：

?????????

6. 在事件處理函數(shù)中為 data 中的數(shù)據(jù)賦值?

????????通過(guò)調(diào)用 this.setData(dataObject) 方法，可以給頁(yè)面 data 中的數(shù)據(jù)重新賦值，示例如下：

????????

7. 事件傳參?

????????小程序中的事件傳參比較特殊，不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)。例如，下面的代碼將不能正常工作：

????????

因?yàn)樾〕绦驎?huì)把 bindtap 的屬性值，統(tǒng)一當(dāng)作事件名稱來(lái)處理，相當(dāng)于要調(diào)用一個(gè)名稱為 btnHandler(123) 的事件處理函數(shù)。

????????可以為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數(shù)的名字，示例代碼如下：

最終：

1? info 會(huì)被解析為 參數(shù) 的名字

2 數(shù)值 2 會(huì)被解析為 參數(shù)的值

在事件處理函數(shù)中，通過(guò) event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值，示例代碼如下：

?? ??

8. bindinput 的語(yǔ)法格式?

?????????在小程序中，通過(guò) input 事件來(lái)響應(yīng)文本框的輸入事件，語(yǔ)法格式如下：

① 通過(guò) bindinput ，可以為文本框綁定輸入事件：

? ??

????????②在頁(yè)面的 .js 文件中定義事件處理函數(shù)：?

? ???

9. 實(shí)現(xiàn)文本框和 data 之間的數(shù)據(jù)同步?

????????實(shí)現(xiàn)步驟：

① 定義數(shù)據(jù)

② 渲染結(jié)構(gòu)

③ 美化樣式

④ 綁定 input 事件處理函數(shù)

定義數(shù)據(jù)：

?????????

渲染結(jié)構(gòu)：

?????????

美化樣式：

?????????

綁定 input 事件處理函數(shù)：

?????????

WXML 模板語(yǔ)法 - 條件渲染?：

?????1. wx:if

????????在小程序中，使用 wx:if="{{condition}}" 來(lái)判斷是否需要渲染該代碼塊：

? ? ?

????????也可以用 wx:elif 和 wx:else 來(lái)添加 else 判斷：

????????

2. 結(jié)合 使用 wx:if?

????????如果要一次性控制多個(gè)組件的展示與隱藏，可以使用一個(gè) 標(biāo)簽將多個(gè)組件包裝起來(lái)，并在 標(biāo)簽上使用 wx:if 控制屬性，示例如下：

????????

注意： 并不是一個(gè)組件，它只是一個(gè)包裹性質(zhì)的容器，不會(huì)在頁(yè)面中做任何渲染。

3. hidden?

????????在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的顯示與隱藏：

????????

4. wx:if 與 hidden 的對(duì)比?

????????①運(yùn)行方式不同

1 wx:if 以 動(dòng)態(tài)創(chuàng)建和移除元素 的方式，控制元素的展示與隱藏

2 hidden 以 切換樣式 的方式（ display: none/block; ），控制元素的顯示與隱藏

② 使用建議

1?頻繁切換時(shí)，建議使用 hidden

2?控制條件復(fù)雜時(shí)，建議使用 wx:if 搭配 wx:elif、wx:else 進(jìn)行展示與隱藏的切換

WXML 模板語(yǔ)法 - 列表渲染?

??1. wx:for

????????通過(guò) wx:for 可以根據(jù)指定的數(shù)組，循環(huán)渲染重復(fù)的組件結(jié)構(gòu)，語(yǔ)法示例如下：

????????

????????默認(rèn)情況下，當(dāng)前循環(huán)項(xiàng)的索引用 index 表示；當(dāng)前循環(huán)項(xiàng)用 item 表示。

2. 手動(dòng)指定索引和當(dāng)前項(xiàng)的變量名*?

? ? 1?使用 wx:for-index 可以指定當(dāng)前循環(huán)項(xiàng)的索引的變量名

2 使用 wx:for-item 可以指定 當(dāng)前項(xiàng) 的變量名

示例代碼如下：

????????

3. wx:key 的使用?

????????類似于 Vue 列表渲染中的 :key，小程序在實(shí)現(xiàn)列表渲染時(shí)，也建議為渲染出來(lái)的列表項(xiàng)指定唯一的 key 值，從而提高渲染的效率，示例代碼如下：

????????

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

以上是微信小程序WXML模板語(yǔ)法總結(jié)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！