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

news2025/1/11 16:55:41

事件通信通道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().pageBeventChannel
    pageBeventChannel.emit('PageAacceptDataFromPageC', { data: 'Page C->A' });
  },

运行结果

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

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

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

相关文章

使用 Boot Camp 助理查明您的 Mac 需不需要 Windows 安装介质

使用 Boot Camp 助理查明您的 Mac 需不需要 Windows 安装介质 当前的 Mac 机型无需介质即可安装 Windows,也就是说,您不需要用到外置驱动器。较早的 Mac 机型需要用到 USB 驱动器或光盘驱动器。使用 Boot Camp 助理可查明您需要用到什么。 Boot Camp 助…

openGauss使用BenchmarkSQL进行性能测试(下)

上一篇我们分享了测试方法,本篇我们将发起测试及测试结果。 背景 本文提供openGauss使用BenchmarkSQL进行性能测试的方法和测试数据报告。 BenchmarkSQL,一个JDBC基准测试工具,内嵌了TPC-C测试脚本,支持很多数据库,…

百度paddleocr GPU版部署

显卡:NVIDIA GeForce RTX 4070,Nvidia驱动程序版本:537.13 Nvidia驱动程序能支持的最高cuda版本:12.2.138 Python:python3.10.11。试过python3.12,安装paddleocr失败,找不到相关模块。 飞桨版本…

使用C#的winform控制数据库实例服务的运行状态

一、得到sqlserver的实例名 二、引用对应的程序集和命名空间 using System.ServiceProcess; C#操作服务要用的类 ServiceController 声明类 private ServiceController serviceController new ServiceController("MSSQLSERVER"); 三、判断服务状态 serviceCon…

centos云服务器安装cs(cobaltstrike4.0)教程

1、先安装JAVA环境 mkdir download #创建download目录 cd download #进入download目录 mkdir java1.8 #在download目录下再创建java1.8目录 cd java1.8 #进入java1.8目录 wget https://repo.huaweicloud.com/java/jdk/8u201-b09/jdk-8u201-linux-x64.tar.gz #下载jdk压缩包 tar…

HarmonyOS NEXT应用开发—验证码布局

介绍 本示例介绍如何使用Text组件实现验证码场景,并禁用对内容的选中、复制、光标。 效果图预览 使用说明 单击组件可弹出输入法在进行验证码输入时,无法对中间单个数字进行更改,无法选中输入内容,无光标 实现思路 因为要禁用…

c语言实现https客户端 源码+详细注释(OpenSSL下载,visual studio编译器环境配置)

OpenSSL的下载和环境配置 请参考:openssl下载安装教程 步骤:官网下载->安装到选定目录->配置环境变量->打开命令窗口检查是否安装成功 注意: 打开命令窗口(快捷键winr,在弹出窗口内输入cmd按回车)&#xff0…

FPGA高端项目:FPGA基于GS2971+GS2972架构的SDI视频收发+OSD动态字符叠加,提供1套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本方案的SDI接收发送本方案的SDI接收图像缩放应用本方案的SDI接收纯verilog图像缩放纯verilog多路视频拼接应用本方案的SDI接收HLS图像缩放HLS多路视频拼接应用本方案的SDI接收HLS多路视频融合叠加应用本方案的S…

用连续自然数之和来表达整数 - 华为OD统一考试(C卷)

OD统一考试(C卷) 分值: 100分 题解: Java / Python / C 题目描述 一个整数可以由连续的自然数之和来表示。给定一个整数,计算该整数有几种连续自然数之和的表达式,且打印出每种表达式。 输入描述 一个目…

1.Python数据分析—数据分析与挖掘详讲

1.Python数据分析—数据分析与挖掘详讲 一个人简介二数据分析与挖掘概述三什么是数据分析和挖掘四数据分析与挖掘在不同领域的应用4.1医疗领域:4.1.1 建立疾病数据库:4.1.2 临床决策支持:4.1.3 疾病预警和监控: 4.2 电子商务领域&…

还原wps纯粹的编辑功能

1.关闭稻壳模板: 1.1. 启动wps(注意不要乱击稻壳模板,点了就找不到右键菜单了) 1.2. 在稻壳模板选项卡右击:选不再默认展示 2.关闭托盘中wps云盘图标:右击云盘图标/同步与设置: 2.1.关闭云文档同步 2.2.窗口选桌面应用…

【Unity+Vuforia】AR 发布安卓的设置

Player Settings > Resolution and Presentation > Default Orientation portrait Player Settings > Other Settings > Auto Graphics API 取消勾选 Player Settings > Other Settings > Graphics APIs 选择OpenGLES3删除其他的 Player Settings…

【矩阵】54. 螺旋矩阵【中等】

螺旋矩阵 给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素。 示例 1: 输入:matrix [[1,2,3],[4,5,6],[7,8,9]] 输出:[1,2,3,6,9,8,7,4,5] 解题思路 1、模拟顺时针螺旋顺序遍历矩阵…

pytorch之诗词生成6--eval

先上代码: import tensorflow as tf from dataset import tokenizer import settings import utils# 加载训练好的模型 model tf.keras.models.load_model(r"E:\best_model.h5") # 随机生成一首诗 print(utils.generate_random_poetry(tokenizer, model)…

Vscode中关于Java的一些问题

前言 在使用Vscode的时候,总是会有这么一种感觉:有时得这样,有时得那样,这让我甚是困惑,于是写下来这篇解答文章 为什么java文件有时候会有class文件,有时候没有 在编写Java代码时,我会有一种…

自习室预订系统|基于springboot框架+ Mysql+Java+B/S架构的自习室预订系统设计与实现(可运行源码+数据库+设计文档+部署说明)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 学生功能模块 管理员功能登录前台功能效果图 系统功能设计 数据库E-R图设计 lunwen参…

R语言语法基础(说人话版)

在Rstudio中使用ctrl回车来执行某一行的代码 在R语言中,通常不需要像C语言一样在每条语句的结尾添加分号来表示语句结束。R语言是一种脚本语言,它使用换行符来分隔语句,因此分号通常是可选的,除非你想在同一行上写多个语句。在R中…

QMI8658芯片I2C驱动开发指南

这个芯片纯国产挺好用的,电路很好设计,我这垃圾焊功,纯手焊,,居然能用。 第一部分 硬件连接 画的很简陋,看看就可以了,这里I2C总线需要接10K上拉没有画出来,这个需要注意一下。 …

鸿蒙实战开发:【分布式软总线组件】

简介 现实中多设备间通信方式多种多样(WIFI、蓝牙等),不同的通信方式使用差异大,导致通信问题多;同时还面临设备间通信链路的融合共享和冲突无法处理等挑战。分布式软总线实现近场设备间统一的分布式通信管理能力,提供不区分链路…

邮件自动化:简化Workplace中的操作

电子邮件在职场中的使用对于企业和组织的日常活动起着重要的作用。电子邮件不再仅仅是一种通信方式,已经成为现代企业和组织实施日常运营的关键要素。 除了通信,电子邮件对于需求生成、流程工作流、交易审批以及各种其他与业务相关的活动至关重要。在当…