【微信小程序开发】深入探索事件绑定、事件冒泡、页面跳转的逻辑实现

2024-05-14 14:12
文章标签 实现 微信 逻辑 页面 深入 绑定 事件 探索 冒泡 程序开发 跳转

本文主要是介绍【微信小程序开发】深入探索事件绑定、事件冒泡、页面跳转的逻辑实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，linux，shell脚本等实操经验，网站搭建，数据库等分享。

所属的专栏：微信小程序开发零基础教学，难点与应用实战总结
景天的主页：景天科技苑

文章目录

  • 事件绑定
    • 事件绑定定义
    • 最简单使用
  • 事件冒泡
    • 定义
    • 事件对象-传参
  • 页面跳转
    • 1.组件跳转（声明式导航）
    • 2.最基本的跳转
    • 3.更多跳转方式--》open-type属性跳转方式
      • 3.1 上述演示
    • 4.跳转携带参数
    • 5.js跳转（编程式导航）

事件绑定

事件绑定定义

事件绑定指的是某些按钮，或者某些组件，在我们点击的时候，能够触发事件执行

  • 打印xx
  • 向后端发送请求
  • 。。。。

最简单使用

wxml中

绑定事件语法 bind:tap 绑定点击事件

<button type="warn" plain size="mini" bind:tap="handleConsole">点击控制台打印</button>

可以绑定很多事件，但是我们用的最多的还是点击事件
在这里插入图片描述

绑定事件，需要赋值一个js的方法名，在js代码中写

js中

所有js代码，必须放在Page里面

Page({handleConsole(){console.log('我被点了')},})

当我们点击按钮，就会在触发绑定事件，在控制台打印出内容
在这里插入图片描述

bind:tap=“handleConsole” 可以简写，把冒号去掉。 bindtap=“handleConsole”
在这里插入图片描述

事件冒泡

定义

当子标签和父标签/祖籍标签绑定了相同的事件后，当子标签事件触发，会继而触发父级标签/祖籍标签的事件
点击儿子标签会触发父级标签\祖父标签…等等的所有点击事件,这叫事件冒泡

父组件–》套了子组件

  • 子组件上有事件

  • 父组件上也绑定了事件

  • 点击子组件–》子组件事件触发—》父组件事件也会触发

  handleParent(){console.log("父亲被点了")},handleChildren(){console.log("孩子被点了")},

wxml

<view style="height: 400rpx;width: 750rpx; background-color: pink; display: flex; justify-content: center;align-items: center;" bind:tap="handleParent"><button type="primary" plain bind:tap="handleChildren">按钮1</button>

阻止事件冒泡，使用catch来绑定事件

<button type="primary" plain catch:tap="handleChildren">阻止事件冒泡</button>
</view>

点击按钮1，发生了事件冒泡
在这里插入图片描述

点击阻止事件冒泡，只有子组件里面的事件触发了，阻止了事件冒泡
在这里插入图片描述

事件对象-传参

  • 1 当绑定了事件后–》函数都是可以接收一个参数 事件对象(event)

  • 2 传参–》放到event事件对象中–》js中可以取出来使用，事件对象传参有如下两种方式

    • data-* 方案
    • mark: 用来自定义属性

js代码

js代码函数里面的参数event就是事件对象

  handleClick01(event){//currentTarget:事件绑定者--->view//target: 事件触发者--》view// 如果有事件冒泡--》他们里面的值是不一样的console.log(event)console.log(event.target.dataset)console.log(event.target.dataset.name)console.log(event.mark.name)}

wxml代码
在这里设置参数和参数值

<view bind:tap="handleClick01" data-id='1001' data-name='jingtian' mark:name='xxx'>点我</view>

当点击 点我，js会把参数放到event对象中传进去，会在控制台打印出我们设置的内容
通过data-* 设置的参数，通过event.target.dataset来获取
通过mark设置的参数，通过event.mark来获取
在这里插入图片描述
在这里插入图片描述

页面跳转

1.组件跳转（声明式导航）

  • navigator 组件跳转 ，在组件上加属性–》实现跳转
    先创建个页面
    在这里插入图片描述

2.最基本的跳转

然后在我的页面添加个导航按钮

<!-- 组件跳转，用navigator，通过url指定要跳转的路径 --><navigator url="/pages/login/login"><button type="primary" plain>去登录</button></navigator>

在这里插入图片描述

点击去登录，就会哦跳转到登录页面
在这里插入图片描述

3.更多跳转方式–》open-type属性跳转方式

navigate（默认）：保留当前页面，所以左上角有个返回按钮，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
redirect： 关闭当前页面，左上角没有返回按钮，只有返回主页面按钮，跳转到应用内的某个页面。但不能跳转到 tabbar 页面
switchTab：只能跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch：关闭所有页面，打开到应用内的某个页面
navigateBack：关闭当前页面，返回上一页面或多级页面

3.1 上述演示

<navigator url="/pages/login/login"><button type="primary" plain>去登录</button></navigator>
<navigator url="/pages/login/login" open-type="navigate"><button type="primary" plain>去登录2</button></navigator>

默认的可以返回原页面
在这里插入图片描述

<navigator url="/pages/login/login" open-type="redirect"><button type="primary" plain>去登录3</button></navigator>

redirect不再有返回上一页页面，而是返回主页面按钮
在这里插入图片描述

<navigator url="/pages/index/index" open-type="switchTab"><button type="primary" plain>去首页</button></navigator>

可以跳转到指定的tabBar
在这里插入图片描述

一点，就返回到了首页
在这里插入图片描述

<navigator url="/pages/login/login" open-type="reLaunch"><button type="primary" plain>去登录4</button></navigator>

跳转到指定页面
在这里插入图片描述

回退，一般写在被跳转的页面中，当跳转过来，点击回退就会回退到之前页面，当然如果之前页面被销毁，也是回退不了的

<navigator open-type="navigateBack" ><button>回退</button></navigator>

在这里插入图片描述

4.跳转携带参数

  • 直接在跳转处用问号跟参数，多个参数用&连接：
<navigator url="/pages/login/login?name=jingtian&age=19"><button type="primary" plain>去登录</button></navigator>

此时，我们可以通过开发工具下面的页面参数看到携带的参数
在这里插入图片描述

一点击按钮，就可以携带的参数
在这里插入图片描述

  • 携带的参数，则呢么获取呢，需要写在js的生命周期的钩子中
    在这里插入图片描述
 onLoad(options) {console.log(options)},

点击去登录，就可以在控制台看到携带的参数
在这里插入图片描述

5.js跳转（编程式导航）

使用js控制跳转

5个方法–》跟上面是对应的

wx.navigateTo({url: 'url',
})wx.redirectTo({url: 'url',
})wx.switchTab({url: 'url',
})wx.reLaunch({url: 'url',
})wx.navigateBack()

页面

<button type="default"  bind:tap="handlenavigateTo">navigateTo</button>
<button type="warn" bind:tap="handleredirectTo">redirectTo</button>
<button type="primary" bind:tap="handleswitchTab">switchTab</button>
<button type="default" bind:tap="handlereLaunch">reLaunch</button>
<button type="warn" bind:tap="handlenavigateBack">navigateBack</button>

js
使用wx.相关跳转函数即可

  handlenavigateTo(){wx.navigateTo({url: '/pages/login/login',})},handleredirectTo(){wx.redirectTo({url: '/pages/login/login',})},handleswitchTab(){wx.switchTab({url: '/pages/index/index',})},handlereLaunch(){wx.reLaunch({url: '/pages/login/login',})},handlenavigateBack(){// 关闭当前页面，返回上一页或上某一页，传入数字wx.navigateBack()wx.navigateBack({delta:2})},

在这里插入图片描述

在这里插入图片描述

携带参数也是在路径后面加，感兴趣的朋友试试吧

这篇关于【微信小程序开发】深入探索事件绑定、事件冒泡、页面跳转的逻辑实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/988956。

相关文章

pandas中位数填充空值的实现示例

pandas中位数填充空值的实现示例

《pandas中位数填充空值的实现示例》中位数填充是一种简单而有效的方法,用于填充数据集中缺失的值,本文就来介绍一下pandas中位数填充空值的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是中位数填充？为什么选择中位数填充？示例数据结果分析完整代码总结在数据分析和机器学习过程中，处理缺失数
阅读更多...
Golang HashMap实现原理解析

Golang HashMap实现原理解析

《GolangHashMap实现原理解析》HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持高效的插入、查找和删除操作,：本文主要介绍GolangH... 目录HashMap是一种基于哈希表实现的键值对存储结构，它通过哈希函数将键映射到数组的索引位置，支持
阅读更多...
Pandas使用AdaBoost进行分类的实现

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost？使用 AdaBoost 的步骤安装必要的库步骤一：数据准备步骤二：模型
阅读更多...
使用Pandas进行均值填充的实现

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据（NaN值）是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充？为什么选择均值填充？均值填充的步骤实际代码示例总结在数据分析和处理过程中，缺失数
阅读更多...
Java对象转换的实现方式汇总

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》：本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射（Manual Mapping）2. Builder模式3. 工具类辅助映
阅读更多...
Go语言开发实现查询IP信息的MCP服务器

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服
阅读更多...
SpringBoot基于配置实现短信服务策略的动态切换

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商（如阿里云、腾讯云、华为云）后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置（application.yml）配置类绑定短信发送策略接口示例：阿里云 & 腾
阅读更多...
python实现svg图片转换为png和gif

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展：基于Py
阅读更多...
Python利用ElementTree实现快速解析XML文件

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.
阅读更多...
Java的栈与队列实现代码解析

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念（Stack）栈的实现代码队列（Queue）模拟实现队列(双链表实现)循环队列（循环数组
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2