事件机制是一种非常典型的通讯方式,可以在代码中的不同对象之间传递信息,也可以在应用的不同层面进行沟通协作。今天我们想看来一下微信小程序框架提供的事件处理机制。
小程序官方文档对事件的定义是:
- 事件是视图层到逻辑层的通信方式
- 事件可以将用户的行为反馈到逻辑层进行处理
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息,如 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对象中,包含了事件的名称,事件目标对象的信息,以及事件发生的在界面上的位置信息等等。我们在组件上设置的data-hi属性的值,也在target中的dataset上被携带了过来,这是比较有用的,在实际开发中,我们可以利用这个特性,来传递更多视图层的信息到逻辑层进行处理。
如果你有DOM编程的经验,你就会在这里想到,小程序里事件的冒泡和非冒泡是怎么处理的?如果你还不了解什么是事件冒泡,那我在这里解释一下:
在HTML或者WXML这些基于XML的树形结构的界面布局方式中,元素与元素之间是有层级关系的,子级元素上触发的事件,可以向父级元素逐层向上传递,所以,父级元素上也可以捕获子级元素上的事件并进行逻辑处理。
这种事件冒泡的机制,在实际的开发中也经常会用到,所以我们有必要来了解下在小程序中,是如何来使用冒泡事件的。WXML中分别提供了两种方式,用来绑定事件处理函数:
1. 使用 bind 开头的事件绑定,这种绑定不会阻止冒泡事件向上冒泡
2. 使用 catch 开头的事件绑定,这种绑定可以阻止冒泡事件向上冒泡
直观起见,我们直接来看一个示例代码:
在这个示例代码中,有三个逐级嵌套的view元素,最里层的是content元素,最外层的为outer-container元素。最里层和最外层的元素上,使用了bind属性绑定了tap事件的处理函数,而中间的innner-container上,使用了catch属性进行tap事件绑定。
然后,我们尝试在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>组件的触摸事件不可冒泡。
相关推荐
微信小程序是不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开的应用,在微信小程序的使用过程中,用户只增不减,很多的公司都开始研发属于自己的小程序,那么小程序该...
1、如果对本套系统感兴趣的朋友可以扫微信小程序二维码进行体验(或者微信小程序里搜索:黔都有趣)。因为没有后台,你可能无法下载后直接使用。前端代码是开源了的,但后端不是。 2、本次上传的插件和你通过小程序...
旨在简化小程序开发管理流程,降低开发门槛,提高开发效率。 API文档 中文API文档 主要特性 针对已有的小程序原生API进行简单二次封装,支持更多对原生API的简洁调用方式及链式调用方式。 托管小程序页面JS处理...
最近在开发小程序用到了WebSocket,小程序提供了相应的原生API,与H5的API使用方式上有一些区别,所以流行的H5的一些成熟的类库使用起来有些困难,而原生API又存在一些缺陷,所以就自己实现了一套心跳重连机制。...
微信小程序Demo-TAB切换是一个功能丰富且易于定制的示例项目,它展示了如何在微信小程序中实现TAB页面的切换效果。通过这个项目,开发者可以学习到如何使用微信小程序的API和组件来创建流畅的用户界面,以及如何管理...
《微信小程序开发实战》是专注于微信小程序开发的 Web 前端教材,涉及微信小程序 页面组件、应用接口 API、事件机制、登录、获取用户信息、Node.js 搭建服务器、第三方 框架的使用等。通过本课程的学习,学生能够...
微信小程序申请模板-电商平台对用户交易纠纷处理的机制或方案.pdf微信小程序申请模板-电商平台对用户交易纠纷处理的机制或方案.pdf微信小程序申请模板-电商平台对用户交易纠纷处理的机制或方案.pdf微信小程序申请...
利用微信小程序的同步缓存实现的微信小程序cookie机制,并重写了wx.request方法自动处理cookie
如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的unionid是唯一的。...
微信小程序尝试做的小型聊天应用 能够实现简单的聊天 发送图片 发送语音 发送视频 后台使用java web技术 核心功能为wesocket技术 采用心跳机制,每隔5s发送一个报文,保持聊天的长连接
微信小程序作为一种全新的移动应用形态,越来越受到企业和开发者的青睐。开发一个微信小程序商城需要掌握小程序的开发技术以及相关的业务知识。以下是一份关于微信小程序商城代码解说的补充说明: 1. 小程序架构和...
2017 年微信小程序正式上线,其是一种无须下载安 装即可实时应用的程序软件,用户通过手机移动端“扫一 扫”“搜一搜”就可打开程序。与传统 App 应用相比, 微信小程序不仅降低了产品的研发成本,同时节省了系统 ...
基于微信小程序的停车场管理系统结合SSM框架的设计与实现,旨在为车主提供便捷、高效的停车场管理服务,优化停车场资源利用和停车体验,主要包括以下功能: 停车位实时查询:微信小程序展示停车场内各停车位的实时...
本套视频从微信小程序的基础知识开始讲起,涵盖了适配方案、数据绑定、自定义事件机制、模板使用、列表渲染、本地缓存、背景音乐播放及发送ajax请求等内容, 在学习知识点的同时会同步完成项目,让你能快速上手小程序...
微信小程序申请模板-电商平台对用户交易纠纷处理的机制或方案.docx微信小程序申请模板-电商平台对用户交易纠纷处理的机制或方案.docx微信小程序申请模板-电商平台对用户交易纠纷处理的机制或方案.docx微信小程序申请...
前端使用了简洁明了的HTML和CSS技术,结合微信小程序框架,实现了流畅的动画效果和响应式布局。后端则采用了高效的JavaScript语言,通过事件驱动和数据绑定机制,确保了游戏的高性能运行。 此外,这份源码还具备良好...
基于微信小程序的小区疫情防控系统结合SSM框架的设计与实现,旨在为小区居民提供便捷、高效的疫情防控服务,促进小区内疫情管控和居民健康管理,主要包括以下功能: 疫情信息发布:管理员可以通过微信小程序发布...
(模版)电商平台对用户交易纠纷处理的机制或方案-附件 (模版)电商平台对入驻经营者的审核要求或规范文件-附件 (模版)《电商平台服务协议》与交易规则 (模版)电商平台对用户交易纠纷处理的机制或方案-附件 ...
基于微信小程序的马拉松报名系统结合SSM框架的设计与实现,旨在为跑步爱好者提供便捷、高效的马拉松活动报名服务,促进跑步活动的组织和参与,主要包括以下功能: 活动信息展示:微信小程序展示最新的马拉松活动...
PHP微信小程序解决方案PhpMall针对小程序特性,提供了商城跟PHP后台进行交互的解决方案,帮助用户高效完成小程序开发,项目持续更新中...。 DiyGw是一个基于TwoTHink开源的内容管理框架,由Onethink基础上升级到...