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