小程序的视图层
框架的视图层由WXML (WeiXin Markup Language)和wxsS (WeiXin Style Sheet)编写，由组件进行展示。WXML用于描述页面的结构，WXSS用于描述页面的样式，组件(Component)是视图的基本组成单元。WXML和WXSS可以类比为Web开发中使用的HTML和CSs，它们负责将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。
1 WXML
WXML是MINA框架设计的一套标签语言，结合基础组件、事件系统，可以构建页面的结构。组件是MINA框架中一些预置的标签，同时也是视图的基本组成单元。大部分标签将在第7章组件中介绍。其中，作为组件的大部分标签在MINA中有预制样式，在使用时需要注意样式和目标样式的冲突。
下面将分别介绍WXML的数据绑定、列表渲染、条件渲染、模板、事件等能力。
1.数据绑定
在WXML中，文档中的顶层对象是page(类比于HTML文档中的body)，而最常用的容器元素是view(类比于HTML文档中的div)。除渲染成不同文档的组件之外，WXML同时定义了用于控制的、不会进行渲染的block标签。
WXML通过数据绑定的方法和逻辑层交换数据。数据绑定是指，在双大括号表达式“份”中插入的表达式，可以将逻辑层Page对象中data对象的键作为变量使用，插入到WXML中。
数据绑定使用双大括号将变量包起来，双大括号中的内容可以是变量、关键字，或者逻辑表达式、条件表达式、算数和字符串运算，以及对象
和数组的索引操作。相比于其他模板语言如PHP，这里的双大括号表达式只能插入标签的属性和内容，不能改变视图层文档的结构，即插入或删除新的视图层组件。
简单的数据绑定可以作用于以下几个方面。
·内容
若逻辑层文件内容为
Page({
data: {
message: 'Hello MINA!'
}
})
则视图层中语句为
<view> {f message }} </view>
将会在页面上显示“Hello MINA!”。·组件属性（需要在双引号之内)若逻辑层文件内容为
Page({
data: {
id: 0
}
})
则视图层语句为
<view id= " item-tfid} " > </view>可设置view组件id属性值为0。·关键字（需要在双引号之内)
关键字主要是true和false，均为boolean类型，分别代表真值和假值。例如:
<checkbox checked= " {false} " ></checkbox>表示组件checkbox的状态为未选中。
注意
不要直接写成checked= " false "，其计算结果是一个字符串，转成boolean类型后代表真值。
·控制属性（需要在双引号内)若逻辑层文件内容为
Page({
data: {
condition: true
}
})
则视图层语句为
<view wx:if=" {{condition} " ></view>
表示逻辑判断的条件为真，此时view组件中的内容将会显示在页面上。
WXML还支持在{内进行简单运算，主要包括以下几个方面。
·三元运算
({})内支持进行三元运算，例如:
<view hidden=" flag ? true : false} " > Hidden </view>
算术运算
若在逻辑层有如下代码:
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
则语句:
<view> {fa + b}+ {c}+ d </view>
运行后，有view中的内容为3＋ 3+d,{fa+b}}在这里进行了算术加法运算，结果为3,{{c}}为逻辑层的变量，值为3,d是普通字符串，直接输出。
表示根据flag的值判断view组件hidden属性的状态为隐藏还是显小。
·逻辑判断
使用wx:if可以进行逻辑判断，例如:
<view wx:if= " {length > 5}}" > </view>
可以根据length的值和5的比较结果选择是否显示该view组件。
字符串运算
若逻辑层文件内容为
Page({
data:{
name: 'MINA'
}
})
则视图层中语句为<view>{{" hello " + name}}</view>表示view组件中的内容为“hello MINA”。
·数据路径运算
若逻辑层文件内容为
Page({
data: {
object: {key : 'Hello '
},
array: ['MINA','!']
}
})
则语句
<view>{fobject.key {{array[o]l}</view>将会在页面上显示Hello MINA。
