第5章 WXML 語(yǔ)法基礎(chǔ)

第5章WXML語(yǔ)法基礎(chǔ)WXML介紹數(shù)據(jù)綁定條件渲染列表渲染模板與引用事件處理010204050306WXML介紹WXML介紹WXML（全稱WeiXinMarkupLanguage）是小程序框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合小程序的基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。WXML介紹WXML語(yǔ)法：<標(biāo)簽名屬性名="屬性值"屬性名="屬性值"></標(biāo)簽名>WXML介紹WXML的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽中包裹著我們要展示在頁(yè)面中的內(nèi)容，其內(nèi)容可以是一段簡(jiǎn)單的字符串文本，也可以是其他的WXML語(yǔ)句，這個(gè)用法與HTML是一樣的。在開(kāi)始標(biāo)簽中還可以為該標(biāo)簽傳入屬性。WXML介紹WXML示例代碼：<viewstyle="color:red;font-size:25px;font-weight:600;">Hello，小程序<viewclass="sub-title">小程序商城首頁(yè)</view></view>數(shù)據(jù)綁定數(shù)據(jù)綁定數(shù)據(jù)綁定使用Mustache語(yǔ)法（雙大括號(hào)）將變量包起來(lái)，示例代碼：//index.wxml<view><text>{{message}}</text></view>//index.jsPage({data:{message:"Hello,World"}})數(shù)據(jù)綁定組件屬性(需要在雙引號(hào)之內(nèi))，示例代碼：//index.wxml<viewid="item-{{id}}"></view>//index.jsPage({data:{id:0}})數(shù)據(jù)綁定控制屬性(需要在雙引號(hào)之內(nèi))，示例代碼：//index.wxml<viewwx:if="{{condition}}"></view>//index.jsPage({data:{condition:true}})數(shù)據(jù)綁定可以在{{}}內(nèi)進(jìn)行簡(jiǎn)單的運(yùn)算，支持的有如下幾種方式：三元運(yùn)算算數(shù)運(yùn)算邏輯判斷字符串運(yùn)算數(shù)據(jù)路徑運(yùn)算條件渲染條件渲染在框架中，使用wx:if=""來(lái)判斷是否需要渲染該代碼塊：<viewwx:if="{{condition}}">True</view>也可以用wx:elif和wx:else來(lái)添加一個(gè)else塊：<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>2}}">2</view><viewwx:else>3</view>條件渲染因?yàn)閣x:if是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上。如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用一個(gè)<block/>標(biāo)簽將多個(gè)組件包裝起來(lái)，并在上邊使用wx:if控制屬性。示例代碼：<blockwx:if="{{true}}"><view>view1</view><view>view2</view></block>列表渲染列表渲染在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item。示例代碼：//index.wxml<viewwx:for="{{array}}">{{index}}:{{item.message}}</view>//index.jsPage({data:{array:[{message:'foo',},{message:'bar'}]}})列表渲染使用wx:for-item可以指定數(shù)組當(dāng)前元素的變量名，使用wx:for-index可以指定數(shù)組當(dāng)前下標(biāo)的變量名。示例代碼：<viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itemName">{{idx}}:{{itemName.message}}</view>模板與引用模板與引用WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調(diào)用。使用name屬性，作為模板的名字。然后在<template/>內(nèi)定義代碼片段。<templatename="msgItem"><view><text>{{index}}:{{msg}}</text><text>Time:{{time}}</text></view></template>模板與引用WXML模板示例代碼：//index.wxml<templatename="address"><view>收件人：{{name}}</view><view>電話：{{phone}}</view><view>地址：{{addr}}</view></template><!--使用模板--><templateis="address"data="{{...userAddr}}"></template>//index.jsPage({data:{userAddr:{name:'張三',phone:,addr:'北京市海淀區(qū)'}}})模板與引用WXML提供兩種文件引用方式import和include，import可以在該文件中使用目標(biāo)文件定義的template。<templatename="item"><text>{{text}}</text></template>模板與引用WXML引用示例代碼：//index.wxml<includesrc="./temp.wxml"></include><templateis="tempCode"></template>//temp.wxml<view>Hello,World!!</view><templatename="tempCode"><view>helloworld</view></template>事件處理事件處理事件的概念：事件是視圖層到邏輯層的通訊方式。事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。事件對(duì)象可以攜帶額外信息，如id,dataset,touches。事件處理在組件中綁定一個(gè)事件處理函數(shù)。如bindtap，當(dāng)用戶點(diǎn)擊該組件的時(shí)候會(huì)在該頁(yè)面對(duì)應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。示例代碼：<viewid="tapTest"data-hi="Weixin"bindtap="tapName">Clickme!</view>事件處理在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù)，參數(shù)是event。示例代碼：Page({tapName:function(event){console.log(event)}})事件處理用戶行為反饋的常見(jiàn)事件類型如下表：類型觸發(fā)條件touchstart手指觸摸動(dòng)作開(kāi)始touchmove手指觸摸后移動(dòng)touchcancel手指觸摸動(dòng)作被打斷，如來(lái)電提醒，彈窗touchend手指觸摸動(dòng)作結(jié)束tap手指觸摸后馬上離開(kāi)longpress手指觸摸超過(guò)350ms后離開(kāi)，與tap事件互斥longtap手指觸摸后，超過(guò)350ms再離開(kāi)transitionend在W