微信小程序开发入门：2.4 视图层（View），2.4.1 WXML

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

2.4.1 WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

WXML 具有以下能力：

1. 数据绑定
2. 列表渲染
3. 条件渲染
4. 模板
5. 事件

2.4.1.1 数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

2.4.1.1.1 简单绑定

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

1、内容

 {{ message }} 

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

2、组件属性（需要在双引号之内）

 

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

3、控制属性（需要在双引号之内）

 

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

4、关键字（需要在双引号之内）

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

2.4.1.1.2 运算

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

1、三元运算

2、算数运算

 {{a + b}} + {{c}} + d 

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

3、逻辑判断

4、字符串运算

{{"hello" + name}}

Page({
  data:{
    name: 'MINA'
  }
})

5、数据路径运算

{{object.key}} {{array[0]}}

Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

2.4.1.1.3 组合

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

1、数组

 {{item}} 

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

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

2、对象

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

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

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

  {{item}}

等同于

  {{item}}

2.4.1.2 列表渲染

1、wx:for

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

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

  {{index}}: {{item.message}}

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

2、block wx:for

类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

   {{index}}: 
   {{item}} 

3、wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

2.4.1.3 条件渲染

1、wx:if

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

 True 

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

 1 
 2 
 3 

2、block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

   view1 
   view2 

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

3、wx:if vs hidden

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

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

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

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

2.4.1.4 模板

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

1、定义模板

使用 name 属性，作为模板的名字。然后在