目錄

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

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

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

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

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

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

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

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

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

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

1. 什么是事件

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

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

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

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

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

7. 事件傳參?

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

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

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

1. wx:if

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

3. hidden?

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

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

1. wx:for

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

3. wx:key 的使用?

---

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)即可。類(lèi)似于vue中的插值表達(dá)式，語(yǔ)法格式為：

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

綁定內(nèi)容

綁定屬性

運(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. 小程序中常用的事件?

????????

類(lèi)型	綁定方式	事件描述
tap	bindtap 或 bind:tap	手指觸摸后馬上離開(kāi)，類(lèi)似于 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ì)屬性如下表所示：?

屬性	類(lèi)型	說(shuō)明
type	String	事件類(lèi)型
timeStamp	Integer	頁(yè)面打開(kāi)到觸發(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)寫(xiě)成 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)作事件名稱(chēng)來(lái)處理，相當(dāng)于要調(diào)用一個(gè)名稱(chēng)為 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é)合 <block> 使用 wx:if?

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

????????

注意： <block> 并不是一個(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 的使用?

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

????????

????????

總結(jié)

以上是生活随笔為你收集整理的微信小程序学习day01-WXML 模板语法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。