weex从.we转.vue之BroadcastChannel

背景描述

在weex中，从.we过度到.vue的过程中，很难规避的就是事件派发机制当中，对BroadcastChannel的替换，按照官方的推荐采用vuex去更换，但是我在浏览一遍vuex的文档之后，绝的在weex使用有点麻烦，就去社区溜达了一圈，看看有没有小伙伴们找到更合适的方法。

在一阵交流之后，根据大伙的推荐，在.vue文件中，都是采用 weex提供的globalEvent来处理。

这次的踩坑记，也是这个文档带来。下面我就来记录一下，这次踩坑的历程。

踩坑过程

前期准备

按照文档的要求，在fireGlobalEvent的时候，需要各端实现，因此按照要求在Objective-C，添加以下方法：

/**
 发送全局事件

 @param eventName 事件名称
 @param params 事件参数
 */
- (void)postGlobalEvent:(NSString *)eventName params:(NSDictionary *)params {
    [weexInstance fireGlobalEvent:eventName params:params];
}

并且暴露给weex使用： WX_EXPORT_METHOD(@selector(postGlobalEvent:params:))

准备好了这些，我就开始在.vue的文件中开始测试功能了。

Test One: 同一实例中,子组件发送,父组件监听

我是直接在我的项目中修改原先的代码的，下面的demo，也是我代码的一部分，项目中广场页面中，navigator组件上消息的触发按钮，换成调用刚刚native中扩展的postGlobalEvent方法， square-header.vue代码如下:

下面是square.vue的监听事件的代码：

测试结果

这样我就基本完成了，这个demo的所有工作，然后build,没有报错、最好run，打开这个页面，渲染成功，下面是我在点击搜索按钮，Xcode控制台的打印信息：

2017-06-22 10:47:53.338723 �[fg128,128,128; [log]WXJSCoreBridge.m:110, jsLog: ~~~~~~~~globalEvent 已经发送了~~~~~~~~~~~~~~~~~  �[;
2017-06-22 10:48:15.584984  �[fg128,128,128; [log]WXJSCoreBridge.m:110, jsLog: ~~~~~~~~test1~~~~~~~~~~~~~~~~~ {"index":"current index is 1"}  �[;

看到这结果，我表示心情还挺不错，因为还挺好用的，感觉一下子找到了好的方式去替换这些方法了。

就在我开心的劲头上，我继续开始了我实际方法的更换，首先第一个就是在登录成功后，要给多个页面(个人信息、权限相关的页面)发送通知，因此我开始了第二个测试，即在不同实例之间进行发送通知与监听。本以为信息十足的，结果出现的问题：

Test Two: 不同实例之间发送与接收

发送事件的实例：login.vue:

在上面代码中，可以定位到loginButtonClicked()方法，这是登录按钮执行的方面，在这个方法请求成功后，我会调用utils.postGlobalEvent('login-success', 'login succeed');方法，即发送一个全局事件的通知，名字叫做login-success；并在发送后返回到上一页面。

监听事件的实例： mine.vue