1.數(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)即可。語(yǔ)法格式為：

<view>{{要綁定的數(shù)據(jù)名稱}}</view>

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

Mustache 語(yǔ)法的主要應(yīng)用場(chǎng)景如下：

• 綁定內(nèi)容
• 綁定屬性
• 運(yùn)算（三元運(yùn)算、算術(shù)運(yùn)算等）

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

// pages/list/list.js
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    info:"hello weixin "
  },

<!--pages/list/list.wxml-->
<view>{{info}}</view>

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

// pages/list/list.js
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    imgSrc:"/images/1.jpg"
  },

<!--pages/list/list.wxml-->
<image src="{{imgSrc}}"></image>

7. 三元運(yùn)算

// pages/list/list.js
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    randomNUm:Math.random()*10
  },

<!--pages/list/list.wxml-->
<view>{{randomNUm>5?'數(shù)字大于等于5':'數(shù)字小于5'}}</view>

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

// pages/list/list.js
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    randomNUm:Math.random().toFixed(2)//生成帶兩位小數(shù)的隨機(jī)數(shù)
  },

<!--pages/list/list.wxml-->
<view>{{randomNUm*100}}</view>

2.事件綁定

1. 什么是事件

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

2. 小程序中常用的事件

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

當(dāng)事件回調(diào)觸發(fā)的時(shí)候，會(huì)收到一個(gè)事件對(duì)象 event，它的詳細(xì)屬性如下表所示：

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ō)：

• e.target 指向的是觸發(fā)事件的源頭組件，因此，e.target 是內(nèi)部的按鈕組件
• e.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ǔ)法如下：

<!--pages/list/list.wxml-->
<button type="primary" bindtap="btnTaphandler">按鈕</button>

② 在頁(yè)面的 .js 文件中定義對(duì)應(yīng)的事件處理函數(shù)，事件參數(shù)通過(guò)形參 event（一般簡(jiǎn)寫(xiě)成 e） 來(lái)接收：

  // 定義按鈕的事件的處理函數(shù)
  btnTaphandler(e){
    console.log(e);
  },

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

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

<!--pages/list/list.wxml-->
<button type="primary" bindtap="countChange">按鈕</button>

// pages/list/list.js
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
   count:0
  },
  //+1按鈕的點(diǎn)擊事件
  countChange(){
    this.setData({
      count:this.data.count+1
    })
  },

7. 事件傳參

小程序中的事件傳參比較特殊，不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)。例如，下面的代碼將不能正

常工作：

<button type="primary" bindtap="countChange(123)">按鈕</button>

因?yàn)樾〕绦驎?huì)把 bindtap 的屬性值，統(tǒng)一當(dāng)作事件名稱來(lái)處理，相當(dāng)于要調(diào)用一個(gè)名稱為 btnHandler(123)

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

可以為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數(shù)的名字，示例代碼如下：

<button type="primary" bindtap="countChange" data-info="{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->{2}}">按鈕</button>

最終：

• info 會(huì)被解析為參數(shù)的名字
• 數(shù)值 2 會(huì)被解析為參數(shù)的值

在事件處理函數(shù)中，通過(guò) event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值，示例代碼如下：

<!--pages/list/list.wxml-->
<button type="primary" bindtap="countChange" data-info="{{2}}">按鈕</button>

  countChange(e){
    console.log(e);
    console.log(e.target.dataset);
    console.log(e.target.dataset.info);
  },

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

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

① 通過(guò) bindinput，可以為文本框綁定輸入事件：

<!--pages/list/list.wxml-->
<input bindinput="inputhandler"/>

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

  //input輸入框處理函數(shù)
  inputhandler(e){
    // e.detail.value是變化過(guò)后，文本最新的值
    console.log(e.detail.value);
  },

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

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

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

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

③ 美化樣式

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

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

page({
	data:{
		msg:'hello'
	}
})

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

<!--pages/list/list.wxml-->
<input value="{{msg}}" bindinput="inputhandler"/>

3.美化樣式

/* pages/list/list.wxss */
input{
  border: 1px solid #eee;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}

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

  //input輸入框處理函數(shù)
  inputhandler(e){
    // e.detail.value是變化過(guò)后，文本最新的值
    this.setData({
      msg:e.detail.value
    })
  },

3.條件渲染

1. wx:if

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

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

<!--pages/list/list.wxml-->
<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: { 
    type:1
  },

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

如果要一次性控制多個(gè)組件的展示與隱藏，可以使用一個(gè) <block></block> 標(biāo)簽將多個(gè)組件包裝起來(lái)，并在

block 標(biāo)簽上使用 wx:if 控制屬性，示例如下：

<!--pages/list/list.wxml-->
<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

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

3. hidden

在小程序中，直接使用 hidden=“{{ condition }}” 也能控制元素的顯示與隱藏：

<!--pages/list/list.wxml-->
<view hidden="{{flag}}">條件為true隱藏元素,否則顯示</view>

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

① 運(yùn)行方式不同

• wx:if 以動(dòng)態(tài)創(chuàng)建和移除元素的方式，控制元素的展示與隱藏
• hidden 以切換樣式的方式（display: none/block;），控制元素的顯示與隱藏

② 使用建議

• 頻繁切換時(shí)，建議使用 hidden
• 控制條件復(fù)雜時(shí)，建議使用wx:if 搭配 wx:elif、wx:else進(jìn)行展示與隱藏的切換

4.列表渲染

1. wx:for

通過(guò) wx:for 可以根據(jù)指定的數(shù)組，循環(huán)渲染重復(fù)的組件結(jié)構(gòu)，語(yǔ)法示例如下

<!--pages/list/list.wxml-->
<view wx:for="{{arr}}">
  索引：{{index}},item項(xiàng)是:{{item}}
</view>

默認(rèn)情況下，當(dāng)前循環(huán)項(xiàng)的索引用 index 表示；當(dāng)前循環(huán)項(xiàng)用 item 表示。

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

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

示例代碼如下：

<view wx:for="{{arr}}" wx:for-index="id" wx:for-item="itemname">
  索引：{{id}},item項(xiàng)是:{{itemname}}
</view>

3. wx:key 的使用

類(lèi)似于 Vue 列表渲染中的 :key，小程序在實(shí)現(xiàn)列表渲染時(shí)，也建議為渲染出來(lái)的列表項(xiàng)指定唯一的 key 值，

從而提高渲染的效率，示例代碼如下：

<view wx:for="{{arr}}" wx:key="id">
 {{id}}
</view>

到此這篇關(guān)于微信小程序開(kāi)發(fā)WXML模板語(yǔ)法基礎(chǔ)教程的文章就介紹到這了,更多相關(guān)小程序WXML模板內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論