微信小程序開發(fā)WXML模板語法基礎教程
1.數(shù)據(jù)綁定
1. 數(shù)據(jù)綁定的基本原則
① 在 data 中定義數(shù)據(jù)
② 在 WXML 中使用數(shù)據(jù)
2. 在 data 中定義頁面的數(shù)據(jù)
在頁面對應的 .js 文件中，把數(shù)據(jù)定義到 data 對象中即可：
3. Mustache 語法的格式
把data中的數(shù)據(jù)綁定到頁面中渲染，使用 Mustache 語法（雙大括號）將變量包起來即可。語法格式為：
<view>{{要綁定的數(shù)據(jù)名稱}}</view>4. Mustache 語法的應用場景
Mustache 語法的主要應用場景如下：
- 綁定內(nèi)容
- 綁定屬性
- 運算（三元運算、算術運算等）
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)生的行為，反饋到邏輯層進行業(yè)務的處理。
2. 小程序中常用的事件
3. 事件對象的屬性列表
當事件回調(diào)觸發(fā)的時候，會收到一個事件對象 event，它的詳細屬性如下表所示：
4. target 和 currentTarget 的區(qū)別
target 是觸發(fā)該事件的源頭組件，而 currentTarget 則是當前事件所綁定的組件。舉例如下：
點擊內(nèi)部的按鈕時，點擊事件以冒泡的方式向外擴散，也會觸發(fā)外層 view 的 tap 事件處理函數(shù)。
此時，對于外層的 view 來說：
- e.target 指向的是觸發(fā)事件的源頭組件，因此，e.target 是內(nèi)部的按鈕組件
- e.currentTarget 指向的是當前正在觸發(fā)事件的那個組件，因此，e.currentTarget 是當前的 view
5. bindtap 的語法格式
在小程序中，不存在 HTML 中的 onclick 鼠標點擊事件，而是通過 tap 事件來響應用戶的觸摸行為。
① 通過 bindtap，可以為組件綁定 tap 觸摸事件，語法如下：
<!--pages/list/list.wxml--> <button type="primary" bindtap="btnTaphandler">按鈕</button>
② 在頁面的 .js 文件中定義對應的事件處理函數(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)一當作事件名稱來處理，相當于要調(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 事件來響應文本框的輸入事件，語法格式如下：
① 通過 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> 標簽將多個組件包裝起來，并在
block 標簽上使用 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
- 控制條件復雜時，建議使用wx:if 搭配 wx:elif、wx:else進行展示與隱藏的切換
4.列表渲染
1. wx:for
通過 wx:for 可以根據(jù)指定的數(shù)組，循環(huán)渲染重復的組件結(jié)構(gòu)，語法示例如下
<!--pages/list/list.wxml-->
<view wx:for="{{arr}}">
索引：{{index}},item項是:{{item}}
</view>
默認情況下，當前循環(huán)項的索引用 index 表示；當前循環(huán)項用 item 表示。
2. 手動指定索引和當前項的變量名
- 使用 wx:for-index 可以指定當前循環(huán)項的索引的變量名
- 使用 wx:for-item 可以指定當前項的變量名
示例代碼如下：
<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>
到此這篇關于微信小程序開發(fā)WXML模板語法基礎教程的文章就介紹到這了,更多相關小程序WXML模板內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
比較簡單的一個符合web標準的JS調(diào)用flash方法
比較簡單的一個符合web標準的JS調(diào)用flash方法...2007-11-11
兩種方法實現(xiàn)在HTML頁面加載完畢后運行某個js
這篇文章主要介紹了通過兩種方法實現(xiàn)在HTML頁面加載完畢后運行某個js,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了js如何獲取url中"?"后面的字串,需要的朋友可以參考下2014-05-05
淺談JS繼承_借用構(gòu)造函數(shù) & 組合式繼承
下面小編就為大家?guī)硪黄獪\談JS繼承_借用構(gòu)造函數(shù) & 組合式繼承。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
IE/FireFox具備兼容性的拖動代碼...2007-08-08
webpack構(gòu)建打包的性能優(yōu)化實戰(zhàn)指南
webpack是前端開發(fā)中比較常用的打包工具之一,另外還有gulp,grunt,下面這篇文章主要給大家介紹了關于webpack構(gòu)建打包的性能優(yōu)化的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
JAVASCRIPT模式窗口中下載文件無法接收iframe的流
模式窗口中下載文件，有時在下載時發(fā)現(xiàn)服務器無法接收iframe的流，因為在模式窗口中沒有觸發(fā)iframe的src重新定向事件2013-10-10
這篇文章主要通過js封裝cookie的函數(shù)代碼，想用js實現(xiàn)cookies操作的朋友可以參考下2013-06-06
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)收貨地址左滑刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
underscore之Chaining_動力節(jié)點Java學院整理
本文通過文字說明與代碼的形式給大家介紹了underscore之Chaining的相關知識，感興趣的朋友一起學習吧2017-07-07