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

在这里插入图片描述

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

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

🏆 作者简介:景天科技苑
🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,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.mzph.cn/bicheng/11901.shtml

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

相关文章

每日一题11:Pandas:数据重塑-透视

一、每日一题 解答&#xff1a; import pandas as pddef pivotTable(weather: pd.DataFrame) -> pd.DataFrame:df_pivot weather.pivot(indexmonth, columnscity, valuestemperature)return df_pivot 题源&#xff1a;力扣 二、总结 Pandas 是一个强大的 Python 数据分析…

数据可视化(十):Pandas数据分析师职位信息表分析——箱线图、水平柱状图、学历城市双维分析等高级操作

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…

20240513每日后端---聊聊策略模式+责任链解决业务多if判断

责任链模式 责任链模式是一种行为设计模式&#xff0c; 允许你将请求沿着处理者链进行发送。 收到请求后&#xff0c; 每个处理者均可对请求进行处理&#xff0c; 或将其传递给链上的下个处理者。 策略模式 策略模式是一种行为设计模式&#xff0c; 它能让你定义一系列算法&…

Rpcx (二):传输

一、Transport 传输 rpcx 可以通过 TCP、HTTP、UnixDomain、QUIC和KCP通信。你也可以使用http客户端通过网关或者http调用来访问rpcx服务。 TCP 这是最常用的通信方式。高性能易上手。可以使用TLS加密TCP流量。 Example: 101basic 服务端使用 tcp 做为网络名并且在注册中心…

C++之map和set 的封装

通过红黑树的学习&#xff08;C之红黑树-CSDN博客&#xff09;让我了解到map和set的底层如何实现&#xff0c;这一次我们来对map和set进行封装。 目录 1.map和set底层原理 2.map和set的定义 3.map和set的仿函数 4.map和set的插入 5.map和set的迭代器 5.1迭代器的构造 5.2…

Maven修改本地仓库的默认路径

前言 忽然发现当时下载Maven时候的默认路径没有与Maven放到同一个文件夹内&#xff0c;强迫症的我就想着修改一下Maven的路径&#xff01;也方便后续我的jar包管理&#xff0c;放到C盘下可能会导致占用C盘空间等等问题吧。以下是我的操作过程&#xff1a; 一、创建一个本地仓库…

QX---mini51单片机学习---(6)独立键盘

目录 1键盘简绍 2按键的工作原理 3键盘类型 4独立键盘与矩阵键盘的特点 5本节相关原理图 6按键特性 7实践 1键盘简绍 2按键的工作原理 内部使用轻触按键&#xff0c;常态按下按键触点才闭合 3键盘类型 编码键盘与非编码键盘 4独立键盘与矩阵键盘的特点 5本节相关原理…

GStreamer中如何自定义配置线程优先级

1.引言 如果看了gstreamer官方教程配置多线程出现编译不过的问题了&#xff0c;不妨进来看看这篇文章或许能解决一些编译问题。 GStreamer 本质上是多线程的&#xff0c;并且是完全线程安全的。大多数线程内部对应用程序是隐藏的&#xff0c;这应该使应用程序开发更容易。但是&…

RabbitMQ--死信队列

目录 一、死信队列介绍 1.死信 2.死信的来源 2.1 TTL 2.2 死信的来源 3.死信队列 4.死信队列的用途 二、死信队列的实现 1.导入依赖 pom.xml 2.application.properties 3.配置类 4.生产者 5.业务消费者&#xff08;正常消费者&#xff09; 6.死信队列消费者 一、…

Linux系统安全整改实践指南

在当前信息化高速发展的时代&#xff0c;Linux操作系统凭借其开源、稳定和高效的特点&#xff0c;在服务器市场占据着举足轻重的地位。然而&#xff0c;随着网络威胁的日益复杂化&#xff0c;确保Linux系统的安全性成为了一项至关重要的任务。本文旨在提供一套全面的Linux系统安…

leetcode 1319.连通网络的操作次数

思路&#xff1a;DFS&#xff08;连通块&#xff09; 其实一开始的时候&#xff0c;并不知道这道题的精髓在哪&#xff0c;总想着&#xff0c;啊&#xff1f;这怎么用图论的思想做啊&#xff1f; 细细思考之后&#xff0c;这道题还是比较有意思的&#xff0c;需要有一定的数据…

# Mysql 数据库区分大小写吗?

Mysql 数据库区分大小写吗&#xff1f; 1、MySQL 数据库在区分大小写方面有特定的行为&#xff0c;这取决于多个因素&#xff0c;包括操作系统、配置参数以及使用的字符集。 2、数据库名和表名&#xff1a; 在 Linux 系统中&#xff0c;数据库和表名是严格区分大小写的。 而…

【前端性能优化】深入解析重绘和回流,构建高性能Web界面

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 &#x1f3af; 引言&#xff1a;探索Web性能的基石&#x1f3d7;️ 基础概念&#xff1a;什么是重绘和回流&#xff1f;&#x1f4cc; 回流&#xff08;Reflow&#xff09;&#x1f4cc; 重绘&#xff08;Repaint&#xff0…

蓝桥杯国赛每日一题:交换瓶子(图论,环,贪心)

题目描述&#xff1a; 有 N 个瓶子&#xff0c;编号 1∼N&#xff0c;放在架子上。 比如有 5 个瓶子&#xff1a; 2 1 3 5 4要求每次拿起 2 个瓶子&#xff0c;交换它们的位置。 经过若干次后&#xff0c;使得瓶子的序号为&#xff1a; 1 2 3 4 5对于这么简单的情况&#…

使用Flask部署Web应用:从入门到精通

文章目录 第一部分&#xff1a;准备工作第二部分&#xff1a;部署Flask应用到AWS部署到AWS Lambda 第三部分&#xff1a;部署Flask应用到腾讯云服务器部署到腾讯云服务器 第四部分&#xff1a;优化和扩展结论 在现代软件开发中&#xff0c;Web应用的部署是一个至关重要的环节。…

使用Flask-SocketIO构建实时Web应用

文章目录 准备工作编写代码编写HTML模板运行应用 随着互联网的发展&#xff0c;实时性成为了许多Web应用的重要需求之一。传统的HTTP协议虽然可以实现实时通信&#xff0c;但是其长轮询等机制效率低下&#xff0c;无法满足高并发、低延迟的需求。为了解决这一问题&#xff0c;诞…

python常见数据的存取

python数据的存取 python数据的存取数据的保存3.1.1 保存list3.1.2 保存Dict3.1.3 保存Set3.1.4 保存Dataframe3.1.5 保存Matrix 3.2 数据的读取3.2.1 读取txt文件中的数据3.2.2 读取excel文件中的数据3.2.3 读取csv文件中的数据3.2.4 读取stata文件中的数据3.2.5 读取R文件中的…

计算机发展史故事【14】

大象踢踏舞 如果要把电脑50 年的历史划分为两个不同的阶段&#xff0c;那么&#xff0c;1981 年无疑是个分界线。就在那一年&#xff0c;IBM 公司推出个人电脑PC 机&#xff0c;使人类社会大步跨进个人电脑新时代。今天&#xff0c;全世界正在使用的PC 机已达到2 亿台&#xf…

视频拼接融合产品的产品与架构设计(三)内存和显存单元数据迁移

上一篇文章 视频拼接融合产品的产品与架构设计(二) 这一篇沉下先来&#xff0c;彻底放弃了界面&#xff0c;界面最终的体现是最后要做的&#xff0c;现在要做的是产品的架构&#xff0c;使用链式架构方式迁移数据。同时增加插件口&#xff0c;方便编程序。 插件架构 为了视频…