微信小程序一对多个页面间传递数据进行通信,事件触发的实现方法

这篇具有很好参考价值的文章主要介绍了微信小程序一对多个页面间传递数据进行通信,事件触发的实现方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在有些场景下,使用组件间通信或者组件和页面间通信并不可行。比如我需要只有一个websocket实例,并且需要向多个页面传递我接收到的消息。

下面的方法是一个页面向其它页面(触发事件)传递数据,其它页面也可以向这个页面传递数据。也就是可以互相传递。缺点是,这个页面必须曾经打开过。

首先,在app.js中的onLaunch里这样定义:

this.pages = {};

假设有2个页面:

a.js

b.js

分别在这2个js文件中,onLoad事件中,写如下代码:

app.pages[this.__route__] = this;

分别在这2个js文件中,定义一个方法,用于接收收到的消息。比如我们可以这样写(communication 随便命名即可):

communication(res){
    console.log(res)
}

如果你想从a.js里往b.js发数据(触发事件communication),那么在a.js里这样写:

try{
    app.pages['pages/b/b'].communication("I am from a.js");
}catch{
    console.log('b页面未打开过')
}

前面说过了,分别写接收消息的方法communication,那么

在b.js里需要这样写:

//在b.js里接收消息
communication(content){
            console.log('in b.js,' + content)
//再给a.js发一条消息
        try{
            app.pages['pages/a/a'].communication("I am from b.js");
        }catch(e){
            console.error("error in b.js " + e.message)
        }
    }

上面的代码,因为在b.js里又给a.js发了一个消息,那么你要在a.js里也写一个communication方法(前面已经说过要在需要接收消息的js中分别写communication):

在a.js里加几行代码,用于接收b.js发来的消息:

communication(content){
    console.log('in a.js, ' + content)
},

多个页面同理。文章来源地址https://www.toymoban.com/news/detail-726128.html

到了这里,关于微信小程序一对多个页面间传递数据进行通信,事件触发的实现方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序路由以及跳转页面传递参数

    路由 在app.json的pages里面写 \\\"pages/页面/页面\\\" 直接保存pages直接生成非常方便  跳转页面 wx.navigateTo() 保留当前页面,跳转到应用内的某个非tabBar页面。 text bindtap=\\\"daka\\\"点击/text 会保留返回箭头 底部导航跳转在app.json写入即可 传参以及接收参数 1、本地存储 使用方法:和js差不

    2024年02月11日
    浏览(56)
  • 微信小程序与内嵌h5页面之间的参数传递

    小程序是采用vue+taroui技术栈 h5页面 所在文件:h5.vue 小程序页面:wx.vue,这里我用的是taro获取当前页面栈,大家可以用wx 这里的this.routerParams==={params:1} 小程序页面:wx.vue,首先向内嵌h5的webview所在页面跳转并携带所传参数。 webview页面—/pages/processLink/index。index.vue,由该页面

    2024年02月15日
    浏览(82)
  • uni-app 返回上一个页面并传递参数(微信小程序)

    方法一 问题: 会记住每次返回. 并在下次获取参数时把所有的返回监听进行 全部返回 ( 不确定别人使用时是否会出现此问题 ) 打印示例结果如下: 打印说明: 获取用户信息1: 为每次进入第二个页面 (onload) 请求的数据 监听到事件来自返回的参数: 为第一个页面监听获取的数据 方

    2024年02月09日
    浏览(71)
  • 猿创征文|微信小程序扫描二维码如何跳转小程序内指定页面并传递参数给目标页面?

    实际项目中,用户通过扫描打印小票上的二维码,自己实现开具发票功能,那么这里就需要用户在扫描小票二维码后,跳转小程序内添加开票信息并提交后台开具发票的页面。 首先二维码的本质就是一个链接地址。 其次登录微信小程序开放平台,设置 扫普通链接二维码打开

    2023年04月08日
    浏览(58)
  • 微信小程序 - 解决 setData() 无法修改 properties 数据的问题,修改子组件 properties 传递过来的数据(父级页面传入子组件的数据无法更新修改的问题,简洁快速解决方案!)

    当页面(父组件)传递给子组件属性时,需要使用 properties 属性接收,但遗憾的是后续无法对该属性下的数据进行更新数据。 本文实现了微信小程序开发中,解决子组件使用 properties 接收后,无法进行数据的编辑与更新问题, 简单来说,就是组件内部无法通过 setData 对 pro

    2024年02月16日
    浏览(81)
  • 【面试必会,微信小程序的页面跳转和参数传递 ,程序员必会知识

    index.wxml: 在index.wxml页面添加一个元素,在元素里面使用属性url就可以 运行: 跳转的数据传递 以wx.navigateTo为例: 上面讲述,wx.navigateTo传入的url是跳转的页面(使用相对路径) wx.navigateTo({ url:“pages/home/home” }); 那么参数传递至下一页面,则只需要在路径后面,添加?问号,?

    2024年04月14日
    浏览(65)
  • 【微信小程序】使用页面跳转并携带多个特定参数

    在我们项目的搭建时常常会用到页面跳转,在微信小程序中也支持多个跳转类型。如( wx.switchTabwx.reLauchwx.redirectTowx.navigateTowx.navigateBack )等等, 每一个路由API都是有相对应的特定跳转功能 ,在这里我就不赘述了。 微信开发者文档关于路由的知识点 这里我们 项目的需求 是

    2023年04月18日
    浏览(61)
  • 微信小程序wx.navigateTo传给子页面参数(单个参数、多个参数)

    子页面接收 传多个参数 子页面接受 假设值是后端传过来的动态的值

    2024年02月07日
    浏览(52)
  • vue页面动态生成二维码,扫描二维码跳转到微信小程序,同时传递参数

    最近领导提了个新的需求, 点击表格时,弹出一个二维码,微信扫描此二维码时,跳转到微信小程序,同时将所在行的id(即员工所在公司的id)传过去,这样员工在登录微信小程序时,根据此id就知道是哪个公司的员工登录或者注册 了! 刚开始想的是,直接把小程序的二维

    2024年02月11日
    浏览(82)
  • 微信小程序数据传递的综合指南

    数据传递是现代应用程序开发中的一个关键问题。在微信小程序中,传递数据的方式有很多种,每种方式都有其适用的场景和优势。在本文中,我将为大家介绍微信小程序中常用的数据传递方式,并提供一些实用的技巧和建议,帮助大家在开发微信小程序时更好地处理数据传

    2024年02月05日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包