视图层
框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言，结合
WXML，可以构建出页面的结构。WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。
事件
介绍
什么是事件
1. 事件是视图层到逻辑层的通讯方式。
2. 事件可以将用户的行为反馈到逻辑层进行处理。
3. 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
4. 事件对象可以携带额外信息，如 id, dataset, touches。
以上就是事件的解释, 这个算是概念吧,我也没办法再用语言去解释精简的语言了.
事件分类
事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
使用方式
我们在前面多次使用了事件,其中有点击事件, 对话框失焦事件但是我们并没有对它们进行详细的解释
接下来我们演示如何绑定一个事件, 首先需要在对应的wxml中做出声明
index.wxml
<view><text>绑定事件</text><button bindtap='firstClickEvent'>点一下</button></view>
之后再对应的js文件中写相对应的函数
firstClickEvent : function(){console.log("按钮被点击了");}
那么这个点击事件就完成了,但是事件函数是可以传参的让我们试下
index.js
firstClickEvent : function(e){console.log("firstClickEvent");console.log(e)}
运行效果
我们发现这个传来的参数共有以下几个属性
type,timeStamptargetcurrentTargetdetailchangedTouchestouches
我们先看看微信小程序中的事件属性
BaseEvent 基本事件对象属性表CustomEvent 自定义事件对象属性列表 (继承 BaseEven)TouchEvent 触摸事件对象属性列表 (继承 BaseEvent)
让我们先对上面的各个属性进行解释
特殊事件： 中的触摸事件不可冒泡，所以没有 currentTarget。
部分属性的详解
type
代表事件的类型,详见下表
以上就是除自定义事件外的事件
注除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件
target currentTarget
他们两个属性几乎一致,所以放在一起说明
关于dataset的详解
dataset
在组件中可以定义数据，这些数据将会通过事件传递给SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在event.currentTarget.dataset以及event.target.dataset中将连字符转成驼峰elementType,data会被去掉,如下图所示
在这里说明currentTarget target的区别, target 是触发事件的源组件, 即冒泡事件的起始组件, currentTarget 即为触发当前事件的组件,给出测试代码
index.wxml
<view id='c' bindtap='thirdClickEvent' ><text>绑定事件</text><view id='b' bindtap='secondClickEvent' ><button id='a' bindtap='firstClickEvent'>点一下</button></view></view>
index.js
firstClickEvent : function(e){console.log("firstClickEvent");console.log(e)},secondClickEvent: function (e) {console.log("secondClickEvent");console.log(e)},thirdClickEvent: function (e) {console.log("thirdClickEvent");console.log(e)},
建议复制代码自行运行下,再看解释
附上一个我个人理解的一个图 画的不好多多担待
现在以A,B,C 来命名这三个组件和他们的id 对应 如按钮A
对于冒泡事件来说, 当我点击 这个按钮A时,会发生以下事情
首先 按钮A会捕获这个事件, 因为它使用了bindtap来绑定点击事件, 而他的firstClickEvent参数的target和currentTarget属性都是 按钮A的信息
之后 viewB 也会捕获这个事件, 而他的secondClickEvent参数的target是 a按钮A, 但currentTarget是他自身viewB
最后 viewC 也会捕获这个事件, 而他的thirdClickEvent参数的target是 a按钮A,currentTarget则是他自身viewC
我们可以看下 BaseEvent 中的属性介绍, 因为这时 按钮A 即是捕捉事件的组件,也是发出事件的组件, 所以target一定是 A, 而currentTarget就是谁调用了了这个函数那么他就是谁, 若是不清楚的话呢举个栗子:
有一个气球, 绳子很短, A在一楼 , b 在 二楼 , c 在三楼
若A放飞了气球 那么
首先是A看到了气球, 这时 是A放的气球 ,A看到了放飞的气球, 气球飞到二楼后 B看到了气球, 这时 是A放的气球, B看到飞的气球
气球飞到三楼,C看到了气球, 这时 是A放的气球, C看到飞的气球
在这个过程中我们发现 不管谁看到气球, 气球肯定是A放的没错, 这时A其实就是target(一切的起始), 看到气球的 A,B,C 就是currentTarget(触发事件的组件)
这时我们也对冒泡事件有了一点的了解了,我给个运行图
至于非冒泡事件就是指,仅仅会在自身上响应,不往父容器传递
bind vs catch
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡
这个是官网给的解释我们大概会明白一点接下来给出图解,作对比
图中我们发现view左边是一个bindtap 右边是catchtap , 左边的tip事件从button A 冒泡到了view B 之后又冒泡到了 view C, 但是右边的就不一样了, tip事件从button A 冒泡到了view B 在向往上冒泡的时候被拦截了, 在这里catch其实就是捕获的意思, 假如说用我们上面举的栗子, 原本B只是看到了气球, 那么现在 B就是在看到了气球的同时把气球抓住了,不让气球往上飞, 那么view C自然也看不到了
给个运行效果
以上基本就是常用的属性剩余的也就不说了, 若是有用到会做补充,暂时给上官网说明
待补录
touchs
touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是
CanvasTouch数组）。 表示当前停留在屏幕上的触摸点。Touch
CanvasTouch
changedTouches
changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。
detail
自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。
点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。
