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

news/2024/7/20 1:23:01 标签: 小程序, 前端, javascript, 微信小程序

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

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

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

javascript"> 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页面

javascript"> 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页面

javascript">  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.niftyadmin.cn/n/5431130.html

相关文章

paddle ocr识别文字

paddle使用 # pip install paddlepaddle2.5.2 -i https://mirror.baidu.com/pypi/simple # pip install paddleocr2.7.0.3 -i https://mirror.baidu.com/pypi/simplefrom paddleocr import PaddleOCR from PIL import Image import numpy as npimage Image.open(./2.png) ocr…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Refresh)

可以进行页面下拉操作并显示刷新动效的容器组件。 说明: 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 子组件 支持单个子组件。 从API version 11开始,Refresh子组件会跟随手势下拉而下移…

基于单片机的交通信号灯控制系统实现

摘 要 随着社会的发展,人们生活水平的不断提高和家居用品的高档化,家庭安全隐患也随之增加,所以人们便进一步提高了对家庭的保护意识。因此,这就不得不促使安全防盗报警系统的普及与推广。 然而传统的防盗措施难以实现人们的需求…

Vue2(一):Vue介绍、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件

一、Vue介绍 Vue是一套用于构建用户界面的渐进式JavaScript框架。 1.Vue特点 (1)采用组件化模式,提高代码复用率、且让代码更好维护。 .vue里面封装了html、css、js,可以把那个模块直接拿来用 (2)声明…

mysql实战开发之 mysql 删除一张表某个字段的sql语句

有一张表, 我需要删除这张表其中的某一个或者某几个字段, 相信大家在日常开发中应该会遇到这种情况, 然后刚好自己接触的项目安装的mysql关闭了允许远程连接的设置, 也就是说不允许使用类似于navicat 等可视化工具连接, 那么就没办法通过可视化工具直接去通过鼠标操作就可以 完…

权衡后台数据库设计中是否使用外键

目录 引言 外键简介 对比 真实后台项目中的权衡 结论 引言 在大学学习数据库课程时,我们会早早的接触到外键这一概念,同时我相信大部分人在懂了外键的概念后都会觉得外键很重要,在涉及多表一定要用,但后来在我接触到真实项目…

【学习】PyTorch中的nn.Embedding的用法

基本理解 nn.Embedding(num_embeddings, embedding_dim)其中 num_embeddings 是词表的大小,即 len(vocab);embedding_dim 是词向量的维度。 nn.Embedding()产生一个权重矩阵weight,其shape为(num_embeddings, embedding_dim&…

【Qt问题】解决已经下载好的qt怎么添加或卸载其他组件

问题描述: 使用一段时间Qt以后发现需要用到某个组件,比如Qt Webengine这个组件等,而此时我又不可能把Qt卸载了,重新安装一次。 解决办法: 其实Qt提供了安装或卸载其他组件的方式,以下是操作步骤&#xff…