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

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

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

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

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

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

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

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

3. Mustache 語法的格式

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

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

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

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

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

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

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

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

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

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

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

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

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

7. 三元運算?

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

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

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

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

8. 算數(shù)運算

????????

WXML 模板語法 - 事件綁定?：

1. 什么是事件

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

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

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

?3. 事件對象的屬性列表

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

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

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

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

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

此時，對于外層的 view 來說：

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

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

5. bindtap 的語法格式?

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

①通過 bindtap ，可以為組件綁定 tap 觸摸事件，語法如下：

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

?????????

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

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

????????

7. 事件傳參?

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

????????

因為小程序會把 bindtap 的屬性值，統(tǒng)一當(dāng)作事件名稱來處理，相當(dāng)于要調(diào)用一個名稱為 btnHandler(123) 的事件處理函數(shù)。

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

最終：

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

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

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

?? ??

8. bindinput 的語法格式?

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

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

? ??

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

? ???

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

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

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

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

③ 美化樣式

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

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

?????????

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

?????????

美化樣式：

?????????

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

?????????

WXML 模板語法 - 條件渲染?：

?????1. wx:if

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

? ? ?

????????也可以用 wx:elif 和 wx:else 來添加 else 判斷：

????????

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

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

????????

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

3. hidden?

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

????????

4. wx:if 與 hidden 的對比?

????????①運行方式不同

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

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

② 使用建議

1?頻繁切換時，建議使用 hidden

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

WXML 模板語法 - 列表渲染?

??1. wx:for

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

????????

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

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

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

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

示例代碼如下：

????????

3. wx:key 的使用?

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

????????

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

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