实践分享:小程序事件系统设计

这篇具有很好参考价值的文章主要介绍了实践分享:小程序事件系统设计。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序官方文档中解释说:事件是用于子组件向父组件传递数据,可以传递任意数据。

小程序开发中的事件是指视图层到逻辑层的通讯方式,主要是可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数,对象可以携带额外信息,如 id, dataset, touches。

汇总来说小程序的事件是一种处理用户交互的方式,通过监听用户的操作行为,触发相应的事件来处理具体的业务逻辑和显示效果。小程序事件主要包括用户操作事件和自定义事件,开发人员需要了解这些事件的方法和机制,以便正确地处理用户的操作,并实现良好的用户体验。

实践分享:小程序事件系统设计,小程序

 

实践分享:小程序事件系统设计,小程序

事件分类

小程序开发中的事件分为冒泡事件和非冒泡事件:

1、冒泡事件

当一个组件上的事件被触发后,该事件会向父节点传递。例如下图所示:

实践分享:小程序事件系统设计,小程序 

实践分享:小程序事件系统设计,小程序

2、非冒泡事件

当一个组件上的事件被触发后,该事件不会向父节点传递。无特殊声明都是非冒泡事件,如 form 的submit事件,input 的input事件,scroll-view 的 scroll 事件。

案例实操演示

具体如何操作我们这里以 WXML 为例,从底层逻辑上来讲,在我们还没有进行事件绑定时,只在小程序的 WXML 结构中声明了一个键值对。

将 WXML 进行 virtualDOM 编译,这里的编译就是 virtualDOM 使用过的 $gwx 函数,一起来看下声明的 tap 键值对编译在了哪里。

实践分享:小程序事件系统设计,小程序

 可以看到上面找到声明事件标记的层级中,attr 属性内部有 bindtap: bindTextTap 键值对。那么这个 DOM 结构是怎么进行事件解析的呢?

解析的算法在底层基础库 WAWebview.js 文件中,我们现在此提前解析一下事件模块完整的流程,为了防止到后面底层基础库章节再讲的话,知识形成不了闭环。

我这里解析的基础库版本为2.11.0。

底层基础库中解析 virtualDOM 函数 applyProperties 源码如下, attr 属性解析,包含事件解析。

实践分享:小程序事件系统设计,小程序 

实践分享:小程序事件系统设计,小程序

紧接着返回的l函数源码:

实践分享:小程序事件系统设计,小程序

 

实践分享:小程序事件系统设计,小程序

可以看到 applyProperties 中有一个 forIn 循环去遍历 virtualDOM 中的 attr 属性。

然后执行e函数,这里可知e函数的参数及为attr对象中的属性名称key。

e函数中有很多的if,是用来判断特殊的属性名称的,我们绑定的tap事件键值对是 bindtap: bindTextTap , key 也就是 bindtap ,事件绑定的前缀有很多比如 bind、catch,看到第10行左右的if中用正则if (n = e.match(/^(capture-)?(mut-)?(bind|catch):?(.+)$/)) 判断 attr 中的属性名是否为事件属性。如果是事件属性的话执行E函数,并且转换为 exparser 组件系统中的 attr 属性名称 exparser:info-attr- 。

小程序事件系统总结

小程序中,事件是处理用户交互的重要手段,通过监听用户操作行为和自定义事件,可以实现复杂的业务逻辑和良好的用户体验。开发人员需要了解不同的事件类型和触发方法,根据不同的业务需求进行灵活使用和处理。同时,良好的事件设计和处理也是提升应用程序质量和用户满意度的关键因素之一。

当我们说到小程序想必大家第一时间想到的就是微信小程序、支付宝小程序等,其实除了将我们开发好的小程序上架到各个平台之上,我们还可以通过集成FinClip SDK将小程序上架到自己的 App 中,这样就能最大化的实现一次开发多端上架,大幅降少在开发中的人力和成本投入。文章来源地址https://www.toymoban.com/news/detail-643365.html

到了这里,关于实践分享:小程序事件系统设计的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包