BroadcastChannel:weex跨页面通信

场景如下:

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

在这里,列表相当于一个主页面,详细信息界面是子页面。主界面浏览到第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中的函数,等等。

猜你喜欢

转载自blog.csdn.net/fyyyr/article/details/80393389