国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

微信小程序WXML模板語(yǔ)法總結(jié)

WBOY
發(fā)布: 2022-05-18 11:43:25
轉(zhuǎn)載
4791人瀏覽過(guò)

本篇文章給大家?guī)?lái)了關(guān)于微信小程序的相關(guān)知識(shí),其中主要介紹了關(guān)于wxml模板語(yǔ)法的相關(guān)內(nèi)容,包括了數(shù)據(jù)綁定、事件綁定、條件渲染、列表渲染等等問(wèn)題,下面一起來(lái)看一下,希望對(duì)大家有幫助。

微信小程序WXML模板語(yǔ)法總結(jié)

【相關(guān)學(xué)習(xí)推薦:小程序?qū)W習(xí)教程

WXML 模板語(yǔ)法 - 數(shù)據(jù)綁定

1.數(shù)據(jù)綁定的基本原則

data 中定義數(shù)據(jù)

WXML 中使用數(shù)據(jù)

2. data 中定義頁(yè)面的數(shù)據(jù)

在頁(yè)面對(duì)應(yīng)的 .js 文件中,把數(shù)據(jù)定義到 data 對(duì)象中即可:

3. Mustache 語(yǔ)法的格式

????????data中的數(shù)據(jù)綁定到頁(yè)面中渲染,使用 Mustache 語(yǔ)法(雙大括號(hào))將變量包起來(lái)即可。類(lèi)似于vue中的插值表達(dá)式,語(yǔ)法格式為:

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

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

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

????????頁(yè)面的數(shù)據(jù)如下:

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

????????頁(yè)面的結(jié)構(gòu)如下:

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

6. 動(dòng)態(tài)綁定屬性?

?????????頁(yè)面的數(shù)據(jù)如下:

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

????????頁(yè)面的結(jié)構(gòu)如下:

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

7. 三元運(yùn)算?

????????頁(yè)面的數(shù)據(jù)如下:

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

????????頁(yè)面的結(jié)構(gòu)如下:

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

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

????????

WXML 模板語(yǔ)法 - 事件綁定?:

1. 什么是事件

????????事件是渲染層到邏輯層的通訊方式。通過(guò)事件可以將用戶在渲染層產(chǎn)生的行為,反饋到邏輯層進(jìn)行業(yè)務(wù)的處理。

2. 小程序中常用的事件?

類(lèi)型

綁定方式

事件描述

tap

bindtap bind:tap

手指觸摸后馬上離開(kāi),類(lèi)似于 HTML 中的 click 事件

input

bindinput bind:input

文本框的輸入事件

change

bindchange bind:change

狀態(tài)改變時(shí)觸發(fā)

?3. 事件對(duì)象的屬性列表

???????當(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ù)組

4. target currentTarget 的區(qū)別?

????????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 組件

5. bindtap 的語(yǔ)法格式?

在小程序中,不存在 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)接收:

?????????

6. 在事件處理函數(shù)中為 data 中的數(shù)據(jù)賦值?

????????通過(guò)調(diào)用 this.setData(dataObject) 方法,可以給頁(yè)面 data 中的數(shù)據(jù)重新賦值,示例如下:

????????

7. 事件傳參?

????????小程序中的事件傳參比較特殊,不能在綁定事件的同時(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ù)的值,示例代碼如下:

?? ??

8. bindinput 的語(yǔ)法格式?

?????????在小程序中,通過(guò) input 事件來(lái)響應(yīng)文本框的輸入事件,語(yǔ)法格式如下:

通過(guò) bindinput ,可以為文本框綁定輸入事件:

? ??

????????②在頁(yè)面的 .js 文件中定義事件處理函數(shù):?

? ???

9. 實(shí)現(xiàn)文本框和 data 之間的數(shù)據(jù)同步?

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

定義數(shù)據(jù)

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

美化樣式

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

定義數(shù)據(jù):

?????????

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

?????????

美化樣式:

?????????

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

?????????

WXML 模板語(yǔ)法 - 條件渲染?:

?????1. wx:if

????????在小程序中,使用 wx:if="{{condition}}" 來(lái)判斷是否需要渲染該代碼塊:

? ? ?

????????也可以用 wx:elif wx:else 來(lái)添加 else 判斷:

????????

2. 結(jié)合 使用 wx:if?

????????如果要一次性控制多個(gè)組件的展示與隱藏,可以使用一個(gè) 標(biāo)簽將多個(gè)組件包裝起來(lái),并在標(biāo)簽上使用 wx:if 控制屬性,示例如下:

????????

注意: 并不是一個(gè)組件,它只是一個(gè)包裹性質(zhì)的容器,不會(huì)在頁(yè)面中做任何渲染。

3. hidden?

????????在小程序中,直接使用 hidden="{{ condition }}" 也能控制元素的顯示與隱藏:

????????

4. wx:if hidden 的對(duì)比?

????????①運(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)行展示與隱藏的切換

WXML 模板語(yǔ)法 - 列表渲染?

??1. wx:for

????????通過(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 表示。

2. 手動(dòng)指定索引和當(dāng)前項(xiàng)的變量名*?

? ? 1?使用 wx:for-index 可以指定當(dāng)前循環(huán)項(xiàng)的索引的變量名

2 使用 wx:for-item 可以指定 當(dāng)前項(xiàng) 的變量名

示例代碼如下:

????????

3. wx:key 的使用?

????????類(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)文章!

微信app下載
微信app下載

微信是一款手機(jī)通信軟件,支持通過(guò)手機(jī)網(wǎng)絡(luò)發(fā)送語(yǔ)音短信、視頻、圖片和文字。微信可以單聊及群聊,還能根據(jù)地理位置找到附近的人,帶給大家全新的移動(dòng)溝通體驗(yàn),有需要的小伙伴快來(lái)保存下載體驗(yàn)吧!

下載
來(lái)源:CSDN網(wǎng)
本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn),版權(quán)歸原作者所有,本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請(qǐng)聯(lián)系admin@php.cn
最新問(wèn)題
開(kāi)源免費(fèi)商場(chǎng)系統(tǒng)廣告
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長(zhǎng)!
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)