小程序路由跳转---事件通信通道EventChannel(二)

事件通信通道EventChannel实现两个页面之间的数据传输已在上篇小程序路由跳转—事件通信通道EventChannel(一)展开叙述,接下来讨论下多个页面(三个及以上)数据的通道如何构建。

本文重点:三个以上页面需将事件通信通道保存在一个公共可访问的实例中,比如app全局实例。

以下示例以三个页面为例
A页面

 onLoad: function () {wx.navigateTo({url: 'B?id=1',// events: 注册将在目标页面触发(派发)的同名事件的监听器events: {// 定义A页面和B页面之间的通道事件PageAacceptDataFromPageB: function (data) {console.log('B页面返回给页面A的数据', data)},// 定义A页面和C页面之间的通道事件PageAacceptDataFromPageC: function (data) {console.log('页面A收到C页面数据', data)}},success: function (res) {console.log(res.eventChannel)// 通过eventChannel向被打开页面传送数据res.eventChannel.emit('PageAacceptDataFromPageB', { data: 'page A->B' })}})},

B页面

 onLoad: function (option) {//注意this.getOpenerEventChannel() 只能在navigateTo模板页面使用,其他更多页面使用时,//可以保存在getApp()全局实例中以备其他页面使用// 保留AB通道事件,已备C页面给A页面发送数据const eventChannel = this.getOpenerEventChannel()// 保留AB通道事件,已备C页面给A页面发送数据getApp().pageBeventChannel = eventChannel// 监听PageAacceptDataFromPageB事件,获取上一页面通过eventChannel传送到当前页面的数据eventChannel.on('PageAacceptDataFromPageB', function (data) {console.log('页面B收到来自页面A的数据', data)})eventChannel.emit('PageAacceptDataFromPageB', { data: 'page B->A' });wx.navigateTo({url: 'C?id=1',events: {// 定义B页面和C页面之间的通道事件PageBacceptDataFromPageC: function (data) {console.log('C页面返回给页面B的数据', data)}},success: function (res) {// 通过eventChannel向被打开页面传送数据res.eventChannel.emit('PageBacceptDataFromPageC', { data: 'page B->C' })}})},

C页面

  onLoad: function (option) {const eventChannel = this.getOpenerEventChannel()// 监听PageBacceptDataFromPageC事件,获取上一页面通过eventChannel传送到当前页面的数据eventChannel.on('PageBacceptDataFromPageC', function (data) {console.log('页面C收到来自页面B的数据', data)})eventChannel.emit('PageBacceptDataFromPageC', { data: 'Page C->B' });// 使用AB通道的PageAacceptDataFromPageC事件给A发送数据const pageBeventChannel = getApp().pageBeventChannelpageBeventChannel.emit('PageAacceptDataFromPageC', { data: 'Page C->A' });},

运行结果

至此小程序路由跳转—事件通信通道EventChannel就告一段落,欢迎各位小伙伴积极互动。

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

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

相关文章

jenkin部署spring boot项目【从0到1】

写在前面,遇到的很多错误 本来想用docker启动Jenkins的,也这样做了,但是遇到了一个非常严重的问题,就是mvn命令在docker里面不生效,然后就修改文件,但是发现vi不存在,好的。接着用yum安装vi工具…

【Stable Diffusion】入门-02:AI绘画提示词+参数设置攻略

目录 1 提示词1.1 分类和书写方式1.1.1 内容型提示词1.1.2 标准化提示词1.1.3 通用模板 1.2 权重1.2.1 套括号1.2.2 数字权重1.2.3 进阶语法 1.3 负面提示词 2 参数详解2.1 Sampling steps2.2 Sampling method2.3 Width, Height2.4 CFG Scale2.5 Seed2.6 Batch count, Batch si…

Vue2 引入自己下载的SVG图像的方式

Vue2 引入下载的SVG图像的方式 Step 1:安装依赖 npm i svg-sprite-loader --saveStep 2:创建文件路径 // index.js import Vue from vue import SvgIcon from /components/SvgIcon// svg component// register globally Vue.component(svg-icon, Svg…

pytorch fasterrcnn-resnet50-fpn 神经网络 目标识别 应用 —— 逻辑概述

pytorch fasterrcnn-resnet50-fpn 神经网络 目标识别 应用 —— 逻辑概述 前提:工欲善其事必先利其器一、逻辑概述1 模型训练1) 训练数据2) 网络结构 2 推理识别 [下一章 推理识别代码讲解](https://blog.csdn.net/qq_42239488/article/details/126309847)&#xff…

《JAVA与模式》之抽象工厂模式

系列文章目录 文章目录 系列文章目录前言一、使用简单工厂模式的解决方案二、引进抽象工厂模式三、抽象工厂模式结构四、抽象工厂模式的优缺点前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看…

Hubspot 2023年推荐使用的11个AI视频生成器

视频是任何营销活动不可或缺的一部分;然而,如果你不懂编辑或时间紧迫,它们可能会很乏味,很难创建。一只手从电脑里伸出来,拳头碰到另一只手;代表AI视频生成器。 幸运的是,你可以利用许多人工智能…

【数据分析】数据分析介绍

专栏文章索引:【数据分析】专栏文章索引 目录 一、介绍 二、生活中的数据分析 1.无处不在的数据 2.为什么要进行数据分析? 三、数据挖掘案例 1.案例分析 一、介绍 数据采集:数据采集是指从不同来源收集原始数据的过程,包括…

【linux无root权限安装gcc8.3.0并指定自定义路径】(已解决)

【linux无root权限安装gcc8.3.0并指定自定义路径】(已解决) 本人情况:先介绍我的情况,我用的是公共服务器,并且没有root权限。我要安装某个包,但是系统的gcc版本太低,不匹配导致报错,所以我先无root安装了gcc10.1版本的,但是出现一个问题就是安装后我再去安装那个包,又…

考研失败, 学点Java打小工——Day3

1 编码规范——卫语句 表达异常分支时&#xff0c;少用if-else方式。   比如成绩判断中对于非法输入的处理&#xff1a; /*>90 <100 优秀>80 <90 良好>70 <80 一般>60 <70 及格<60 不及格*/Testpu…

Twitter广告投放技巧

明确目标受众&#xff1a; 确定你的目标受众&#xff0c;包括他们的兴趣、地理位置、年龄等。Twitter提供了广告定位选项&#xff0c;确保你的广告被展示给最相关的用户。 使用吸引人的图像和视频&#xff1a; 在Twitter上&#xff0c;图像和视频是引起关注的关键。确保你的广…

小程序开发平台源码系统:万能建站门店小程序功能 带完整的搭建教程以及代码包

在移动互联网时代&#xff0c;小程序以其独特的优势&#xff0c;迅速占领了市场的一席之地。然而&#xff0c;对于许多中小企业和个人开发者来说&#xff0c;缺乏专业的开发团队和技术支持&#xff0c;使得小程序开发成为一项难以逾越的技术门槛。小编给大家分享一款万能建站门…

linux 使用docker安装 postgres 教程,踩坑实践

linux 使用docker安装 postgres 教程 踩坑实践,安装好了不能远程访问。 防火墙已关闭、postgres 配置了允许所有ip 访问、网络是通的。端口也是开放的&#xff0c;就是不能用数据库链接工具访问。 最后发现是云服务器端口没开 ,将其打开 到这一步完全正确了&#xff0c;但是…

Python AI 之Stable-Diffusion-WebUI

Stable-Diffusion-WebUI简介 通过Gradio库&#xff0c;实现Stable Diffusion web 管理接口 Windows 11 安装Stable-Diffusion-WebUI 个人认为Stable-Diffusion-WebUI 官网提供的代码安装手册/自动安装不适合新手安装&#xff0c;我这边将一步步讲述我是如何搭建Python Conda…

【数据结构】单向链表的创建及4种应用

目录 前言 自定义“单向”链表类 1. 自定义一个链表类&#xff0c;并完成“初始化链表”、“添加元素&#xff08;头插法/尾插法&#xff09;”、“计算链表长度”操作&#xff1b; 自定义链表 向链表中插入元素&#xff08;头插法&#xff09; 向链表中插入元素&#xf…

2024年AI辅助研发:技术革新引领研发新纪元

文章目录 &#x1f4d1;前言一、AI辅助研发的技术进展二、行业应用案例三、面临的挑战与机遇四、未来趋势预测全篇总结 &#x1f4d1;前言 随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已逐渐成为推动社会进步的重要力量。特别是在研发领域&#xff0c;A…

Flink异步io关联Hbase

主程序 public static void main(String[] args) throws Exception {//1.获取流执行环境StreamExecutionEnvironment env StreamExecutionEnvironment.getExecutionEnvironment();env.setParallelism(1);SimpleDateFormat formatter new SimpleDateFormat("yyyy-MM-dd H…

计算机视觉——目标检测(R-CNN、Fast R-CNN、Faster R-CNN )

前言、相关知识 1.闭集和开集 开集&#xff1a;识别训练集不存在的样本类别。闭集&#xff1a;识别训练集已知的样本类别。 2.多模态信息融合 文本和图像&#xff0c;文本的语义信息映射成词向量&#xff0c;形成词典&#xff0c;嵌入到n维空间。 图片内容信息提取特征&…

【北京大学】徐高《金融经济学二十五讲》

一、经济的任务 经济的任务之一是确保有效地分配稀缺资源&#xff0c;这是经济学中的一个核心问题。资源是有限的&#xff0c;而需求是无限的&#xff0c;因此经济系统需要通过合理的机制来分配资源以满足社会的需求。以下是关于经济分配资源的几个方面&#xff1a; 1. 资源配…

CentOS7.9 Nginx + EMQX集群组建 MQTTS平台

前面我们有介绍过单机版EMQX的安装 CentOS7 安装 EMQX&#xff08;MQTT&#xff09;&#xff0c;今天我们来讲一下实际项目里用的到MQTTS平台。 一、EMQX单机配置 简单部署两个节点&#xff0c;修改对应配置文件 (/usr/local/emqx/etc/emqx.conf) 中的node内容&#xff1a; nam…

HTML 学习笔记(十)块和内联

每个HTML元素都有一个默认的显示值&#xff0c;显示值又可以再分为block(块)和inline(内联) 一、块元素 通过F12进入浏览器开发者模式查看该元素会发现其所占宽度为整个网页的宽度 1.div标签 通过div标签将一些元素装进"盒子"&#xff0c;从而对盒子中的全部元素…