1. 事件系統(tǒng)

1.1 事件綁定和事件對象

小程序中綁定事件與在網(wǎng)頁開發(fā)中綁定事件幾乎一致，只不過在小程序不能通過 on 的方式綁定事件，也沒有 click 等事件，小程序中綁定事件使用 bind 方法，click 事件也需要使用 tap 事件來進(jìn)行代替，綁定事件的方式有兩種：
第一種方式：bind:事件名，bind 后面需要跟上冒號，冒號后面跟上事件名，例如： <view bind:tap=“fnName”></view>
第二種方式：bind事件名，bind 后面直接跟上事件名，例如： <view bindtap=“fnName”></view>。

事件處理函數(shù)需要寫到 .js 文件中，在 .js 文件中需要調(diào)用小程序提供的 Page 方法來注冊小程序的頁面，我們可以直接在 Page 方法
中創(chuàng)建事件處理函數(shù)。

1.2 事件分類以及阻止事件冒泡

事件分為 冒泡事件 和 非冒泡事件：

• 冒泡事件：當(dāng)一個組件的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。
• 非冒泡事件：當(dāng)一個組件的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞。

使用 bind 綁定的事件，會觸發(fā)事件冒泡，如果想阻止事件冒泡，可以使用 catch 來綁定事件。

1.3 事件傳參-data-*自定義數(shù)據(jù)

事件傳參：在觸發(fā)事件時，將一些數(shù)據(jù)作為參數(shù)傳遞給事件處理函數(shù)的過程，就是事件傳參。

在微信小程序中，我們經(jīng)常會在組件上添加一些自定義數(shù)據(jù)，然后在事件處理函數(shù)中獲取這些自定義數(shù)據(jù)，從而完成業(yè)務(wù)邏輯的開發(fā)。
在組件上 通過 data-* 的方式 定義需要傳遞的數(shù)據(jù)，其中 * 是自定義的屬性，例如：<view data-id=“100” bindtap=“handler” />，然后通過事件對象進(jìn)行獲取自定義數(shù)據(jù)。

注意事項：

1. event.target 是指事件觸發(fā)者， event. currentTarget 是指事件綁定者。
2. 使用 data- 方法傳遞參數(shù)的時候，多個單詞由連字符 - 連接，連字符寫法會轉(zhuǎn)換成駝峰寫法。
3. 使用 data- 方法傳遞參數(shù)的時候，而大寫字符會自動轉(zhuǎn)成小寫字符。

1.4 事件傳參-mark 自定義數(shù)據(jù)

小程序進(jìn)行事件傳參的時候，除了使用 data-* 屬性傳遞參數(shù)外，還可以 使用 mark 標(biāo)記傳遞參數(shù)。
mark 是一種自定義屬性，可以在組件上添加，用于來識別具體觸發(fā)事件的 target 節(jié)點。同時 mark 還可以用于承載一些自定義數(shù)據(jù)。
在組件上使用 mark:自定義屬性 的方式將數(shù)據(jù)傳遞給事件處理函數(shù)，例如：<view mark:id=“100” bindtap=“handler” />，然后通過事件對象進(jìn)行獲取自定義數(shù)據(jù)。

mark 和 data-* 很相似，主要區(qū)別在于：

• mark 包含從觸發(fā)事件的節(jié)點到根節(jié)點上所有的 mark: 屬性值
• currentTarget.dataset 或者 target.dataset 只包含事件綁定者 或者 事件觸發(fā)者那一個節(jié)點的 data-* 值。

2. WXML 語法

2.1 聲明和綁定數(shù)據(jù)

小程序頁面中使用的數(shù)據(jù)均需要在 Page() 方法的 data 對象中進(jìn)行聲明定義
在將數(shù)據(jù)聲明好以后，在 WXML 使用 Mustache 語法（雙大括號 {{ }}）將變量包起來，從而將數(shù)據(jù)綁定
在 {{ }} 內(nèi)部可以做一些簡單的運算，支持如下幾種方式：

1. 算數(shù)運算
2. 三元運算
3. 邏輯判斷
4. 其他…

注意事項：在 {{ }} 語法中，只能寫表達(dá)式，不能寫語句，也不能調(diào)用 js 相關(guān)的方法。

2.2 setData() 修改數(shù)據(jù)

小程序中修改數(shù)據(jù)不推薦通過賦值的方式進(jìn)行修改，通過賦值的方式修改數(shù)據(jù)無法改變頁面的數(shù)據(jù)。
而是要通過調(diào)用 setData() 方法進(jìn)行修改，setData() 方法接收對象作為參數(shù)， key 是需要修改的數(shù)據(jù)，value 是最新的值。
setData() 方法有兩個作用：

1. 更新數(shù)據(jù)
2. 驅(qū)動視圖更新

2.3 setData()

1. 修改對象類型數(shù)據(jù)

1. 新增 單個 / 多個屬性
2. 修改 單個 / 多個屬性
3. 刪除 單個 / 多個 屬性

2. 修改數(shù)組類型數(shù)據(jù)

1. 新增數(shù)組元素
2. 修改數(shù)組元素
3. 刪除數(shù)組元素

2.4 簡易雙向數(shù)據(jù)綁定

在 WXML 中，普通屬性的綁定是單向的，例如：<input value="{{value}}" />
如果希望用戶輸入數(shù)據(jù)的同時改變 data 中的數(shù)據(jù)，可以借助簡易雙向綁定機制。在對應(yīng)屬性之前添加 model: 前綴即可：
例如 <input model:value="{{value}}" />。

注意事項：簡易雙向綁定的屬性值如下限制：

1. 只能是一個單一字段的綁定，例如：錯誤用法：<input model:value="值為 {{value}}" />。
2. 尚不能寫 data 路徑，也就是不支持?jǐn)?shù)組和對象，例如：錯誤用法：<input model:value="{{ a.b }}" />。

2.5 列表渲染-基本使用

列表渲染：就是指通過循環(huán)遍歷一個數(shù)組或?qū)ο?，將其中的每個元素渲染到頁面上。
在組件上使用 wx:for 屬性綁定一個數(shù)組或?qū)ο?，既可使用每一項?shù)據(jù)重復(fù)渲染當(dāng)前組件，每一項的變量名默認(rèn)為 item，下標(biāo)變量名默認(rèn)為 index。

在使用 wx:for 進(jìn)行遍歷的時候，建議加上 wx:key 屬性， wx:key 的值以兩種形式提供：

1. 字符串：代表需要遍歷的 array 中 item 的某個屬性，該屬性的值需要是列表中唯一的字符串或數(shù)字，且不能動態(tài)改變
2. 保留關(guān)鍵字 *this 代表在 for 循環(huán)中的 item 本身，當(dāng) item 本身是一個唯一的字符串或者數(shù)字時可以使用。

注意事項：

1. 如果不加 wx:key，會報一個 warning， 如果明確知道該列表是靜態(tài)，即以后數(shù)據(jù)不會改變，或者不必關(guān)注其順序，可以選擇忽略。
2. 在給 wx:key 添加屬性值的時候，不需要使用雙大括號語法，直接使用遍歷的 array 中 item 的某個屬性。

2.6 列表渲染-進(jìn)階用法

1. 如果需要對默認(rèn)的變量名和下標(biāo)進(jìn)行修改，可以使用 wx:for-item 和 wx:for-index
   • 使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名。
   • 使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名。
2. 將 wx:for 用在<block /> 標(biāo)簽上，以渲染一個包含多個節(jié)點的結(jié)構(gòu)塊
   • <block /> 并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
   • <block /> 標(biāo)簽在 wxml 中可以用于組織代碼結(jié)構(gòu)，支持列表渲染、條件渲染等。

2.7 條件渲染

條件渲染主要用來控制頁面結(jié)構(gòu)的展示和隱藏，在微信小程序中實現(xiàn)條件渲染有兩種方式：

1. 使用 wx:if、wx:elif、wx:else 屬性組
2. 使用 hidden 屬性

wx:if 和 hidden 二者的區(qū)別：文章來源地址http://www.zghlxwxcb.cn/news/detail-854891.html

1. wx:if ：當(dāng)條件為 true 時將結(jié)構(gòu)展示出來，否則結(jié)構(gòu)不會進(jìn)行展示，通過 移除/新增節(jié)點 的方式來實現(xiàn)。
2. hidden ：當(dāng)條件為 true 時會將結(jié)構(gòu)隱藏，否則結(jié)構(gòu)會展示出來，通過 display 樣式屬性 來實現(xiàn)的。

到了這里，關(guān)于微信小程序（4）- 事件系統(tǒng)和模板語法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！