- 地址:湖北武汉三环科技园
- 电话:159116031100
- 传真:027-68834628
- 邮箱:mmheng@foxmail.com
当前所在位置:首页 - 魅力重庆
- 微信小法度榜样深刻懂得系列:微信小法度榜样事宜机制
- 事宜机制是一种异常典范的通信方法,可以在代码中的不合对象之间传递信息,也可以在应用的不合层面进行沟通协作。今天我们想看来一下微信小法度榜样框架供给的事宜处理机制。
小法度榜样官方文档对事宜的定义是:
- 事宜是视图层到逻辑层的通信方法
- 事宜可以将用户的行动反馈到逻辑层进行处理
- 事宜可以绑定在组件上,当达到触发事宜,就会履行逻辑层中对应的事宜处理函数。
- 事宜对象可以携带额外信息,如 id, dataset,在可预见的将来,微信小程序自助开发肯定会有很大的市场,谁能尽快掌握这一技能,谁就能赚到第一桶金, touches。
从这里我们可以看到,官方文档重要将事宜用于小法度榜样中针对用户交互行动的处理,即视图层(WXML)到逻辑层(Page)的通信,微信小程序开发指南是微信公众平台正式发布的一份小程序开发指南,最近微信小程序的上线在圈内真是掀起了一场大风波,逻辑层收到这些用户行动事宜后,可以进行营业处理,然后根据情况反馈或不反馈成果给用户。
好,那我们今天就撇开事宜的其他用法,专门就讲视图层和逻辑层之间的事宜用法。
总体上来说,小法度榜样中的事宜机制在工作道理上来讲,和HTML DOM的事宜机制是一致的。在HTML中,我们可以经由过程在HTML元素上设置一个如onclick=clickHandler(event)的属性来绑定用户的页面点击事宜处理函数。而在WXML中,我们为一个组件绑定一个事宜处理函数,可以应用如下语法来完成:
这里的bindtap就可以懂得为将tap(点击)事宜,绑定到一个名为tapName的事宜处理函数上来进行处理。然后在响应的Page代码中,我们须要定义这个tapName函数:
如许完成了一个简单的tap事宜的处理。当我们在小法度榜样的界面上去点击这个显示为Click me的view组件的时刻,view组件捕获到这个tap动作,然后告诉Page中的tapName函数,要对这个动作进行处理,同时,它也为tapName函数供给了足够多的信息,也就是event对象,来赞助我们更好更精准的处理我们的营业逻辑。我们可以来看一下我们这个例子中的event对象里面包含了哪些内容:
event
这里我们可以看到,在event对象中,包含了事宜的名称,事宜目标对象的信息,以及事宜产生的在界面上的地位信息等等。我们在组件上设置的data-hi属性的值,也在target中的dataset上被携带了过来,这是比较有效的,在实际开辟中,我们可以应用这个特点,来传递更多视图层的信息到逻辑层进行处理。
假如你有DOM编程的经验,你就会在这里想到,小法度榜样里事宜的冒泡和非冒泡是怎么处理的?假如你还不懂得什么是事宜冒泡,那我在这里解释一下:
在HTML或者WXML这些基于XML的树形构造的界面构造方法中,元素与元素之间是有层级关系的,子级元素上触发的事宜,可以向父级元素逐层向上传递,所以,父级元素上也可以捕获子级元素上的事宜并进行逻辑处理。
这种事宜冒泡的机制,在实际的开辟中也经常会用到,所以我们有须要来懂得下在小法度榜样中,是若何来应用冒泡事宜的。WXML平分别供给了两种方法,用来绑定事宜处理函数:
1. 应用 bind 开首的事宜绑定,这种绑定不会阻拦冒泡事宜向上冒泡
2. 应用 catch 开首的事宜绑定,北京微信小程序开发细节你必须注意,这种绑定可以阻拦冒泡事宜向上冒泡
直不雅起见,我们直接来看一个示例代码:
index.wxml
index.wxss
在这个示例代码中,有三个逐级嵌套的view元素,最里层的是content元素,最外层的为outer-container元素。最里层和最外层的元素上,应用了bind属性绑定了tap事宜的处理函数,而中心的innner-container上,应用了catch属性进行tap事宜绑定。
然后,我们测验测验在content上点击一下,可以看到如许的成果:
点击content的成果
content和inner-container元素的tap事宜处理函数被履行了,而outer-container元素的没有被履行。这解释在点击content的过程中,产生的tap事宜向父级元素传递,而作为content元素的父级元素inner-container, 它应用了能阻拦事宜冒泡的catch方法,所以它在捕获经由过程冒泡情势过来的子级元素事宜并履行事宜处理函数后,让该事宜停止向上传递,是以同样是父级元素的outer-contaner,就不再能收到这个冒泡事宜了。
然后,来看一下,在不合层级的元素捕获的event对象,在数据方面有什么特点:
我们可以看到,在content的tap事宜处理函数中,event里面的target和currentTarget的id都是content。
而在inner-container中的event对象里,target的id为content,而currentTarget的id是inner-content。
由此我们可以知道,event对象中的target是事宜产生的泉源组件,而currentTarget则是当前捕获这个事宜的组件。
event对象中还包含其他一些有效的信息,如touches和changedTouches表示一个或多个手指在屏幕上的触摸地位和更改地位等信息,可以用来实现多点触摸的高等手势处理。
最后,关于事宜冒泡,有一点是值得留意一下的:在微信小法度榜样中,并不是所有事宜都是冒泡的,从官方文档懂得到,canvas组件的触摸事宜弗成冒泡。