微信小程序怎么設(shè)置WXML

這篇文章主要講解了“微信小程序怎么設(shè)置WXML”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“微信小程序怎么設(shè)置WXML”吧！

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

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

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

在頁(yè)面對(duì)應(yīng)的.js文件中，把數(shù)據(jù)定義到data對(duì)象中，如下圖在home頁(yè)面中的home.js中定義home頁(yè)面的data數(shù)據(jù)：

Page({
  data: {
    swiperList:[],         //存放輪播圖數(shù)據(jù)的列表
    str:'Hello world',     //定義字符串類型
    boolean:true,          //定義boolean類型
    data :3.2412,         //定義數(shù)據(jù)類型
    imgSrc:'http://www.ithima.com/images/logo.png',
    arr:[{msg:'hello '},'msg1:world'] //定義數(shù)組類型數(shù)據(jù)
  },

使用Mustache語(yǔ)法（）將data中的數(shù)據(jù)綁定到頁(yè)面中并進(jìn)行渲染：

Mustache語(yǔ)法可以用于動(dòng)態(tài)綁定內(nèi)容、綁定屬性和進(jìn)行數(shù)據(jù)運(yùn)算（三元運(yùn)算、算術(shù)運(yùn)算等）

<view>{{str}}</view> //動(dòng)態(tài)綁定內(nèi)容
<image src='{{imgSrc}}'></image>//動(dòng)態(tài)綁定屬性
<view> {{data>=5?'張三':'李四'}}</view>//綁定三元運(yùn)算后的結(jié)果到頁(yè)面

二、WXML模板語(yǔ)法--事件綁定

事件是渲染層到邏輯層的通訊方式。通過(guò)事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進(jìn)行業(yè)務(wù)的處理，類似于html中有一個(gè)點(diǎn)擊事件onclick，這個(gè)點(diǎn)擊事件對(duì)應(yīng)的行為方法是'getData’,當(dāng)用戶在渲染層點(diǎn)擊'getData'方法時(shí)，邏輯會(huì)根據(jù)getDta方法中的內(nèi)容進(jìn)行數(shù)據(jù)處理。

小程序常用綁定事件

小程序常用事件對(duì)象的屬性列表

注意：target和currentTarget的區(qū)別：target 是觸發(fā)該事件的源頭組件，而 currentTarget 則是當(dāng)前事件所綁定的組件，只對(duì)當(dāng)前組件有用。

bindtap的語(yǔ)法格式

小程序中沒(méi)有htnl中的onclick點(diǎn)擊事件，通過(guò)tap事件響應(yīng)用戶的行為，通過(guò)bindtap為用戶綁定btnTapHandler事件示例如下：

//.wxml文件中
<view type="primary" bindtap="btnTapHandler">綁定按鈕事件</view>
//.js文件中定義對(duì)應(yīng)的事件處理函數(shù)，事件參數(shù)通過(guò)形參 event（簡(jiǎn)寫(xiě)e） 來(lái)接收
  btnTapHandler(e){
    console.log(e)
  },

事件傳參

微信小程序不能在綁定時(shí)間的額時(shí)候，同時(shí)為事件處理函數(shù)傳參。因?yàn)樾〕绦驎?huì)把 bindtap 的屬性值，統(tǒng)一當(dāng)作事件名稱來(lái)處理，相當(dāng)于要調(diào)用一個(gè)名稱為 btnHandler(123) 的事件處理函數(shù)。微信小程序傳參的正確方法應(yīng)該時(shí)為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數(shù)的名字，如:

//錯(cuò)誤代碼
<button type="primary" bindtap="btnTapHandler（123）">事件傳參</button>
//正確代碼
<button type="primary" bindtap="btnTapHandler" data-info="{{23}}">事件傳參</button>
//其中info被解析為參數(shù)的名字，23為傳遞的參數(shù)的值

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

  //頁(yè)面的.js文件中
  btnTapHandler(event){
    //dataset是一個(gè)包含了data-*傳過(guò)來(lái)的所有的參數(shù)項(xiàng)的對(duì)象
    console.log(event.target.dataset)
    //通過(guò)dataset訪問(wèn)參數(shù)項(xiàng)info的值
    console.log(event.target.dataset.info)
  }

bindinput的語(yǔ)法格式

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

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

<input bindinput="inputHandler"><input>

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

inputHandler(e){
  //獲取并輸出文本框中最新的值
  console.log(e.detail.value)
}

案例一：實(shí)現(xiàn)文本框和data之間數(shù)據(jù)同步

步驟：定義數(shù)據(jù)->渲染結(jié)構(gòu)->美化樣式->綁定input事件處理函數(shù)

//第一步：.js文件中定義數(shù)據(jù)
  data: {
    count:0,
    message:'張三，我是李四'
  },  data: {
    count:0,
    message:'張三，我是李四'
  },
//第二步：.wxml文件中渲染結(jié)構(gòu)
<input value="{{message}}" bindinput="inputHandler"></input>
//第三步：.wxss文件中美化樣式
input{
 border:1px solid #aaa;
 padding: 10px;
 margin:20px;
}
//第四步:.js文件中綁定事件處理函數(shù)
inputHandler(e){
   this.setData({
   //獲得文本框中最新的值
   console.log(e.detail.value)
})
}

三、WXML模板語(yǔ)法--條件渲染

1、wx:if

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

//如果滿足條件，頁(yè)面中展示“True”
<view wx:if="{{condition}}"> True</view>

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

//如果num是1,頁(yè)面顯示“男”，如果是2，顯示“女”，否則顯示“保密”
<view wx:if="{{num==1}}">男</view>
<view wx:elif="{{num==2}}">女</view>
<view wx:else>保密</view>

2、結(jié)合<block>使用wx:if

如果要一次性控制多個(gè)組件的展示與隱藏，可以使用一個(gè) <block></block> 標(biāo)簽將多個(gè)組件包裝起來(lái)，并在<block> 標(biāo)簽上使用 wx:if 控制屬性，block是一個(gè)包裹性質(zhì)的容器，不對(duì)頁(yè)面進(jìn)行任何渲染，示例如下：

//如果為真,同時(shí)顯示“V１”和“V2”,如果位假，同時(shí)隱藏“V1”和“V2”
<block wx:if="{{true}}">
<view> V1</view>
<view> V2</view>
</block>

3、hidden隱藏

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

<view hidden="{{condition}}">條件為T(mén)rue時(shí)，隱藏，為false時(shí)顯示</view>

注意：wx:if 以動(dòng)態(tài)創(chuàng)建和移除元素的方式，控制元素的展示與隱藏 hidden 以切換樣式的方式（display: none/block;），控制元素的顯示與隱藏. 需要頻繁切換時(shí)，建議使用 hidden 控制條件復(fù)雜時(shí)，建議使用 wx:if 搭配 wx:elif、wx:else 進(jìn)行展示與隱藏的切換

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

1、wx:for遍歷數(shù)組

//wx-for遍歷數(shù)組array,默認(rèn)情況下，當(dāng)前循環(huán)項(xiàng)的索引用 index 表示；當(dāng)前循環(huán)項(xiàng)用 item 表示。
<view wx:for="{{array}}">
 索引是：{{index}} 值是：{{item}}
</view>

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

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

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

//將索引名設(shè)置為"idx",將索引項(xiàng)的值設(shè)置為“itemName”
<view wx:for="{{arrsy}}" wx:for-index="idx" wx:for-item="itemName">
索引是：{{idx}} 當(dāng)前項(xiàng)時(shí)：{{itemName}}
</view>

3、wx:key的使用

類似于 Vue 列表渲染中的 :key，小程序在實(shí)現(xiàn)列表渲染時(shí)，也建議為渲染出來(lái)的列表項(xiàng)指定唯一的 key 值，從而提高渲染的效率，示例代碼如下

感謝各位的閱讀，以上就是“微信小程序怎么設(shè)置WXML”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)微信小程序怎么設(shè)置WXML這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！