微信小程式WXML模板語法總結

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

【相關學習推薦：小程式學習教學】

WXML 範本語法- #資料綁定

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

① 在 data 中定義資料

② 在 WXML 中使用資料

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

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

3. Mustache 語法的格式

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

#4. Mustache 語法的應用場景 

1. 綁定內容
2. #綁定屬性
3. 運算（三元運算、算術運算等等）

 5. #動態綁定內容

##        頁面的資料如下：

             ##                

 

6。

##         

頁面的資料如下：

                

        頁面中

7.

三元運算         頁的資料如下：

#                

        

##  

8.

算數運算

#         #WXML

範本語法-

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

        事件是為#渲染層到邏輯層的通訊方式。透過事件可以將使用者在渲染層產生的行為，回饋到邏輯層進行業務的處理。

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

bindtap 或事件

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

#

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

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

type#StringtimeStamp#Integer#targetObjectcurrentTargetObjectdetailObject

屬性	類型	#說明
#事件類型
頁面打開到觸發事件所經過的毫秒數
觸發事件的元件的一些屬性值集合
#目前元件的一些屬性值集合
#####額外的資訊#########################touches######	Array	#觸控事件，目前停留在螢幕中的觸控點資訊的陣列
changedTouches	#Array

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

4. target 與currentTarget 的差異 

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

點擊內部的按鈕時，點擊事件以冒泡#的方式向外擴散，也會觸發外層view 的tap 事件處理函數。

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

##1

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

e.target

是內部的按鈕元件2.currentTarget 指向的是目前正在觸發事件的那個元件，因此，e.currentTarget 是目前的

view

元件

#5. bindtap

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

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

tap

觸摸事件，語法如下：

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

e） 來接收：

######        ###### #####################

6. data

##中的資料賦值 

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

#        

# 7. 事件傳參

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

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

的事件處理函數。

        可以提供元件

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

## 1  info 會被解析為

參數 的名字#2 數值

2

會被解析為

參數的值在事件處理函數中，透過

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

     

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

        實現步驟：

#① 定義資料

② 渲染結構

③ 美化樣式

④ 綁定 # input 事件處理函數

定義資料：

        # 

渲染結構：

        

 「美化樣式：

      綁定

input 事件處理函數：

        # ##        # WXML 範本語法

-

條件渲染

 ：

     1. wx:if        #        ##        

##        

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

}}"

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

     

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

        #2. 結合#

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

        

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

3. hidden 

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

4. wx:if #與 hidden 的比較 

        ① 運作方式不同

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

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

②

使用建議

1 頻繁切換1 

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

wx:if

#搭配

wx:elif

、

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

範本語法##- 清單渲染

 #########  ###1. wx:for##################        ###########        ######## #透過######wx:for ######可以依照指定的數組，循環渲染重複的元件結構，語法範例如下：############        ##### #####

        預設情況下，目前循環項目的索引以index 表示；當前循環項以item 表示。

2. 手動指定索引和目前項目的變數名稱 * 

    1 使用wx:for-index 可以指定目前循環項目的索引的變數名稱

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

範例程式碼如下：

#        

##3. wx:key

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

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

##### #        ############【相關學習推薦：###小程式學習教學###】####

以上是微信小程式WXML模板語法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！