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

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

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

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

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

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

3. Mustache 語法的格式

把data中的數(shù)據(jù)綁定到頁面中渲染，使用 Mustache 語法（雙大括號）將變量包起來即可。語法格式為：

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

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

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

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

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

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

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

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

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

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

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

7. 三元運算

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

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

8. 算數(shù)運算

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

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

2.事件綁定

1. 什么是事件

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

2. 小程序中常用的事件

3. 事件對象的屬性列表

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

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

target 是觸發(fā)該事件的源頭組件，而 currentTarget 則是當(dāng)前事件所綁定的組件。舉例如下：

點擊內(nèi)部的按鈕時，點擊事件以冒泡的方式向外擴散，也會觸發(fā)外層 view 的 tap 事件處理函數(shù)。

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

• e.target 指向的是觸發(fā)事件的源頭組件，因此，e.target 是內(nèi)部的按鈕組件
• e.currentTarget 指向的是當(dāng)前正在觸發(fā)事件的那個組件，因此，e.currentTarget 是當(dāng)前的 view

5. bindtap 的語法格式

在小程序中，不存在 HTML 中的 onclick 鼠標(biāo)點擊事件，而是通過 tap 事件來響應(yīng)用戶的觸摸行為。

① 通過 bindtap，可以為組件綁定 tap 觸摸事件，語法如下：

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

② 在頁面的 .js 文件中定義對應(yīng)的事件處理函數(shù)，事件參數(shù)通過形參 event（一般簡寫成 e） 來接收：

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

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

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

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

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

7. 事件傳參

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

常工作：

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

因為小程序會把 bindtap 的屬性值，統(tǒng)一當(dāng)作事件名稱來處理，相當(dāng)于要調(diào)用一個名稱為 btnHandler(123)

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

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

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

最終：

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

在事件處理函數(shù)中，通過 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 的語法格式

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

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

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

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

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

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

實現(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是變化過后，文本最新的值
    this.setData({
      msg:e.detail.value
    })
  },

3.條件渲染

1. wx:if

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

也可以用 wx:elif 和 wx:else 來添加 else 判斷：

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

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

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

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

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

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

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

3. hidden

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

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

4. wx:if 與 hidden 的對比

① 運行方式不同

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

② 使用建議

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

4.列表渲染

1. wx:for

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

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

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

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

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

示例代碼如下：

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

3. wx:key 的使用

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

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

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

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