一：理解视图层
类似于“视图引擎模板”(jsp,freemaker,velocity,thymeleaf等)
框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
那么wxml，wxss以及组件是什么鬼？
WXML(WeiXin Markup language) 用于描述页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。
另：
WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
二：WXML
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
WXML 具有什么能力：数据绑定、列表渲染、条件渲染、模板、事件、引用
1.数据绑定(WXML 中的动态数据均来自对应 Page 的 data)
数据绑定使用 Mustache 语法（双大括号将变量包起来)
注意： 花括号和引号之间如果有空格，将被解析成为字符串
1)简单绑定_内容绑定
<view> {{ message }} </view>
Page({ data: { message:'Hello MINA!'}})
2)简单绑定_组件属性(需要在双引号之内)
<view id="item-{{id}}"> </view>
Page({ data: { id:0}})
3)简单绑定_控制属性(需要在双引号之内)
<view wx:if="{{condition}}"> </view>
Page({ data: { condition:true}})
4)简单绑定_关键字(需要在双引号之内)
true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。
<checkbox checked="{{false}}"> </checkbox>
特别注意：不要直接写 checked="false"，其计算结果是一个字符串，
转成 boolean 类型后代表真值。
可以在 {{}} 内进行简单的运算
5)绑定_运算_三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
6)绑定_运算_算数运算
<view> {{a + b}} + {{c}} + d </view>
Page({ data: { a:1, b:2, c:3}})
view中的内容为 3 + 3 + d
7)绑定_运算_逻辑判断
<view wx:if="{{length > 5}}"> </view>
8)绑定_运算_字符串运算
<view>{{"hello" + name}}</view>
Page({ data:{ name:'MINA'}})
9)绑定_运算_数据路径运算
<view>{{object.key}} {{array[0]}}</view>
Page({ data: { object: { key:'Hello '}, array: ['MINA'] }})
也可以在 Mustache 内直接进行组合，构成新的对象或者数组。
10)绑定_组合_数组
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
age({ data: { zero:0}})
最终组合成数组[0, 1, 2, 3, 4]
11)绑定_组合_对象1
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({ data: { a:1, b:2}})
最终组合成的对象是 {for: 1, bar: 2}
12)绑定_组合_对象2
如果对象的 key 和 value 相同，也可以间接地表达。
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({ data: { foo:'my-foo', bar:'my-bar'}})
最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}
13)绑定_组合_对象3
也可以用扩展运算符 ... 来将一个对象展开
< template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}">< /template>
Page({ data: { obj1: { a:1, b:2}, obj2: { c:3, d:4} }})
最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}
14)绑定_组合_对象4
上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({ data: { obj1: { a:1, b:2}, obj2: { b:3, c:4}, a:5}
最终组合成的对象是 {a: 5, b: 3, c: 6}
2.列表渲染
1) wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
1>默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({ data: { array: [{ message:'foo'}, { message:'bar'}] }})
2>指定变量名
使用 wx:for-item 可以指定数组当前元素的变量名
使用 wx:for-index 可以指定数组当前下标的变量名
<view wx:for="{{array}}" wx:for-index="idx"wx:for-item="itemName" >
{{idx}}: {{itemName.message}}
</view>
3>wx:for 也可以嵌套，下边是一个九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
4>循环中出现警告
warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance.
如果列表中项目的位置会动态改变或者有新的项目添加到列表中
希望列表中的项目保持自己的特征和状态
如<input/>中的输入内容，<switch/>的选中状态
需要使用 wx:key 来指定列表中项目的唯一的标识符
目的：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件
框架会确保他们被重新排序，而不是重新创建
以确保使组件保持自身的状态，并且提高列表渲染时的效率。
wx:key 的值以两种形式提供：
1.字符串，代表在 for 循环的 array 中 item 的某个 property，
该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变，
所以使用{{index}}是不错的选择，肯定是一个不重复的数字
2.保留关键字 *this 代表在 for 循环中的 item 本身
使用*this需要 item 本身是一个唯一的字符串或者数字，来确保Key是唯一的。
即如果数据数组是字符串或数字，且每项都是唯一的，则可以使用wx:key="*this"
<view wx:for="{{array}}" wx:for-index="idx"wx:for-item="iName" wx:key="{{idx}}" >
如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略不使用wx:key的警告。
2）block wx:for
可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
3.条件渲染
wx:if
1>在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块
<view wx:if="{{condition}}"> True </view>
2>也可以用 wx:elif 和 wx:else 来添加一个 else 块
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
3>block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。
如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，
并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}">
<view> view1</view>
<view> view2</view>
</block>
注意： 不是一个组件，仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
4>wx:if vs hidden
因为 wx:if 之中的模板也可能包含数据绑定，所有当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
4.模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用
模板的作用域：只能使用 data 传入的数据以及模版定义文件中定义的 模块
模板应用场景：可以做母板页
1>定义模板(使用 name 属性，作为模板的名字。然后在内定义代码片段)
<template name="msgItem">
<view>
<text> {{index}}: {{msg}}
<text> Time: {{time}}
</view>
</template>
模板中定义名称=msgItem，且定义了使用模板时需要传入的3个data数据
2>使用模板(使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入)
<template is="msgItem" data="{{...item}}"/>
指定使用名称=msgItem的模板，数据是一个item对象
Page({ data: { item: { index:0, msg:'this is a template', time:'2016-09-15'} }})
注意：
如果模板里需要传递是多个数据的话，使用...表示多个值，如data="{{...item}}"
如果模板里需要传递是单个数据的话，直使用简单绑定，如data="{{item}}"
可直接使用数据，如data="{{index:1,msg:This is message,time:123323231}}"
3>is再一例(is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板)
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
5.事件(此处事件不是页面生命周期事件，是自定义函数事件)
事件是视图层到逻辑层的通讯方式
事件可以将用户的行为反馈到逻辑层进行处理
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数
事件对象可以携带额外信息，如 id, dataset, touches
事件的使用方式：
1>在组件中绑定一个事件处理函数
2>在逻辑层相应的Page定义中写上相应的事件处理函数，参数是event
简单示例：
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
Page({ tapName:function(event){console.log(event) }})
输出结果：
{"type":"tap","timeStamp":895,"target": {"id":"tapTest","dataset": {"hi":"WeChat"}},
"currentTarget": {"id":"tapTest","dataset": {"hi":"WeChat"}},
"detail": {"x":53,"y":14},
"touches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14}],
"changedTouches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14}]}
1)事件分类
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
冒泡事件列表
类型 触发条件 最低版本
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longpress 手指触摸后，超过350ms再离开， 1.5.0
如果指定了事件回调函数并触发了这个事件，
tap事件将不被触发
longtap 手指触摸后，超过350ms再离开
（推荐使用longpress事件代替）
transitionend 会在 WXSS transition 或
wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发
非冒泡事件:除上表之外的组件自定义事件都是非冒泡事件(特殊声明的事件除外),
如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件
2)事件绑定和冒泡
1>事件绑定的写法同组件的属性，以 key、value 的形式。
2>key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。
3>自基础库 1.5.0起，bind和catch紧跟一个冒号，含义不变，如bind:tap、catch:touchstart
4>value 是一个字符串，需在逻辑层的 Page 中定义同名的函数,不然当触发事件的时候会报错
5>bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
示例：
<view id="outer" bindtap="hTap1">
outerView
<view id="middle" catchtap="hTap2">
middleView
<view id="inner" bindtap="hTap3">inner view</view>
</view>
</view>
分析：
点击 innerView 会先后调用hTap3和hTap2，middleView的catchtap 阻止了tap 事件冒泡
点击 middleView 会触发hTap2
点击 outerView 会触发hTap1。
3)事件的捕获阶段
1>自基础库版本 1.5.0起，触摸类事件支持捕获阶段。
2>捕获阶段位冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。
3>需要在捕获阶段监听事件时，可采用capture-bind、capture-catch关键字，
后者将中断捕获阶段和取消冒泡阶段。
示例：
<view id="outer" bind:touchstart="hTap1" capture-bind:touchstart="hTap2">
outerView
<view id="inner" bind:touchstart="hTap3" capture-bind:touchstart="hTap4">
innerView
</view>
</view>
点击 innerView会先后调用hTap2、hTap4、hTap3、hTap1
<view id="outer" bind:touchstart="hTap1" capture-catch:touchstart="hTap2">
outerView
<view id="inner" bind:touchstart="hTap3" capture-catch:touchstart="hTap4">
innerView
</view>
</view>
将只触发hTap2，因为capture-catch将中断捕获阶段和取消冒泡阶段
4)事件对象
如无特殊说明，当组件触发事件时，逻辑层对应的该事件的处理函数会收到一个事件对象
1>BaseEvent 基础事件对象属性列表
属性 类型 说明
type String 事件类型
timeStamp Integer 事件生成时的时间戳
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
2>CustomEvent 自定义事件对象属性列表（继承 BaseEvent）
属性 类型 说明
detail Object 额外的信息
3>TouchEvent 触摸事件对象属性列表（继承 BaseEvent）
属性 类型 说明
touches Array 触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件，当前变化的触摸点信息的数组
特殊事件： <canvas/> 中的触摸事件不可冒泡，所以没有 currentTarget。
5)每个事件对象详解
1>type:代表事件的类型
2>timeStamp:页面打开到触发事件所经过的毫秒数。
3>target:触发事件的源组件一些属性值集合
属性 类型 说明
id String 事件源组件的id
tagName String 当前组件的类型
dataset Object 事件源组件上由data-开头的自定义属性组成的集
4>currentTarget:事件绑定的当前组件的一些属性值集合
与target的属性值是一样的。
那两都有什么区别呢？
根据上面的示例，
点击 innerView 时，hTap3 收到的事件对象 target 和 currentTarget 都是 inner，
而 hTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。
分析一下dataset:
在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。
书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)
如data-element-type，
最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType
再简单地说：要想在逻辑service层接收的参数名称是驼峰式的，则每部分之间-分隔
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bvTap"> Test </view>
Page({ bindViewTap:function(event){
event.currentTarget.dataset.alphaBeta ===1// 会转为驼峰写法
event.currentTarget.dataset.alphabeta ===2// 大写会转为小写}})
5>touches:是一个数组，每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches 是 CanvasTouch 数组)。表示当前停留在屏幕上的触摸点。
属性 类型 说明
identifier Number 触摸点的标识符
pageX, pageY Number 距离文档左上角的距离，
文档的左上角为原点 ，横向为X轴，纵向为Y轴
clientX, clientY Number 距离页面可显示区域（屏幕除去导航条）左上角距离，
横向为X轴，纵向为Y轴
CanvasTouch 对象
属性 类型 说明
dentifier Number 触摸点的标识符
x, y Number 距离 Canvas 左上角的距离，Canvas 的左上角为原点 ，
横向为X轴，纵向为Y轴
6>changedTouches: 数据格式同 touches。 表示有变化的触摸点，如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)
7>detail
自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，
媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。
点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离
6.引用
1).逻辑服务层js文件之间引用：require(jsFileRelativeNotAbsolutePath)函数引用
2).wxml视图层文件引用：import标签和include标签
import标签引用的是目标wxml文件中的所有<template></template>模板代码块
<import src="wxml模板文件代码块，相对路径"/>
import 作用域：只import 目标文件中 template，不 import 目标文件 import 的 template。
include标签引用的是目标wxml文件中的所有非<template</template><wxs/>模板代码块
<import src="wxml非模板文件代码块，相对路径"/>
include可将目标文件除了<template/> <wxs/>外的整个代码引入，相当拷贝到include位置
与视图层的模板块关联理解
3).wxss文件之间引用：@import "wxssFileRelativeNotAbsolutePath";
4).引申
每个页面都对应有4个文件.wxml,.js,wxss,.json，在.wxml文件不引用也能直接使用
因为在同一个文件夹底，文件名称相同，只是扩展名不同，
系统自动根据相同的文件名称整合成一个前面界面
5)由此可见：
小程序页面需要引用外部共用的js逻辑文件，在页面相同名称的js中通过require()引用
同理于外部共用的wxss文件引用。
三：wxss文件
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
WXSS 用来决定 WXML 的组件应该怎么显示
WXSS 具有 CSS 大部分特性。同时为更适合开发小程序，WXSS 对 CSS 进行了扩充以及修改。
扩展的特性有：尺寸单位和样式导入
1.尺寸单位 (rpx：responsive pixel）,目标：这个单位可以根据屏幕宽度进行自适应
规定屏幕宽为750rpx
小程序中rpx与px的转换：
例如：设计稿750px宽度
你ps上量出宽度是多少，那么你就定义多少rpx，也就是 1px = 1rpx
例如：设计稿640px宽度
那么很遗憾，你需要转换一下 1px = 750/640 rpx
rpx与px的相互换算
2.样式导入
@import语句导入外联样式表，@import后跟需导入的外联样式表相对路径，用;表示语句结束
3.内联样式
与css一样，框架组件上支持使用 style、class 属性来控制组件的样式。
注意：请尽量避免将静态的样式写进 style 中，以免影响渲染速度
<view style="color:{{color}};" />
<view class="normal_view" />
4.class属性类名选择器
选择器 样例 样例描述
.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 中相同的选择器。
四：WXS
WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行
wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致
wxs 的运行环境和其他 javascript 代码是隔离的，
wxs 中不能调用其他 javascript 文件中定义的函数，
也不能调用小程序提供的API
wxs 函数不能作为组件的事件回调
由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。
在 android 设备上二者运行效率无差异
使用示例1：wxs定义暴露对象或属性
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} < /view>
使用示例2：wxs定义暴露函数
<wxs module="m1">
var getMax = function(array) {
var max = undefined;
for (var i = 0; i < array.length; ++i) {
max = max === undefined ?
array[i] :
(max >= array[i] ? max : array[i]);
}
return max;
}
module.exports.getMax = getMax;
</wxs>
<view> {{m1.getMax(array)}} </view>
总结：
1.wxs原来就是weixin script，专门定义一套页面中协助wxml渲染的处理逻辑
2.wxs不互通
3.wxs详细请法请点击我
五：组件
请看一下节视图层_组件：
网友评论