本篇文章給大家?guī)?lái)了關(guān)于微信小程序的相關(guān)知識(shí),其中主要介紹了關(guān)于wxml模板語(yǔ)法的相關(guān)內(nèi)容,包括了數(shù)據(jù)綁定、事件綁定、條件渲染、列表渲染等等問(wèn)題,下面一起來(lái)看一下,希望對(duì)大家有幫助。
【相關(guān)學(xué)習(xí)推薦:小程序?qū)W習(xí)教程】
① 在 data 中定義數(shù)據(jù)
② 在 WXML 中使用數(shù)據(jù)
在頁(yè)面對(duì)應(yīng)的 .js 文件中,把數(shù)據(jù)定義到 data 對(duì)象中即可:
????????把data中的數(shù)據(jù)綁定到頁(yè)面中渲染,使用 Mustache 語(yǔ)法(雙大括號(hào))將變量包起來(lái)即可。類(lèi)似于vue中的插值表達(dá)式,語(yǔ)法格式為:
????????頁(yè)面的數(shù)據(jù)如下:
????????????????
????????頁(yè)面的結(jié)構(gòu)如下:
?????????????????
?????????頁(yè)面的數(shù)據(jù)如下:
????????????????
????????頁(yè)面的結(jié)構(gòu)如下:
????????????????
????????頁(yè)面的數(shù)據(jù)如下:
????????????????
????????頁(yè)面的結(jié)構(gòu)如下:
?????????????????
????????
????????事件是渲染層到邏輯層的通訊方式。通過(guò)事件可以將用戶在渲染層產(chǎn)生的行為,反饋到邏輯層進(jìn)行業(yè)務(wù)的處理。
類(lèi)型 |
綁定方式 |
事件描述 |
tap |
bindtap 或 bind:tap |
手指觸摸后馬上離開(kāi),類(lèi)似于 HTML 中的 click 事件 |
input |
bindinput 或 bind:input |
文本框的輸入事件 |
change |
bindchange 或 bind:change |
狀態(tài)改變時(shí)觸發(fā) |
???????當(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ù)組 |
????????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 組件
在小程序中,不存在 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)接收:
?????????
????????通過(guò)調(diào)用 this.setData(dataObject) 方法,可以給頁(yè)面 data 中的數(shù)據(jù)重新賦值,示例如下:
????????
????????小程序中的事件傳參比較特殊,不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)。例如,下面的代碼將不能正常工作:
????????
因?yàn)樾〕绦驎?huì)把 bindtap 的屬性值,統(tǒng)一當(dāng)作事件名稱來(lái)處理,相當(dāng)于要調(diào)用一個(gè)名稱為 btnHandler(123) 的事件處理函數(shù)。
????????可以為組件提供 data-* 自定義屬性傳參,其中 * 代表的是參數(shù)的名字,示例代碼如下:
最終:
1? info 會(huì)被解析為 參數(shù) 的名字
2 數(shù)值 2 會(huì)被解析為 參數(shù)的值
在事件處理函數(shù)中,通過(guò) event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值,示例代碼如下:
?? ??
?????????在小程序中,通過(guò) input 事件來(lái)響應(yīng)文本框的輸入事件,語(yǔ)法格式如下:
① 通過(guò) bindinput ,可以為文本框綁定輸入事件:
? ??
????????②在頁(yè)面的 .js 文件中定義事件處理函數(shù):?
? ???
????????實(shí)現(xiàn)步驟:
① 定義數(shù)據(jù)
② 渲染結(jié)構(gòu)
③ 美化樣式
④ 綁定 input 事件處理函數(shù)
定義數(shù)據(jù):
?????????
渲染結(jié)構(gòu):
?????????
美化樣式:
?????????
綁定 input 事件處理函數(shù):
?????????
????????在小程序中,使用 wx:if="{{condition}}" 來(lái)判斷是否需要渲染該代碼塊:
? ? ?
????????也可以用 wx:elif 和 wx:else 來(lái)添加 else 判斷:
????????
????????如果要一次性控制多個(gè)組件的展示與隱藏,可以使用一個(gè)
????????
注意:
????????在小程序中,直接使用 hidden="{{ condition }}" 也能控制元素的顯示與隱藏:
????????
????????①運(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)行展示與隱藏的切換
????????通過(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 表示。
? ? 1?使用 wx:for-index 可以指定當(dāng)前循環(huán)項(xiàng)的索引的變量名
2 使用 wx:for-item 可以指定 當(dāng)前項(xiàng) 的變量名
示例代碼如下:
????????
????????類(lèi)似于 Vue 列表渲染中的 :key,小程序在實(shí)現(xiàn)列表渲染時(shí),也建議為渲染出來(lái)的列表項(xiàng)指定唯一的 key 值,從而提高渲染的效率,示例代碼如下:
????????
【相關(guān)學(xué)習(xí)推薦:小程序?qū)W習(xí)教程】
以上就是微信小程序WXML模板語(yǔ)法總結(jié)的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!
微信是一款手機(jī)通信軟件,支持通過(guò)手機(jī)網(wǎng)絡(luò)發(fā)送語(yǔ)音短信、視頻、圖片和文字。微信可以單聊及群聊,還能根據(jù)地理位置找到附近的人,帶給大家全新的移動(dòng)溝通體驗(yàn),有需要的小伙伴快來(lái)保存下載體驗(yàn)吧!
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)