本篇文章為大家?guī)砹岁P(guān)於微信小程式的相關(guān)知識，其中主要介紹了關(guān)於WXML範本語法的相關(guān)內(nèi)容，包括了資料綁定、事件綁定、條件渲染、清單渲染等等問題，下面一起來看一下，希望對大家有幫助。

【相關(guān)學(xué)習(xí)推薦：小程式學(xué)習(xí)教學(xué)】

WXML 範本語法- #資料綁定

#1.資料綁定的基本原則

① 在 data 中定義資料

② 在 WXML 中使用資料

2. #在data 中定義頁面的資料

在頁面對應(yīng)的.js 檔中，把資料定義到data 物件中即可：

3. Mustache 語法的格式

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

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

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

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

##????????頁面的資料如下：

?????????????##????????????????

頁面的資料如下：

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

????????頁面中

7.

三元運算?????????頁的資料如下：

#????????????????

????????

##??

8.

算數(shù)運算

#???????? #WXML

範本語法-

事件綁定?：1. 什麼是事件

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

2. #小程式中常用的事件

bindtap 或事件

綁定方式	事件描述	tap
#bind:tap	手指觸碰後馬上離開，類似HTML 中的click
input	#bindinput 或bind:input	文字方塊的輸入事件
change	bindchange 或bind:change	狀態(tài)改變時觸發(fā)

#

?3. ##事件物件的屬性清單

##???????#當事件回呼觸發(fā)的時候，會收到一個事件物件event，它的詳細屬性如下表所示：?

type#StringtimeStamp#Integer#targetObjectcurrentTargetObjectdetailObject

屬性	類型	#說明
#事件類型
頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù)
觸發(fā)事件的元件的一些屬性值集合
#目前元件的一些屬性值集合
#####額外的資訊#########################touches######	Array	#觸控事件，目前停留在螢?zāi)恢械挠|控點資訊的陣列
changedTouches	#Array

########################################### #######觸控事件，目前變化的觸控點資訊的陣列###################

4. target 與currentTarget 的差異?

##????????target 是觸發(fā)該事件的來源元件，而currentTarget 則是目前事件所綁定的元件。舉例如下：

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

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

##1

##1 #.target 指向的是觸發(fā)事件的來源元件，因此，

e.target

是內(nèi)部的按鈕元件2.currentTarget 指向的是目前正在觸發(fā)事件的那個元件，因此，e.currentTarget 是目前的

view

元件

#5. bindtap

的語法格式?#在小程式中，不存在HTML #中的onclick 滑鼠點擊事件，而是透過tap

事件來回應(yīng)使用者的觸控行為。 ①透過 #bindtap ，可以為元件綁定

tap

觸摸事件，語法如下：

????????②#在頁面的.js 檔案中定義對應(yīng)的事件處理函數(shù)，事件參數(shù)透過形參event（一般簡寫成

e） 來接收：

######????????######?#####################

6. data

##中的資料賦值?

????????透過呼叫this.setData(dataObject) 方法，可以給頁面data 中的資料重新賦值，範例如下：

#????????

# 7. 事件傳參

?????????小程式中的事件傳參較為特殊，#不能在綁定事件的同時為事件處理函數(shù)傳遞參數(shù)。例如，以下的程式碼將無法正常運作：

????????因為小程式會把bindtap 的屬性值，統(tǒng)一當作事件名稱來處理，相當於要呼叫一個名稱為btnHandler(123)

的事件處理函數(shù)。

????????可以提供元件

data-* 自訂屬性傳參，其中# * 代表的是參數(shù)的名字，範例程式碼如下：

## 1? info 會被解析為

參數(shù) 的名字#2 數(shù)值

2

會被解析為

參數(shù)的值在事件處理函數(shù)中，透過

event.target.dataset.### ###參數(shù)名稱######即可取得到######特定參數(shù)的值######，範例程式碼如下：############?? ?##### ####?############8. #############bindinput ############的語法格式#### ##?######?????????####在小型程式中，以「######input ##################################### ########① ###透過### ###bindinput### ###，可以為文字方塊綁定輸入事件：#########? ?####?## ####????????②###在頁面的######.js ######檔案中定義事件處理函數(shù)：###?####

? ???

9. 實作文字方塊與data 之間的資料同步?

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

#① 定義資料

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

③ 美化樣式

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

定義資料：

????????#?

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

????????

?「美化樣式：

??????綁定

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

????????#?##????????#?WXML 範本語法

-

條件渲染

?：

?????1. wx:if????????#????????##????????

##????????

##????????##????????##??????” #在小程式中，使用wx:if="{{#condition

}}"

來判斷是否需要渲染該代碼塊：

? ? ?

????????也可以用wx:elif 和wx:else 來新增else #判斷：????????

????????#2. 結(jié)合#

##### ####### #####使用############ wx:if######?######????????###如果您想要######一次控制多個元件的展示與隱藏######，可以使用一個######### ###標籤將多個元件包裝起來，並在##### # ######標籤上使用######wx:if ######控制屬性，範例如下：######

????????

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

3. hidden?

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

4. wx:if #與 hidden 的比較?

????????① 運作方式不同

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

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

②

使用建議

1?頻繁切換1?

##時，建議使用hidden#2?控制條件複雜時，建議使用

wx:if

#搭配

wx:elif

、

##wx:else 進行展示與隱藏的切換WXML

範本語法##- 清單渲染

?#########??###1. wx:for##################????????###########????????######## #透過######wx:for ######可以依照指定的數(shù)組，循環(huán)渲染重複的元件結(jié)構(gòu)，語法範例如下：############????????##### #####

????????預(yù)設(shè)情況下，目前循環(huán)項目的索引以index 表示；當前循環(huán)項以item 表示。

2. 手動指定索引和目前項目的變數(shù)名稱 *?

? ? 1?使用wx:for-index 可以指定目前循環(huán)項目的索引的變數(shù)名稱

2 使用 wx:for-item 可以指定 目前項目 的變數(shù)名稱

範例程式碼如下：

#????????

##3. wx:key

的使用?????????類似於Vue 列表渲染中的:key，小程式在實作清單渲染時，也建議為渲染出來的清單項目指定唯一的key 值，從而

提高渲染的效率#，範例程式碼如下：

##### #????????############【相關(guān)學(xué)習(xí)推薦：###小程式學(xué)習(xí)教學(xué)###】####

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