BroadcastChannel:weex跨页面通信

2023-10-27

场景如下:

一个列表页面用于展示所有未完成的作业。点击列表的某一项,会跳转到该项作业的详细信息界面,可以在这里将作业标记为已完成。一旦标记后,列表中就不应该再存在此作业了。

在这里,列表相当于一个主页面,详细信息界面是子页面。主界面浏览到第10个作业,发现该作业已完成,于是点击详细信息,将其标记为已完成。跳转回主界面,此时主界面还是停留在第10个作业上。因为主界面并没有刷新。

于是希望子界面点击处理并完成时,会向主界面发一个消息,让主界面刷新。

使用BroadcastChannel即可实现。

 

BroadcastChannel即广播。不同的weex页面执行环境不同,包括全局变量,都是相互隔离的。然而BroadcastChannel可以实现跨页面通信。

使用时:

A页面在合适的时机,例如挂载时,定义BroadcastChannel来接收广播通知:

mounted() {
    var self = this;
    // 定义BroadcastChannel,用于响应子页面发来的广播
    const broadcast = new BroadcastChannel('testChannel')
    broadcast.onmessage = function (event) { 
        console.log("接收消息:"+event.data);
        self.title = "新标题";
        let newTitle = self.getTitle();
    }
},

B页面在函数中发送消息:
onClick() {
   
// 发送通知消息
    const broadcast= new BroadcastChannel('testChannel');
   
broadcast.postMessage('this is amessage.');

},

这样,当点击B页面的按钮,触发onClick函数时,B页面的BroadcastChannel就会将消息'this is amessage.'发送到'testChannel'频道中。所有关注'testChannel'频道的BroadcastChannel都会收到通知。其中event.data就是自定义的通知消息。

然后A页面就可以在接收消息的回调函数onmessage中做一些自定义的处理操作,例如改变data的数据,调用methods中的函数,等等。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

BroadcastChannel:weex跨页面通信 的相关文章

  • Weex简介和环境的安装——Weex的学习之路(一)

    Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验 来构建 Android iOS 和 Web 应用 简单来说 在集成了 WeexSDK 之后 你可以使用 JavaScript 语言和前端开发经验来开发移动应用 也就是说
  • 【C++简明教程】找数组或者Vector中最大最小值的索引

    导言 今天带来的程序是找出数组或者 Vector 中最大最小值的索引 在 Python 中 我们可以使用 numpy 库快速实现 那接下来就看看 C 是怎么实现的吧 主要使用到的函数是 max element 和 min element 基
  • 自定义Weex组件——Weex的学习之路(八)

    在四月份和五月份的时候我用业余时间来学习weex 在这期间一直在看文档写demo 每一个组件都自己写demo运行一遍 我本人是做Android开发的 对JS CSS和Html有一定的了解 所以学习weex不是很难 然后我把自己所学的主要经历
  • BroadcastChannel:weex跨页面通信

    场景如下 一个列表页面用于展示所有未完成的作业 点击列表的某一项 会跳转到该项作业的详细信息界面 可以在这里将作业标记为已完成 一旦标记后 列表中就不应该再存在此作业了 在这里 列表相当于一个主页面 详细信息界面是子页面 主界面浏览到第10
  • JavaScript 经典「红宝书」,几代前端人的入门选择

    文末有活动 人的一生中总要读几本经典书 在这个 经典 泛滥的年代 什么才是权威的代表 我想大概是一本的书的口碑 能积累下上佳口碑的书 往往也是能经得住时间推敲的 比如这本 我相信所有前端开发者的案头都有这样一本书 这本书最早的版本第 2 版
  • Android 12上全新的应用启动API,适配一下?

    今日科技快讯 近日 谷歌宣布 将在欧洲市场上销售的Android手机中免费添加更多移动搜索应用 欧洲Android用户可以通过全新的 搜索引擎选项 来选择并设置自己设备上的默认搜索引擎 作者简介 本篇文章来自TechMerger同学的投稿
  • Weex加载数据缓冲旋转动画的实现

    Weex Ui已经上线了加载动画了点击这里跳转 手写的我眼泪都掉了下来 由于Weex手机端不支持gif图片 然而公司项目又要我加个加载动画 所以手写了一个动画加载组件 注意1 需要用到组件不会用组件的可以点击看看这篇文章 Weex Vue组
  • 终于知道程序员为什么总是带个耳机了!

    能别带耳机吗 你能别来打扰我工作吗 不能 前阵子有篇热文 当一个程序员一天被打扰 10 次 后果很惊人 看后网友都表示深有同感 来看看这些网友都是怎么讲的 热心市民 开发小哥哥旁边放着一个计数器 我好奇的问他这个是记录每天的bug数吗 他说
  • 使用weex,开发美食app之vue页面实现

    这里就带用weex大家做一个简单的app 数据接口来自 阿里云 https market aliyun com products 57126001 cmapi012028 html spm 5176 8216963 738024 10 mt
  • 真香!27寸三星曲面屏写代码零Bug,包邮送一台!

    最近有粉丝留言让我多搞些抽奖活动 为了感谢大家对本公众号的大力支持本次联合了10个号主 送27寸三星曲面屏显示器 祝所有人新的一年工作顺利 工资芝麻开花节节高 希望本次抽奖可以给你带来好运 生活不易 望大家加倍努力 升职加薪 事业家庭双丰收
  • 学会不被洗脑 很重要!

    大家好 我是北妈 今天发一个铁粉在桃花岛向我提问的问题 0 虚x 提问 最近网暴频发 网友甚至好友互相攻击 在越来越复杂的社会事件中 怎么提升自己的思考深度 怎么避免被洗脑 北妈怎么看 这个话题我不止一次说过了 就是其中一个原则 兼听则明
  • 我玩某宝新模式2个月收λ15万,你觉得过气的行业,真的很赚钱!

    如果有人问 有什么事 比穷更难受 我的回答一定是 马上过年了 我还在喝西北风 我的朋友先暴富了 这段时间 我就被闺蜜美美狠狠扎了心 以前她和我一样是个普通上班族 去年做微商囤了大几万的货卖不出去 老公气得要和她离婚 整日垂头丧气 谁知年底了
  • 2020年下一个创业风口是什么?

    提到风口 大家总是兴致勃勃 满心期待的看完一个风口项目后 剩下的不是去选择执行 而是继续问道 还有其它的风口项目吗 所以 在我看来 对于大多数人而言 风口就是继续追问 没完没了的问还有其它的吗 今年没有抓住风口 告诉自己 不能灰心 明年拜菩
  • weex 一个传说级巨坑-- 2018最新版weex踩坑指南(weex navigator 多界面跳转)

    先说结论 本人极度非常 不推荐weex作为任何商用开发 有很多人会说了 你瞎扯 你看别人阿里 啊飞猪 啊那个支付宝 人家不是用得好好的么 当然这也是我们公司作为技术选型的考量 三端通用 阿里系的app全线在用 理论上是可以实现的 而且我们在
  • weex组件的样式:不可使用间接筛选器

    weex本身自带了很多vue中没有的组件 例如
  • 陀螺研究院×BSN丨解析区块链视角下的消费者权益保护访谈全文发布

    3月是我国消费者权益保护月 在近日播出的3 15晚会中 央视曝光了科勒卫浴 宝马 Max Mara多家知名商店安装人脸识别摄像头 手机清理软件泄露老人隐私 瘦肉精羊等多个极其恶劣的消费者权益侵害行为 可以看出 随着数据时代的渐行渐近 消费者
  • 弃用Dubbo!这个新一代框架阿里都用疯了!

    哪个Java框架火 要说几年前 那你大可能会说是Spring Cloud Dubbo 但是现在 你还会说是它们吗 微服务当道 阿里巴巴开源一个Spring Cloud的子项目Spring Cloud Alibaba 它用两年的时间在众多架构
  • Weex实现富文本展示

    Weex默认不支持富文本展示 需要我们手动实现 已知的方式有两种 第一种方式 使用Weex Ui中的wxc rich text组件 它提供了丰富的功能样式 但是其局限性也是显而易见的 不能直接识别h5样式 第二种方式 第一步 自定义组件 请
  • 在腾讯连拿六个五星

    刚毕业入职腾讯工作 2 3 年 半年 年终绩效每次都是 5 4 星 不一定年薪百万 主要薪资 奖金无法决定 这个取决于股票是否上涨不少 但晋升肯定是最快的 在阿里拿 375 跟在腾讯拿 5 4 星的比例差不多 应届毕业能拿一次确实很优秀了
  • Weex简介及环境搭建(mac版)

    1 Weex简介及特点 weex 是一个使用 Web 开发体验来开发高性能原生应用的框架 在Ios和Android上都实现了一个渲染引擎 并提供了一套基础的内置组件 渲染出来的都是原生组件 提供了一套基础的内置模块 可以通过这些模块来调用一

随机推荐

  • kafka消费者模式

    一 单线程消费者模式 package nj zb kb23 kafka import org apache kafka clients consumer ConsumerConfig import org apache kafka clie
  • 关闭Windows Defender实时保护,暂时关闭和永久关闭方法

    暂时关闭Windows Defender实时保护 点击开始 设置 更新和安全 Windows安全中心 打开Windows安全中心 点击主页 病毒和威胁防护或管理设置 关闭实时保护 这样就暂时关闭了实时保护 就算不重启也可能某个时候又自动打开
  • 结构化查询语言之 SQL 视图定义(以 MySQL 为例)

    文章目录 1 视图介绍 2 视图定义 3 视图更新 查询使用的数据库文件下载 1 视图介绍 虚关系 并不预先计算并存储关系 而是在使用虚关系时才通过执行查询被计算出来 概念上包含查询的结果 任何不是逻辑模型的一部分 但作为虚关系对用户可见的
  • 中国1949至2019年的gdp图表_成都市1949至2019年,70年来历年GDP数据信息公布

    新中国成立时至此已经整整70年了 在这70年里成都市的经济发展可谓是非常亮眼 最近成都市发布的 成都市统计年鉴2019 受到了不少人的关注 其中最受关注的还是成都历年地区生产总值 也就是我们常说的GDP 具体名单见文末 在 成都统计年鉴20
  • Java中方法的学习

    目录 Java中的方法定义 设计方法的原则 方法的命名规则 代码实现 方法调用 方法的重载 方法学习不知死过多少次 还让我学是吧 你没完了哈 来 来 来 咱们一起来分析 老师 前面的关键字我讲过吧 数据类型还用说嘛 方法的定义格式我说过吧
  • 2023推免夏令营末班车

    南航 清华大学预推免全面开放 目录 曲阜师范大学 活动内容 哈工大预推免 学校 学院 网址 ddl result schedule 河海大学 人工智能与自动化学院 河海大学人工智能与自动化学院2023年全国优秀大学生夏令营活动有关安排的通知
  • React Hooks 入门下

    前面的话 上篇介绍了 useState 和 useEffect 两个钩子函数 这篇将接着介绍其他常用的钩子函数 1 useCallback 作用 该 hooks 返回一个 memoized 回调函数 根据依赖项来决定是否更新函数 其依赖项可
  • VsCode写Python代码!这代码简直和大神一样规范!太漂亮了!

    VsCode虽然没有Pycharm的功能齐全 但是也是有他的独特之处 今天就让大家见识一下 用VsCode写出的代码是怎么样的吧
  • 【Shell编程】Shell中Bash变量-位置参数变量

    目录 系列文章 位置参数变量 实例 理解参数 实例 剩余参数 实例 区别整体对待和单独对待 系列文章 Shell编程 Shell基本概述与脚本执行方式 Shell编程 Shell中Bash基本功能 Shell编程 Bash变量 用户自定义变
  • Linux驱动开发(十六)---块设备驱动

    前文回顾 Linux驱动开发 一 环境搭建与hello world Linux驱动开发 二 驱动与设备的分离设计 Linux驱动开发 三 设备树 Linux驱动开发 四 树莓派内核编译 Linux驱动开发 五 树莓派设备树配合驱动开发 Li
  • 算法(1) MST - 最小生成树

    最小生成树 算法 概念 生成树 如果连通网G的一个子图是一棵包含G的所有顶点的树 则该子图称为G的生成树 最小生成树 在连通网G的所有生成树中 所有边的代价和最小的生成树 称为最小生成树 Kruskal 算法 又称为加边法 将边排序后从小到
  • 清除css的display属性

    今天在项目中遇到了一个要清除display属性的问题 整了半天才搞好 给大家分享一下 var b obj attr id var a document getElementsByName b for var i 0 i
  • Spring Cloud Ribbon的使用详解

    目录 一 概述 1 Ribbon是什么 2 Ribbon能干什么 3 Ribbon现状 4 未来替代方案 5 架构说明 二 RestTemplate 用法详解 三 Ribbon核心组件IRule 四 实战项目 1 回顾之前的项目 2 Rib
  • win7右键打开方式添加应用程序无法设置

    针对某些绿色软件包 当我们移动软件包的位置时 再次设置默认打开方式会出现无法设置的情况 如下图 选择要设置的文件 gt 右击 gt 打开方式 gt 选择默认程序 浏览选择默认打开方式的应用 点击打开设置默认程序 结果是打开方式中并没有Not
  • 【点击按钮 复制文本】实现点击按钮复制文本内容(vue和uniapp两种方式实现)

    一 Vue使用clipboard实现点击按钮复制文本内容 1 安装clipboard js npm install clipboard save 2 具体代码 div class copybox 复制 div
  • Redis高并发缓存架构实战

    示例代码 Service public class ProductService Autowired private ProductDao productDao Autowired private RedisUtil redisUtil A
  • 拉勾教育

    开篇词 开篇词 Java 性能优化 是进阶高级架构师的炼金石 你好 我是李国 作为 Java 性能优化与面试 21 讲 这个课程的作者 我先来简单介绍下自己 我曾任京东金融 陌陌科技高级架构师 工作期间 我接触的都是比较底层的中间件和操作系
  • Redis学习笔记7:Redis持久化-RDB、AOF

    一 什么是RDB 1 Redis DataBase 在指定的时间间隔内将内存中的数据集快照写入磁盘 也就是行话讲的Snapshot快照 它恢复时是将快照文件直接读到内存里 Redis会单独创建 fork 一个子进程来进行持久化 会先将数据写
  • 软件测试经验分享

    软件测试 一个熟悉又略显陌生的词汇 不同人对软件测试有不同的理解 如果把软件比作一片辽阔的区域 地形复杂 设置有许多个目的地 每个目的地都有多条道路可以到达 每条道路上都可能埋藏了威力不一的地雷 测试人员的职责就是在用户进入这片区域之前 试
  • BroadcastChannel:weex跨页面通信

    场景如下 一个列表页面用于展示所有未完成的作业 点击列表的某一项 会跳转到该项作业的详细信息界面 可以在这里将作业标记为已完成 一旦标记后 列表中就不应该再存在此作业了 在这里 列表相当于一个主页面 详细信息界面是子页面 主界面浏览到第10