需求
现在有很多页面需要在返回的时候刷新,比如从购物车跳转到详情页加购,再到购物车,这时候应该刷新页面;如果从订单列表页点击付款跳转后进行支付后,返回的时候刷新数据。
viewappear 和 viewdisappear事件
首先想到的是weex已经提供的绑定到根元素的viewappear 和 viewdisappear事件。使用方法是绑定到根元素上,自定义过component的同学在这里应该不难猜到它是基于fireEvent实现的
。
-
1、在Android里,是在onresume里发送viewappear事件,在onpause里发送viewappear。
接入的时候只要在对应的地方调用对应weexInstance的resume和pause即可:public void onResume() { if (wxInstance != null) { wxInstance.onActivityResume(); } }
public void onPause() { if (wxInstance != null) { wxInstance.onActivityPause(); } }
-
2、在iOS里,在viewDidAppear里发送viewappear事件,在viewDidDisappear里发送事件。这里可以参考官方demo的WXDemoViewController实现:
```
-
(void)updateInstanceState:(WXState)state {
if (_instance && _instance.state != state) {_instance.state = state; if (state == WeexInstanceAppear) { [[WXSDKManager bridgeMgr] fireEvent:_instance.instanceId ref:WX_SDK_ROOT_REF type:@"viewappear" params:nil domChanges:nil]; } else if (state == WeexInstanceDisappear) { [[WXSDKManager bridgeMgr] fireEvent:_instance.instanceId ref:WX_SDK_ROOT_REF type:@"viewdisappear" params:nil domChanges:nil]; }
}
}
-(void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
[self updateInstanceState:WeexInstanceAppear];
} -
(void)viewDidDisappear:(BOOL)animated {
[super viewDidDisappear:animated];
[self updateInstanceState:WeexInstanceDisappear];
}
`` 到此,viewappear 和 viewdisappear事件是可以满足以上返回刷新的需求的,只要在vue 里判断:
当触发viewappear事件时,如果不是第一次触发,就当做是返回,根据需求,做刷新请求就可以了。`
还没结束
由此想到,如果不仅需要这样的事件,还想给当前页面,从native发其他事件到js,也不基于界面元素,那么该如何办呢?
首先想到的是weex提供的globalEvent,三端都可以发送事件,接收的时候只要注册一下就好了。
var globalEvent = weex.requireModule('globalEvent');
globalEvent.addEventListener("geolocation", function (e) {
console.log("get geolocation")
});
不过,经过实验会发现,它是全局的,意思是,一个activity/viewcontroller包含多个weex时,只要注册了这个事件,那么就都会收到这个事件。那么一旦我们发送的事件名称出现一样时,就埋了坑,可能出现事件错乱。
这里的解决方案可能会想到规范event name来达到杜绝名称一样的情况,不过这更多是一种治标不治本的办法。
于是乎
于是就有了本文要介绍的方案,让页面传的事件只有自己页面的js处理。
讲道理,这个功能,要是在weex sdk里实现再好不过了。
原理
说来简单,该方案基于globalEvent,携带instanceId,weex里通过比对instanceId,只有一致的情况下才进行处理。
Android:
在渲染weex的fragment/activity的onresume里调用:
resumed:成员变量,默认false
if (resumed) { Map<String,Object> params = new HashMap<>(); params.put("id", wxInstance.getInstanceId()); wxInstance.fireGlobalEventCallback("resume", params); } resumed = true;
在自定义module里增加接口:
@JSMethod(uiThread = true) public void getInstanceId(final JSCallback callback) { if (null != callback) { JSONObject jsonObject = new JSONObject(); jsonObject.put("id", mWXSDKInstance.getInstanceId()); callback.invoke(jsonObject); } }
iOS:
在渲染weex的viewController里调用:
resumed:成员变量,默认false
-(void)viewDidAppear:(BOOL)animated{ [super viewDidAppear:animated]; if (self.resumed) { [_instance fireGlobalEvent:@"resume" params:@{@"id": _instance.instanceId}]; } self.resumed = true; }
在自定义module里增加接口:
-(void)getInstanceId:(WXModuleCallback)callback{ callback(@{@"id": weexInstance.instanceId}); }
weex 处理:
weex工程里,封装一个函数,其中shopBase
是自定义的module
const shopBase = weex.requireModule('shopBase');
export default {
methods: {
/**
* config:
* {
* event, name of event
* callback
* }
*/
addEventListener(event, callback) {
if(weex.config.env.platform.toLowerCase() !== 'web') {
shopBase.getInstanceId((data) => {
const globalEvent = weex.requireModule('globalEvent');
const id = data.id;
globalEvent.addEventListener(event, function (e) {
if(e.id === id) {
callback(e);
}
});
})
}
},
},
};
在需要的页面调用即可,用法同globalEvent:
addEventListener('resume', function (e) {
shopModal.toast({ message: e.id });
});