微信小程序学习笔记（5）--------框架之视图层

这一系列转载：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 中相同的选择器。