原文地址：
一、说明WXML（WeiXinMarkupLanguage）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。其基本功能如下：
二、数据绑定原文地址：WXML中的动态数据均来自对应Page的data。在WXML中，使用双大括号将变量包起来，框架会在在对应的page.js中寻找此变量的值。几种常见用法如下：
2.1简单绑定page.js中声明数据Page({data:{message:'HelloMINA!',id:0,condition:true}})WXML中进行数据简单绑定!--简单内容--view{{message}}/view!--组件属性(需要在双引号之内)--viewid="item-{{id}}"/view!--控制属性(需要在双引号之内)--viewwx:if="{{condition}}"/view!--关键字(需要在双引号之内)--checkboxchecked="{{false}}"/checkbox2.2在{{}}内进行简单的运算page.js中声明数据Page({data:{a:1,b:2,c:3,name:'MINA',object:{key:'Hello'},array:['MINA'],zero:0,obj1:{a:1,b:2},obj2:{c:3,d:4}}})WXML中进行运算!--三元运算--viewhidden="{{flag?true:false}}"Hidden/view!--算数运算--view{{a+b}}+{{c}}+d/view!--逻辑判断--viewwx:if="{{length5}}"/view!--字符串运算--view{{"hello"+name}}/view!--数据路径运算--view{{object.key}}{{array[0]}}/view2.3组合也可以在Mustache内直接进行组合，构成新的对象或者数组。
组合数组：
page.js中声明数据Page({data:{zero:0,}})在WXML中合成数组viewwx:for="{{[zero,1,2,3,4]}}"{{item}}/view最终组合成的数组为[0,1,2,3,4]。
组合对象：
page.js中声明数据Page({data:{a:1,b:2}})在WXML中合成对象templateis="objectCombine"data="{{for:a,bar:b}}"/template最终组合成的对象是{for:1,bar:2}
也可以用扩展运算符…来将一个对象展开
page.js中声明数据Page({data:{obj1:{a:1,b:2},obj2:{c:3,d:4}}})在WXML中合成对象templateis="objectCombine"data="{{...obj1,...obj2,e:5}}"/template最终组合成的对象是{a:1,b:2,c:3,d:4,e:5}。
如果对象的key和value相同，也可以间接地表达。
page.js中声明数据Page({data:{foo:'my-foo',bar:'my-bar'}})在WXML中合成对象templateis="objectCombine"data="{{foo,bar}}"/template最终组合成的对象是{foo:'my-foo',bar:'my-bar'}。
注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面花括号和引号之间如果有空格，将最终被解析成为字符串（"{{[1,2,3]}}"等同于"{{[1,2,3]+''}}"）
三、列表渲染原文地址：
WXML可以通过一些特殊属性控制列表的渲染，这些控制属性如下：
3.1wx:for在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。
page.js中声明数据Page({data:{array:[{message:'foo',},{message:'bar'}]}})WXML中渲染!--简单渲染--viewwx:for="{{array}}"{{index}}:{{item.message}}/view!--使用wx:for-item可以指定数组当前元素的变量名--!--使用wx:for-index可以指定数组当前下标的变量名--viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itemName"{{idx}}:{{itemName.message}}/view!--wx:for也可以嵌套，下边是一个九九乘法表--viewwx:for="{{[1,2,3,4,5,6,7,8,9]}}"wx:for-item="i"viewwx:for="{{[1,2,3,4,5,6,7,8,9]}}"wx:for-item="j"viewwx:if="{{i=j}}"{{i}}{{j}}={{ij}}/view/view/view3.2blockwx:for将wx:for用在block/标签上，可以渲染一个包含多节点的结构块。如：
blockwx:for="{{[1,2,3]}}"view{{index}}:/viewview{{item}}/view/block3.3wx:key如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如input/中的输入内容，switch/的选中状态），需要使用wx:key来指定列表中项目的唯一的标识符。
wx:key的值以两种形式提供
字符串，代表在for循环的array中item的某个property，该property的值需要是列表中唯一的字符串或数字，且不能动态改变。保留关键字this代表在for循环中的item本身，这种表示需要item本身是一个唯一的字符串或者数字（如：当数据改变触发渲染层重新渲染的时候，会校正带有key的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率）示例代码：
Page({data:{objectArray:[{id:5,unique:'unique_5'},{id:4,unique:'unique_4'},{id:3,unique:'unique_3'},{id:2,unique:'unique_2'},{id:1,unique:'unique_1'},{id:0,unique:'unique_0'},],numberArray:[1,2,3,4]},switch:function(e){constlength=this.data.objectArray.lengthfor(leti=0;ilength;++i){constx=Math.floor(Math.random()length)consty=Math.floor(Math.random()length)consttemp=this.data.objectArray[x]this.data.objectArray[x]=this.data.objectArray[y]this.data.objectArray[y]=temp}this.setData({objectArray:this.data.objectArray})},addToFront:function(e){constlength=this.data.objectArray.lengththis.data.objectArray=[{id:length,unique:'unique_'+length}].concat(this.data.objectArray)this.setData({objectArray:this.data.objectArray})},addNumberToFront:function(e){this.data.numberArray=[this.data.numberArray.length+1].concat(this.data.numberArray)this.setData({numberArray:this.data.numberArray})}})switchwx:for="{{objectArray}}"wx:key="unique"style="display:block;"{{item.id}}/switchbuttonbindtap="switch"Switch/buttonbuttonbindtap="addToFront"Addtothefront/buttonswitchwx:for="{{numberArray}}"wx:key="this"style="display:block;"{{item}}/switchbuttonbindtap="addNumberToFront"Addtothefront/button注意：当wx:for的值为字符串时，会将字符串解析成字符串数组；花括号和引号之间如果有空格，将最终被解析成为字符串
四、条件渲染原文地址：
WXML支持条件渲染
4.1wx:if在框架中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块：
viewwx:if="{{condition}}"True/view也可以用wx:elif和wx:else来添加一个else块：
viewwx:if="{{length5}}"1/viewviewwx:elif="{{length2}}"2/viewviewwx:else3/view4.2blockwx:if如果要一次性判断多个组件标签，可以使用一个block/标签将多个组件包装起来，并在上边使用wx:if控制属性。
blockwx:if="{{true}}"viewview1/viewviewview2/view/block4.3wx:ifvshidden由于wx:if之中的模板也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程（框架会确保条件块在切换时销毁或重新渲染）。
同时wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。
五、模板原文地址：
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
5.1定义模板使用name属性，作为模板的名字。然后在template/内定义代码片段，如：
!--index:intmsg:stringtime:string--templatename="msgItem"viewtext{{index}}:{{msg}}/texttextTime:{{time}}/text/view/template5.2使用模板使用is属性，声明需要的使用的模板，然后将模板所需要的data传入，如：
templateis="msgItem"data="{{...item}}"/Page({data:{item:{index:0,msg:'thisisatemplate',time:'2016-09-15'}}})is属性可以使用Mustache语法，来动态决定具体需要渲染哪个模板：
templatename="odd"viewodd/view/templatetemplatename="even"vieweven/view/templateblockwx:for="{{[1,2,3,4,5]}}"templateis="{{item%2==0?'even':'odd'}}"//block注意：模板拥有自己的作用域，只能使用data传入的数据以及模版定义文件中定义的wxs/模块。
六、事件原文地址：
6.1什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id,dataset,touches。6.2事件的使用方式在组件中绑定一个事件处理函数。如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。viewid="tapTest"data-hi="WeChat"bindtap="tapName"Clickme!/view在相应的Page定义中写上相应的事件处理函数，参数是event。Page({tapName:function(event){console.log(event)}})事件中包含的信息如下：
{"type":"tap","timeStamp":895,"target":{"id":"tapTest","dataset":{"hi":"WeChat"}},"currentTarget":{"id":"tapTest","dataset":{"hi":"WeChat"}},"detail":{"x":53,"y":14},"touches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14}],"changedTouches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14}]}6.3事件分类事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。WXML的冒泡事件列表：
类型触发条件最低版本touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断，如来电提醒，弹窗touchend手指触摸动作结束tap手指触摸后马上离开longpress手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发1.5.0longtap手指触摸后，超过350ms再离开（推荐使用longpress事件代替）transitionend会在WXSStransition或wx.createAnimation动画结束后触发animationstart会在一个WXSSanimation动画开始时触发animationiteration会在一个WXSSanimation一次迭代结束时触发animationend会在一个WXSSanimation动画完成时触发touchforcechange在支持3DTouch的iPhone设备，重按时会触发1.9.90注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如form/的submit事件，input/的input事件，scroll-view/的scroll事件
6.4事件绑定和冒泡事件绑定的写法同组件的属性，以key、value的形式。
key以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。value是一个字符串，需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错。bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
如在下边这个例子中，点击innerview会先后调用handleTap3和handleTap2(因为tap事件会冒泡到middleview，而middleview阻止了tap事件冒泡，不再向父节点传递)，点击middleview会触发handleTap2，点击outerview会触发handleTap1。
viewid="outer"bindtap="handleTap1"outerviewviewid="middle"catchtap="handleTap2"middleviewviewid="inner"bindtap="handleTap3"innerview/view/view/view6.5事件的捕获阶段自基础库版本1.5.0起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。
在下面的代码中，点击innerview会先后调用handleTap2、handleTap4、handleTap3、handleTap1。
viewid="outer"bind:touchstart="handleTap1"capture-bind:touchstart="handleTap2"outerviewviewid="inner"bind:touchstart="handleTap3"capture-bind:touchstart="handleTap4"innerview/view/view如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。
viewid="outer"bind:touchstart="handleTap1"capture-catch:touchstart="handleTap2"outerviewviewid="inner"bind:touchstart="handleTap3"capture-bind:touchstart="handleTap4"innerview/view/view6.6事件对象如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。
BaseEvent基础事件对象属性列表：属性类型说明typeString事件类型timeStampInteger事件生成时的时间戳targetObject触发事件的组件的一些属性值集合currentTargetObject当前组件的一些属性值集合CustomEvent自定义事件对象属性列表（继承BaseEvent）：属性类型说明detailObject额外的信息TouchEvent触摸事件对象属性列表（继承BaseEvent）：属性类型说明touchesArray触摸事件，当前停留在屏幕中的触摸点信息的数组changedTouchesArray触摸事件，当前变化的触摸点信息的数组特殊事件：canvas/中的触摸事件不可冒泡，所以没有currentTarget。
更具体的属性内容请看原文档
七、引用原文地址：
7.1说明WXML提供两种文件引用方式import和include。
7.1.1importimport可以在该文件中使用目标文件定义的template，如：在item.wxml中定义了一个叫item的template：
!--item.wxml--templatename="item"text{{text}}/text/template在index.wxml中引用了item.wxml，就可以使用item模板：
importsrc="item.wxml"/templateis="item"data="{{text:'forbar'}}"/import有作用域的概念，即只会import目标文件中定义的template，而不会import目标文件import的template。如：CimportB，BimportA，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。
7.1.2includeinclude可以将目标文件除了template/wxs/外的整个代码引入，相当于是拷贝到include位置