JS 和 Native 的沟通主要通过两个关键方法进行:
-
callNative是一个由native代码实现的函数, 它被JS代码调用并向native发送指令,例如rendering,networking,authorizing和其他客户端侧的toast等API. -
callJS是一个由JS实现的函数, 它用于Native向JS发送指令. 目前这些指令由用户交互和Native的回调函数组成.
native -> JS
除了注册事件，其他 在底层都是调用 callJS 方法，在SDK在这两个方法上面封装一层：
fireEvent 和 callback。
例如：
method:callJS, args:(
3,
(
{
args = (
1,
"ok titleXXX"
);
method = callback;
module = jsBridge;
}
)
)
js 在 vue-framework 中有一个 jsHandlers 对象，定义了 fireEvent和callback。
1.fireEvent
native 主动发起的事件，例如 click，viewappear,viewdisappear等等。
2.callback
native 给 js 的回调
JS -> native
调用 global.callNative。客户端接收后 根据参数，生成 对应的 NSInvocation,调用。
如果 调用方法 argument有 callback参数，则将这个 argument 生成一个 block,等到 native callback 时，就调用这个 block。
argument = [^void(NSString *result, BOOL keepAlive) {
[[WXSDKManager bridgeMgr] callBack:instanceId funcId:(NSString *)obj params:result keepAlive:keepAlive];
}
再上一层的话由 task-center.js 负责。
1.send
js 主动发起 调用 native 事件，定义在 task-center.js 中。
send (type, options, args) {
const { action, component, ref, module, method } = options
args = args.map(arg => this.normalize(arg))
switch (type) {
case 'dom':
return this[action](this.instanceId, args)
case 'component':
return this.componentHandler(this.instanceId, ref, method, args, { component })
default:
return this.moduleHandler(this.instanceId, module, method, args, {})
}
}
2.callback
js 给 native 的回调。
调用流程
在Weex中，目前最新版本中事件总共分为4种类型，通用事件，Appear 事件，Disappear 事件，Page 事件。
Weex 是用 js 来开发的，所以 native 主动发起的事件 都是没有回调的。只是通知 js 一些native 触发事件而已。
native->js
native 发起 fireEvent，调用 callJS 方法，将method name 和 参数 打包成 json 传递给 js。
js 用 receiveTasks接收后分发给 framework 的receiveTasks。receiveTasks再调用到 fireEvent，根据 instanceID 找到对应的 instance，调用 instance.document 的 fireEvent。
调用顺序：
callJS-> receiveTasks -> fireEvent -> instance.document.fireEvent -> if(domChanges){updateElement} -> element.fireEvent
js->native
普通事件 都是调用 callNative，还有另外三个方法：AddElement、callNativeComponent，callNativeModule
这三个方法因为 native 注册了，所以可以直接调用。如果没有注册，也会转到调用 callNative。
AddElement-
callNativeComponent：XElement 方法的调用 -
callNativeModule：主要是 module 的调用。
js 主动调用 native 都是调用 taskCenter 的 send 方法。taskCenter 是在 Document 初始化时，绑定到 Document 对象上的。
component 的更新，会调用 Element 对应的方法。例如：setAttr、setStyle 等。会根据 Element 绑定的 docId 找到 Document，调用 Document 的 taskCenter。
Element 的 docId 是在将 Element 添加到 Document 时绑定的。
调用顺序：
taskCenter.send->sendTasks->taskCenter.callbackManager.add(v)->global.callNative(...args)
native callback(also callJS)->receiveTasks->callback->taskCenter.callback(callbackId)-> taskCenter.callbackManager.consume->js callback 函数。
附global 中方法：
callAddElement: function()
callJS: function()
callNative: function()
callNativeComponent: function()
callNativeModule: function()
clearIntervalWeex: function()
clearTimeoutWeex: function()
createInstance: function()
destroyInstance: function()
getRoot: function()
nativeLog: function()
receiveTasks: function()
refreshInstance: function()
registerComponents: function()
registerMethods: function()
registerModules: function()
registerService: function()
setIntervalWeex: function()
setTimeout: function()
setTimeoutWeex: function()
unregisterService: function()
