WXML

---

WXML(WeiXin Markup Language)是MINA设计的一套标签语言，结合 、 ，可以构建出页面的结构。

【1】数据绑定

1.1 简单绑定

数据绑定使用"Mustache"语法（双大括号）将变量包起来，可以作用于：

         
           {
       { message }} 
           Page({    data: {      message: 'Hello MINA!'    }  })

 

1.2 组件属性(需要在双引号之内)

          
           Page({    data: {      id: 0    }  })

 

1.3 控制属性(需要在双引号之内)

          
           Page({    data: {      condition: true    }  })

 

1.4 运算

可以在{

{}}内进行简单的运算，支持的有如下几种方式：

1.4.1 三元运算

<

view hidden="{

{flag ? true : false}}"> Hidden</

view>

1.4.2 算数运算

         
           {
       {a + b}} + {
       {c}} + d 
           Page({    data: {      a: 1,      b: 2,      c: 3    }  })

 

view中的内容为3 + 3 + d

1.5 逻辑判断

<

view wx:if="{

{length > 5}}"></

view>

1.6 字符串运算

         
          {
       {"hello" + name}}
           Page({    data:{      name:"MINA"    }  })

 

1.6 组合

也可以在Mustache内直接进行组合，构成新的对象或者数组

1.7 数组

         
           {
       {item}} 
           Page({    data: {      zero: 0    }  })

 

最终组合成数组[0, 1, 2, 3, 4]

1.8 对象

           Page({    data: {      a: 1,      b: 2    }  })

 

最终组合成的对象是{for: 1, bar: 2}

也可以用扩展运算符...来将一个对象展开

           Page({    data: {      obj1: {        a: 1,        b: 2      },      obj2: {        c: 3,        d: 4      }    }  })

最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}

如果对象的key和value相同，也可以间接地表达

           Page({    data: {      foo: 'my-foo',      bar: 'my-bar'    }  })

最终组合成的对象是{foo: 'my-foo', bar:'my-bar'}

注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如

           Page({    data: {      obj1: {        a: 1,        b: 2      },      obj2: {        b: 3,        c: 4      },      a: 5    }  })

最终组合成的对象是{a: 5, b: 3, c: 6}

【2】条件渲染

在MINA中，我们用wx:if="{

{condition}}"来判断是否需要渲染该代码块：

<

view wx:if="{

{condition}}"> True </

view>

也可以用wx:elif和wx:else来添加一个else块：

         
           1 
           
         
           2 
           
         
           3 
         

wx:if vs hidden

因为wx:if之中的模板也可能包含数据绑定，所有当wx:if的条件值切换时，MINA有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时wx:if也是

惰性的，如果在初始渲染条件为false，MINA什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。

           Page({    data: {          hidden: false    })

【3】列表渲染

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

         
              {
        {index}}: {
        {item.message}}  
           Page({    items: [{      message: 'foo',    },{      message: 'bar'    }]  })

使用wx:for-item可以指定数组当前元素的变量名

使用wx:for-index可以指定数组当前下标的变量名：

<

view wx:for="{

{array}}" wx:for-index="idx" wx:for-item="itemName"> {

{idx}}: {

{itemName.message}}</

view>

【4】模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

【5】事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如id, dataset, touches。

事件分类

事件分为冒泡事件和非冒泡事件

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

类型	触发条件
touchstart	手指触摸
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后离开
longtap	手指触摸后，超过350ms再离开

注：除上表之外的其他组件自定义事件都是非冒泡事件，如

的submit事件，

的input事件，

的scroll事件，(详见各个组件)

事件绑定

事件绑定的写法同组件的属性，以key、value的形式。

• key以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart
• value是一个字符串，需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中，点击inner view会先后触发handleTap1和handleTap2(因为tap事件会冒泡到middle view，而middle view阻止了tap事件冒泡，不再向父节点传递)，点击middle view会触发handleTap2，点击outter view会触发handleTap1。

         
              outer view    
          
                 middle view      
           
                    inner view      
               
            
         

         
          如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。
         
         
          事件对象的属性列表：
         
         
          
           
            
             
属性
             
类型
             
说明
            
            
             
type
             
String
             
事件类型
            
            
             
timeStamp
             
Integer
             
事件生成时的时间戳
            
            
             
target
             
Object
             
触发事件的组件的一些属性值集合
            
            
             
currentTarget
             
Object
             
当前组件的一些属性值集合
            
            
             
touches
             
Array
             
触摸事件，触摸点信息的数组
            
            
             
detail
             
Object
             
额外的信息
            
           
          
         
         
          【6】引用
         
         
          import
         
         
          import
          可以在该文件中使用目标文件定义的
          template
          ，如：在item.wxml中定义了一个叫
          item
          的
          template
          ：
         
         
          
             
           
         

在index.wxml中引用了item.wxml，就可以使用item模板：

include

include可以将目标文件出了<template/>的整个代码引入，相当于是拷贝到include位置，如：

         
         
       
         body 
         
         
         
       
         header 
         
         
       
         footer