微信小程序模板與設置WXML實例講解
一、WXML模板語法--數(shù)據綁定
數(shù)據綁定的基本原則
在 data 中定義數(shù)據
在頁面對應的.js文件中，把數(shù)據定義到data對象中，如下圖在home頁面中的home.js中定義home頁面的data數(shù)據：
Page({
data: {
swiperList:[], //存放輪播圖數(shù)據的列表
str:'Hello world', //定義字符串類型
boolean:true, //定義boolean類型
data :3.2412, //定義數(shù)據類型
imgSrc:'http://www.ithima.com/images/logo.png',
arr:[{msg:'hello '},'msg1:world'] //定義數(shù)組類型數(shù)據
},使用Mustache語法（）將data中的數(shù)據綁定到頁面中并進行渲染：
Mustache語法可以用于動態(tài)綁定內容、綁定屬性和進行數(shù)據運算（三元運算、算術運算等）
<view>{{str}}</view> //動態(tài)綁定內容
<image src='{{imgSrc}}'></image>//動態(tài)綁定屬性
<view> {{data>=5?'張三':'李四'}}</view>//綁定三元運算后的結果到頁面二、WXML模板語法--事件綁定
事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產生的行為，反饋到邏輯層進行業(yè)務的處理，類似于html中有一個點擊事件onclick，這個點擊事件對應的行為方法是'getData’,當用戶在渲染層點擊'getData'方法時，邏輯會根據getDta方法中的內容進行數(shù)據處理。
小程序常用綁定事件
| 類型 | 綁定方式 | 事件描述 |
| tap | bindtap 或 bind:tap | 手指觸摸后馬上離開，類似于 HTML 中的 click 事件 |
| input | bindinput 或 bind:input | 文本框的輸入事件 |
| change | bindchange 或 bind:change | 狀態(tài)改變時觸發(fā) |
小程序常用事件對象的屬性列表
| 屬性 | 類型 | 說明 |
| type | String | 事件類型 |
| timeStamp | Integer | 頁面打開到觸發(fā)事件所經過的毫秒數(shù) |
| target | Object | 觸發(fā)事件的組件的一些屬性值集合 |
| currentTarget | Object | 當前組件的一些屬性值集合 |
| detail | Object | 額外的信息 |
| touches | Array | 觸摸事件，當前停留在屏幕中的觸摸點信息的數(shù)組 |
| changedTouches | Array | 觸摸事件，當前變化的觸摸點信息的數(shù)組 |
注意：target和currentTarget的區(qū)別：target 是觸發(fā)該事件的源頭組件，而 currentTarget 則是當前事件所綁定的組件，只對當前組件有用。
bindtap的語法格式
小程序中沒有htnl中的onclick點擊事件，通過tap事件響應用戶的行為，通過bindtap為用戶綁定btnTapHandler事件示例如下：
//.wxml文件中
<view type="primary" bindtap="btnTapHandler">綁定按鈕事件</view>
//.js文件中定義對應的事件處理函數(shù)，事件參數(shù)通過形參 event（簡寫e） 來接收
btnTapHandler(e){
console.log(e)
},事件傳參
微信小程序不能在綁定時間的額時候，同時為事件處理函數(shù)傳參。因為小程序會把 bindtap 的屬性值，統(tǒng)一當作事件名稱來處理，相當于要調用一個名稱為 btnHandler(123) 的事件處理函數(shù)。微信小程序傳參的正確方法應該時為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數(shù)的名字，如:
//錯誤代碼
<button type="primary" bindtap="btnTapHandler（123）">事件傳參</button>
//正確代碼
<button type="primary" bindtap="btnTapHandler" data-info="{{23}}">事件傳參</button>
//其中info被解析為參數(shù)的名字，23為傳遞的參數(shù)的值在事件處理函數(shù)中，通過 event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值，示例代碼如下：
//頁面的.js文件中
btnTapHandler(event){
//dataset是一個包含了data-*傳過來的所有的參數(shù)項的對象
console.log(event.target.dataset)
//通過dataset訪問參數(shù)項info的值
console.log(event.target.dataset.info)
}bindinput的語法格式
在小程序中，通過 input 事件來響應文本框的輸入事件，語法格式如下：
通過 bindinput，可以為文本框綁定輸入事件：
<input bindinput="inputHandler"><input>
在頁面的.js文件中定義事件處理函數(shù)：
inputHandler(e){
//獲取并輸出文本框中最新的值
console.log(e.detail.value)
}案例一：實現(xiàn)文本框和data之間數(shù)據同步
步驟：定義數(shù)據->渲染結構->美化樣式->綁定input事件處理函數(shù)
//第一步：.js文件中定義數(shù)據
data: {
count:0,
message:'張三，我是李四'
}, data: {
count:0,
message:'張三，我是李四'
},
//第二步：.wxml文件中渲染結構
<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模板語法--條件渲染
1、wx:if
在小程序中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：
//如果滿足條件，頁面中展示“True”
<view wx:if="{{condition}}"> True</view>也可以用 wx:elif 和 wx:else 來添加 else 判斷：
//如果num是1,頁面顯示“男”，如果是2，顯示“女”，否則顯示“保密”
<view wx:if="{{num==1}}">男</view>
<view wx:elif="{{num==2}}">女</view>
<view wx:else>保密</view>2、結合<block>使用wx:if
如果要一次性控制多個組件的展示與隱藏，可以使用一個 <block></block> 標簽將多個組件包裝起來，并在<block> 標簽上使用 wx:if 控制屬性，block是一個包裹性質的容器，不對頁面進行任何渲染，示例如下：
//如果為真,同時顯示“V１”和“V2”,如果位假，同時隱藏“V1”和“V2”
<block wx:if="{{true}}">
<view> V1</view>
<view> V2</view>
</block>3、hidden隱藏
在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的顯示與隱藏：
<view hidden="{{condition}}">條件為True時，隱藏，為false時顯示</view>注意：wx:if 以動態(tài)創(chuàng)建和移除元素的方式，控制元素的展示與隱藏 hidden 以切換樣式的方式（display: none/block;），控制元素的顯示與隱藏. 需要頻繁切換時，建議使用 hidden 控制條件復雜時，建議使用 wx:if 搭配 wx:elif、wx:else 進行展示與隱藏的切換
四、WXML模板語法--列表渲染
1、wx:for遍歷數(shù)組
//wx-for遍歷數(shù)組array,默認情況下，當前循環(huán)項的索引用 index 表示；當前循環(huán)項用 item 表示。
<view wx:for="{{array}}">
索引是：{{index}} 值是：{{item}}
</view>2、手動指定索引和當前項的變量名*
使用 wx:for-index 可以指定當前循環(huán)項的索引的變量名
使用 wx:for-item 可以指定當前項的變量名
//將索引名設置為"idx",將索引項的值設置為“itemName”
<view wx:for="{{arrsy}}" wx:for-index="idx" wx:for-item="itemName">
索引是：{{idx}} 當前項時：{{itemName}}
</view>3、wx:key的使用
類似于 Vue 列表渲染中的 :key，小程序在實現(xiàn)列表渲染時，也建議為渲染出來的列表項指定唯一的 key 值，從而提高渲染的效率，示例代碼如下
到此這篇關于微信小程序模板與設置WXML實例講解的文章就介紹到這了,更多相關小程序模板與設置WXML內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了javascript實現(xiàn)淘寶幻燈片廣告展示效果的方法,以實例形式完整講述了javascript實現(xiàn)幻燈效果的javascript、css及html實現(xiàn)技巧,需要的朋友可以參考下2015-04-04
今天小編就為大家分享一篇layui監(jiān)聽工具欄的實例(操作列表按鈕)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了利用js+canvas實現(xiàn)掃雷游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)拖動緩動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
提示不難做，那個三角號樣式很難調兼容，死了好多腦細胞預覽主窗口提示錯位，保存本地測比較好。2011-04-04
indexOf()?方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置，這篇文章主要介紹了js?indexOf?的正確用法,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了js 概率計算(簡單版),需要的朋友可以參考下2017-09-09
這篇文章主要介紹了7個好用的TypeScript新功能，想了解TypeScript的同學，一定要看一下2021-05-05
基于JavaScript實現(xiàn)簡單抽獎功能代碼實例
這篇文章主要介紹了基于JavaScript實現(xiàn)簡單抽獎功能代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10
List all the Databases on a SQL Server
List all the Databases on a SQL Server...2007-06-06