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

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

小程序开发中的事件是指视图层到逻辑层的通讯方式,主要是可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数,对象可以携带额外信息,如 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 互不相同的 二叉搜索树 有多少种?返回满足题意的…

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

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

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

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

Redis的安装方法与基本操作

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

84. 柱状图中最大的矩形

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

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

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

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

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

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;编译完全正确&…

Mac M1 安装Oracle Java 与 IEDA

文章目录 1 官网下载2 安装IDEA参考 1 官网下载 https://www.oracle.com/ 使用finder中的拖拽进行安装即可 2 安装IDEA https://www.jetbrains.com/zh-cn/idea/download/?sectionmac 同样的&#xff0c;下载完后拖拽安装即可 参考 Mac M1 安装Java 开发环境 https://blog.…

HTML 元素的 class 和 id 属性有何区别?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 唯一性⭐ 选择器权重⭐ JS操作⭐ CSS和JavaScript引用⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏…

python+vue生成条形码码并展示

需求 最近想做一个小工具&#xff0c;大概要实现这样的效果&#xff1a;后端生成条形码后&#xff0c;不保存到服务器&#xff0c;直接返回给前端展示。 大概思路是&#xff0c;通过 python-barcode库 生成条码的字节流&#xff0c;生成字节流后直接编码成base64格式返回给前…

SpringBoot MDC全局链路解决方案

需求 在访问量较大的分布式系统中&#xff0c;时时刻刻在打印着巨量的日志&#xff0c;当我们需要排查问题时&#xff0c;需要从巨量的日志信息中找到本次排查内容的日志是相对复杂的&#xff0c;那么&#xff0c;如何才能使日志看起来逻辑清晰呢&#xff1f;如果每一次请求都…

XML基础知识讲解

文章目录 1. xml简介2. xml快速入门3. xml的元素(标签)定义4. xml标签的命名规范5. xml的属性定义和注释6. 转义字符7. CDATA区8. xml的处理指令9. xml的约束 1. xml简介 XML&#xff08;eXtensible Markup Language&#xff09;是一种用于描述数据的标记语。 它以纯文本的方…

使用 Etcher 制作U盘系统盘

Etcher 资料&#xff1a; https://github.com/balena-io/etcher/blob/master/SUPPORT.md

司徒理财:8.9黄金早盘低多,黄金走势分析操作建议

黄金早盘1923现价做多看涨&#xff0c;黄金将开启反弹&#xff0c;低多&#xff0c;上方压力1945一线&#xff01;黄金4小时周期下跌macd指标已经背离&#xff0c;昨日虽然破位新低&#xff0c;但没有延续&#xff0c;形成小双底结构&#xff01;弱不再弱必转强&#xff01;今日…