这一系列转载：http://blog.csdn.net/zsp45212/article/details/53518238
视图层
框架的视图层由wxml与wxss编写，由组件进行展示。将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层，wxml描述页面的结构，wxss描述页面样式。
一、wxml
wxml是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
1、数据绑定
（1）简单绑定
数据绑定使用Mustache语法（双大括号）将变量包起来，可以作用于:
内容
组件属性（双引号之内）
控制属性（双引号之内）
关键字（双引号之内）
（2）运算
可以在{{}}内进行简单的运算，支持：
三元运算
算数运算
逻辑判断
字符串运算
数据路径运算
（3）组合
可以在Mustache内直接进行组合，构成新的对象或者数组。
2、条件渲染
wx：if在框架中，我们使用wx：if="{{condition}}"来判断是否需要渲染代码块
<view wx:if="{{condition}}"> True </view>
也可以用wx:elif 和 wx:else 来添加一个 else 块：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
block wx:if
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view></block>
注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
3、列表渲染
wx:for
在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item
<view wx:for="{{array}}">
{{index}}: {{item.message}
</view>
Page({
data: {
array: [{
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>
block wx:for
类似block wx:if，也可以将wx:for用在<block/>标签上，以渲染一个包含多节点的结构块。例如：
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view></block>
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
4、模板
wxml提供模板（template）,可以在模板中定义代码片段，在不同的地方调用
定义模板
使用name属性，作为模板的名字，然后在<template/>内定义代码片段
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view></template>
模板使用（2种方法）
<include src="../xx/xx"/>把文件里的内容全部复制过来
Import导入 需要is指定把哪一部分的数据导入进来.模板中的模板是不生效的。
5、事件
（1）什么是事件：简而言之就是一种用户的行为，一种通讯方式
视图层到逻辑层的通讯方式。
将用户的行为反馈到逻辑层进行处理。
可以绑定到组件上，触发事件，执行逻辑层中对于的事件处理函数。
事件对象可以携带额外信息，如id，dataset,touches等。
（2）事件的使用
组件中绑定事件处理函数。
相对应的Page定义中写上相应的事件出理函数，参数event
(3)事件详解
1>分类：
冒泡事件：一个组件上的事件触发后，该事件会传向父节点。（点击一个子view，会触发父view以及父view的父view的点击事件）点击、长按、触摸都属于冒泡事件。
非冒泡事件：一个组件上的事件被触发后，该事件不会传向父节点（点击一个子view只触发当前view的点击事件）
2> 事件绑定：以key、value的形式绑定，其中key以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart。Value是一个字符串，在对应的page中定义同名函数。bind绑定与catch绑定的区别如下：
bind绑定：触发父view的点击事件，不阻止冒泡事件向上冒泡
catch绑定：不触发父view的点击事件，阻止冒泡事件向上冒泡。
（4）事件对象详解
组件的事件被触发时，逻辑层绑定该事件的处理函数，会收到一个事件对象。
1>BaseEvent 基础事件对象属性列表：
|
属性 |
类型 |
说明 |
|
type |
String |
事件类型 |
|
timeStamp |
Integer |
事件生成时的时间戳(页面打开到事件触发所经过 的毫秒数) |
|
target |
Object |
触发事件的组件的一些属性值集合（触发事件的源 组件。）具体属性如下图 |
|
currentTarget |
Object |
当前组件的一些属性值集合（事件绑定的当前组件。 ）具体属性如图 |
target
|
属性 |
类型 |
说明 |
|
id |
String |
事件源组件的id |
|
tagName |
String |
当前组件的类型 |
|
dataset |
Object |
事件源组件上由data-开头的自定义属性组成 的集合 |
currentTarget
|
属性 |
类型 |
说明 |
|
id |
String |
当前组件的id |
|
tagName |
String |
当前组件的类型 |
|
dataset |
Object |
当前组件上由data-开头的自定义属性组成的集合 |
dataset
在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.target.dataset 中会将连字符转成驼峰elementType。
2>CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：
|
属性 |
类型 |
说明 |
|
detail |
Object |
额外的信息 |
detail
自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息等。
3>TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：
|
属性 |
类型 |
说明 |
|
touches |
Array |
触摸事件，当前停留在屏幕中的触摸点信息的数组 |
|
changedTouches |
Array |
触摸事件，当前变化的触摸点信息的数组 |
特殊事件： <canvas/> 中的触摸事件不可冒泡，所以没有 currentTarget。
touches
touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。
Touch 对象
|
属性 |
类型 |
说明 |
|
identifier |
Number |
触摸点的标识符 |
|
pageX, pageY |
Number |
距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴 |
|
clientX, clientY |
Number |
距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴 |
CanvasTouch 对象
|
属性 |
类型 |
说明 |
特殊说明 |
|
identifier |
Number |
触摸点的标识符 |
|
|
x, y |
Number |
距离 Canvas 左上角的距离，Canvas 的左上角为原点 ，横向为X轴，纵向为Y轴 |
changedTouches
changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化 （touchmove），从有变无（touchend、touchcancel）。
6、引用
wxml的引用方式有：import和include
1>import
import可以在该文件中使用目标文件定义的template，如：
在 item.wxml 中定义了一个叫item的template：
<text>{{text}}</text></template>
在 index.wxml 中引用了 item.wxml，就可以使用item模板：
<import src="item.wxml"/><template is="item" data="{{text: 'forbar'}}"/>
import作用域：只会引用目标文件中定义的模板，而不会引用目标文件引用的模板
如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。
2>include
include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置。
二、wxss
wxss:样式语言，描述wxml的样式组件。wxss用来决定wxml的组件该怎么显示。
1、尺寸单位
rpx（responsive pixel） 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx.
rem（root em）: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。
2、样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
3、内联样式
style、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
4、选择器
目前支持的选择器有：
|
选择器 |
样例 |
样例描述 |
|
.class |
.intro |
选择所有拥有 class="intro" 的组件 |
|
#id |
#firstname |
选择拥有 id="firstname" 的组件 |
|
element |
view |
选择所有 view 组件 |
|
element, element |
view, checkbox |
选择所有文档的 view 组件和所有的 checkbox 组件 |
|
::after |
view::after |
在 view 组件后边插入内容 |
|
::before |
view::before |
在 view 组件前边插入内容 |
5、全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。