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

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

小程序开发中的事件是指视图层到逻辑层的通讯方式,主要是可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数,对象可以携带额外信息,如 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 中,这样就能最大化的实现一次开发多端上架,大幅降少在开发中的人力和成本投入。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/28534.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SolidUI社区-从开源社区角度思考苹果下架多款ChatGPT应用

文章目录 背景下架背景下架原因趋势SolidUI社区的未来规划结语如果成为贡献者 背景 随着文本生成图像的语言模型兴起,SolidUI想帮人们快速构建可视化工具,可视化内容包括2D,3D,3D场景,从而快速构三维数据演示场景。SolidUI 是一个创新的项目…

征稿 | 第三届粤港澳大湾区人工智能与大数据论坛(AIBDF 2023)

第三届粤港澳大湾区人工智能与大数据论坛(AIBDF 2023) 2023 3rd Guangdong-Hong Kong-Macao Greater Bay Area Artificial Intelligence And Big Data Forum 本次高端论坛围绕建设国家数字经济创新发展试验区进行选题。全面贯彻落实党的二十大精神&…

分析一下vue3下会造成响应式丢失的情况

前言 在我们从vue2过渡到vue3的时候,对于数据响应式的变化其实是懵懵懂懂的。从以往直接在data函数里面定义变量到每一次都要使用ref/reactive时,是有些不适应的。但问题不大,毕竟在大前端时代中,如果不及时跟上时代的步伐&#…

WEB集群——负载均衡集群

目录 一、 LVS-DR 群集。 1、LVS-DR工作原理 2、LVS-DR模式的特点 3、部署LVS-DR集群 3.1 配置负载调度器(192.168.186.100) 3.2 第一台web节点服务器(192.168.186.103) 3.3 第二台web节点服务器(192.168.186.…

LeetCode96. 不同的二叉搜索树

96. 不同的二叉搜索树 文章目录 [96. 不同的二叉搜索树](https://leetcode.cn/problems/unique-binary-search-trees/)一、题目二、题解 一、题目 给你一个整数 n ,求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种?返回满足题意的…

qt qml中各种Layout之间是如何对齐的?

问题描述: qt qml中下一个RowLayout如何对齐顶部到上方的ColumnLayout的底部略低一些间隔的位置? 我们怎么使用achors去锚定位置? 这些都是可以用anchors锚定属性,以及margin来设置的。 解决办法: 要实现将下一个R…

使用dockerfile安装各种服务组件

使用dockerfile安装各种服务组件 elasticsearch、minio、mongodb、nacos、redis 一、使用dockerfile安装elasticsearch:7.8.0 1、Dockerfile文件 FROM elasticsearch:7.8.0 #添加分词器 ADD elasticsearch-analysis-ik /usr/share/elasticsearch/plugins/elasticsearch-anal…

喆啡酒店十周年丨啡越时间限,ALL BY 10VE!

啡越时光热爱为伴 十年前,秉持对咖啡馆文化及复古风格的喜爱,喆啡酒店创造全新的Coffetel品类,将充满「温暖」「愉悦」「咖啡香」的格调体验带给消费者,成为无数人「旅途中的啡凡存在」。 十年间,喆啡酒店以热爱化为…

Dev控件 Gridcontrol,gridview 实现多选功能

在网上看了好多实现dev控件GridControl多选功能的方法,都很麻烦,其实GridControl有一个自带的实现多选功能的控件,很简单。 实现效果如下 无需代码代码,使用GridControl中自带的多选功能,在界面直接设置即可 1.找到要…

Redis的安装方法与基本操作

目录 前言 一、REDIS概述 二、REDIS安装 1、编译安装 2.yum安装 三、Redis的目录结构 四、基础命令解析 五、在一台服务器上启动多个redis 六、数据库的基本操作 (一)登录数据库 (二)基础命令 七、Redis持久化 (一&…

小白编写一个Chrome

步骤 1:了解插件的基本结构和功能 首先,向小白解释什么是Chrome插件,它是如何工作的,以及它可以做什么。强调插件可以修改网页内容、添加功能等。 步骤 2:准备工作 安装Chrome浏览器:确保小白的计算机上…

遇到无法复现的 Bug

当我们在软件开发过程中遇到无法复现的 Bug 时,这可能会让我们感到头疼和困惑。处理这种 Bug 需要一些技巧和方法来帮助我们更好地解决问题。本篇博客将为大家总结一些常用的技术手段和策略,希望能对开发者们在日常工作中遇到类似问题时提供一些帮助。 …

84. 柱状图中最大的矩形

题目描述 给定 n 个非负整数,用来表示柱状图中各个柱子的高度。每个柱子彼此相邻,且宽度为 1 。 求在该柱状图中,能够勾勒出来的矩形的最大面积。 示例 1: 输入:heights [2,1,5,6,2,3] 输出:10 解释:最…

分立式BUCK电路原理与制作持续更新

一、分立式BUCK电路总体原理图 下面改图包含了电压环和电流环。 二、BUCK电路与LDO的区别 LDO不适合在压差大的环境下使用,因为三极管因为CE极承受了压差,压差越大损耗的功率就越大,将三极管换成MOS管,MOS管两端的压差很小所以效…

什么是行级锁和表级锁

行级锁和表级锁是数据库中常见的两种锁机制,用于在多个事务并发访问数据库时控制数据的访问权限和并发操作。 行级锁(Row-Level Locking): 行级锁是指在数据库表中对每一行数据进行锁定,只有被锁定的行才不能被其他事…

【Spring专题】手写简易Spring容器过程分析

前置知识 《【Spring专题】Spring底层核心原理解析》 思路整理 我们在上一节《【Spring专题】Spring底层核心原理解析》课里面有简单分析过一个Spring容器的一般流程,所以,本节课我们这里尝试写一下简易的Spring容器。 手写源码示例 一、手写前的准…

List、Map、Set打印

List List:和数组类似,List可以动态增长,查找元素效率高,插入删除元素效率低,因为会引起其他元素位置改变。 普通[1,2] 1.循环 2.System.out.println(list); int数组[1,2,3,4,5,6,1,2,3] 1.for (int[] array : list)…

【ARM64 常见汇编指令学习 16 -- ARM64 SMC 指令】

文章目录 ARMv8 同步异常同步异常指令SMC TYPE 上篇文章:ARM64 常见汇编指令学习 15 – ARM64 标志位的学习 下篇文章:ARM64 常见汇编指令学习 17 – ARM64 BFI 指令 ARMv8 同步异常 在ARMv8架构中,同步异常主要包括以下几种: Un…

Llama 2:开放基础和微调聊天模型

介绍 大型语言模型(llm)作为高能力的人工智能助手,在复杂的推理任务中表现出色,这些任务需要广泛领域的专家知识,包括编程和创意写作等专业领域。它们可以通过直观的聊天界面与人类进行交互,这在公众中得到了迅速而广泛的采用。 法学硕士的能力是显著的考虑到训练的表面上…

重生之我要学C++第七天(匿名对象、内部类)

构造函数的隐式类型转化 1.单参数构造函数隐式类型转换 来看下面的代码 #include<iostream> using namespace std; class A { public:A(int x){_a x;} private:int _a; }; int main() {A a 3;return 0; } 此处这句代码 A a 3; 对于这里&#xff0c;编译完全正确&…