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

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

WXML 範(fàn)本語法- #資料綁定

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

① 在 data 中定義資料

② 在 WXML 中使用資料

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

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

3. Mustache 語法的格式

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

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

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

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

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

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

頁面的資料如下：

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

????????頁面中

7.

三元運(yùn)算?????????頁的資料如下：

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

????????

##??

8.

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

#???????? #WXML

範(fàn)本語法-

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

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

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

bindtap 或事件

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

#

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

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

type#StringtimeStamp#Integer#targetObjectcurrentTargetObjectdetailObject

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

########################################### #######觸控事件，目前變化的觸控點(diǎn)資訊的陣列###################

4. target 與currentTarget 的差異?

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

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

此時(shí)，對(duì)於外層的view 來說：

##1

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

e.target

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

view

元件

#5. bindtap

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

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

tap

觸摸事件，語法如下：

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

e） 來接收：

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

6. data

##中的資料賦值?

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

#????????

# 7. 事件傳參

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

????????因?yàn)樾〕淌綍?huì)把bindtap 的屬性值，統(tǒng)一當(dāng)作事件名稱來處理，相當(dāng)於要呼叫一個(gè)名稱為btnHandler(123)

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

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

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

## 1? info 會(huì)被解析為

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

2

會(huì)被解析為

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

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

? ???

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

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

#① 定義資料

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

③ 美化樣式

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

定義資料：

????????#?

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

????????

?「美化樣式：

??????綁定

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

????????#?##????????#?WXML 範(fàn)本語法

-

條件渲染

?：

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

##????????

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

}}"

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

? ? ?

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

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

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

????????

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

3. hidden?

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

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

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

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

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

②

使用建議

1?頻繁切換1?

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

wx:if

#搭配

wx:elif

、

##wx:else 進(jìn)行展示與隱藏的切換WXML

範(fàn)本語法##- 清單渲染

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

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

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

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

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

範(fàn)例程式碼如下：

#????????

##3. wx:key

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

提高渲染的效率#，範(fàn)例程式碼如下：

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

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