Weex 原生 Module 调用解读
@(编程笔记)[Weex]
先放结论
结论
总体分为两段：SDK初始化，和 WeexInstance 实例。
- WeexSDK 初始化
在 WXJSCoreBridge 被初始化时，调用registerCallNativeModule方法，向jscontext注入callNativeModule全局block函数。
- WeexInstance 实例
原生端 WXSDKInstance init 的时候，生成 instanceId，用 instanceId 去初始化 js 端[[WXSDKManager bridgeMgr] createInstance:self.instanceId template:mainBundleString options:dictionary data:_jsData];
JS 端 WeexInstance init 的时候注册requireModule(moduleName)，里面将weexInstance 的 id 传入。
当需要调用的时候通过TaskCenter解析成 (id, module, method, args, options) 形式的参数，发起原生调用，原生拿到id，获取 id 对应 vc 。自然也就能拿到 vc 的 navigationController，发起 push。
Navigator weexInstance 引出的问题
最近在开发时遇到 Navigator 的问题。
首先 Navigator 的 push 方法是这样的：
- (void)push:(NSDictionary *)param callback:(WXModuleCallback)callback
{
id<WXNavigationProtocol> navigator = [self navigator];
UIViewController *container = self.weexInstance.viewController;
[navigator pushViewControllerWithParam:param completion:^(NSString *code, NSDictionary *responseData) {
if (callback && code) {
callback(code);
}
} withContainer:container];
}
具体说就是：
- 获取注册的
navigator - 获取当前调用这个方法的weex实例，也就是
weexInstance作为vc标示 - 用获取到的
weexInstance作为基础，调用它的navigationController去 push
这样的好处自然是push流程的正确而安全。
毕竟若是没有调用vc的实例，那么我们往往只能拿取当前UIWindow顶端的visibleViewController
public extension UIWindow {
/// Return the current visible view controller
public var visibleViewController: UIViewController? {
return UIWindow.getVisibleViewControllerFrom(self.rootViewController)
}
public static func getVisibleViewControllerFrom(_ vc: UIViewController?) -> UIViewController? {
if let nc = vc as? UINavigationController {
return UIWindow.getVisibleViewControllerFrom(nc.visibleViewController)
} else if let tc = vc as? UITabBarController {
return UIWindow.getVisibleViewControllerFrom(tc.selectedViewController)
} else {
if let pvc = vc?.presentedViewController {
return UIWindow.getVisibleViewControllerFrom(pvc)
} else {
return vc
}
}
}
}
let currentVC = UIApplication.shared.delegate?.window??.visibleViewController
currentVC?.navigationController?.popViewController(animated: true)
问题是 Navigator 这个模块的weexInstance是哪来的？
开始调试
为了搞清这个问题， 我把 Navigator 的 weexInstance 展开并打断点：
@synthesize weexInstance = _weexInstance;
- (void)setWeexInstance:(WXSDKInstance *)weexInstance {
_weexInstance = weexInstance;
}
- (id)weexInstance {
return _weexInstance;
}
然后，我使用如下脚本
<script>
console.log('Before require')
var navigator = weex.requireModule('navigator')
console.log('After require')
export default {
created () {
console.log('onCreated')
},
methods: {
onClickBack (event) {
navigator.pop()
},
}
}
</script>
经过测试，页面显示的时候这个var navigator 已经执行了，但是weexInstance并没有被设置，是点击的时候，点击响应onClickBack的pop函数才设置的weexInstance。
通过查看源码也发现，这个requireModule是建立了对模块的一个proxy或者是索引。在点击的时候这个var的pop被调用的时候weexInstance才被注入。
而中间这一part隐藏内容，就是原生接收到方法调用的时候注入weexInstance。
When
所以得出来：在onClick的navigator.pop()调用被传递到原生的时候，才拿到的weexInstance，而非 script 执行的时候。
WXModuleProtocol
事实上这个 weexInstance 是被声明在WXModuleProtocol的，不单单是Navigator，每一个Module都会有weexInstance这一个实例变量。
@protocol WXModuleProtocol <NSObject>
// 代码有删减
/**
* @abstract the instance bind to this module. It helps you to get many useful properties related to the instance.
*/
@property (nonatomic, weak) WXSDKInstance *weexInstance;
@end
WXJSCoreBridge - registerCallNativeModule:
经过一番调查，定位到了WXJSCoreBridge的- (void)registerCallNativeModule:(WXJSCallNativeModule)callNativeModuleBlock
- (void)registerCallNativeModule:(WXJSCallNativeModule)callNativeModuleBlock
{
_jsContext[@"callNativeModule"] = ^JSValue *(JSValue *instanceId, JSValue *moduleName, JSValue *methodName, JSValue *args, JSValue *options) {
NSString *instanceIdString = [instanceId toString];
NSString *moduleNameString = [moduleName toString];
NSString *methodNameString = [methodName toString];
NSArray *argsArray = [args toArray];
NSDictionary *optionsDic = [options toDictionary];
WXLogDebug(@"callNativeModule...%@,%@,%@,%@", instanceIdString, moduleNameString, methodNameString, argsArray);
NSInvocation *invocation = callNativeModuleBlock(instanceIdString, moduleNameString, methodNameString, argsArray, optionsDic);
JSValue *returnValue = [JSValue wx_valueWithReturnValueFromInvocation:invocation inContext:[JSContext currentContext]];
[WXTracingManager startTracingWithInstanceId:instanceIdString ref:nil className:nil name:moduleNameString phase:WXTracingInstant functionName:methodNameString options:nil];
return returnValue;
};
}
- (void)registerCallNativeModule:(WXJSCallNativeModule)callNativeModuleBlock 在SDK初始化的时候被调用，向 jsContext 注册了callNativeModule
其中NSString *instanceIdString = [instanceId toString]; 把instanceId获取到并传递给 Module，同样的方法拿到 moduleName 和 methodName，而这个 instanceId 就是调用 Navigator 这个 module 的 weexInstance 的 id。
方法调用则是通过NSInvocation。
JSFramework
原生这边已经基本搞定，那么接下来就是看 JSFramework 这边的逻辑。
TaskCenter.js
export class TaskCenter {
callModule (module, method, args, options) {
return this.moduleHandler(this.instanceId, module, method, args, options)
}
}
export function init () {
const proto = TaskCenter.prototype
proto.moduleHandler = global.callNativeModule ||
((id, module, method, args) =>
fallback(id, [{ module, method, args }]))
}
注入callNativeModule 到 TaskCenter.prototype，然后再把 callModule 指向它
WeexInstance.js
function setId (weex, id) {
Object.defineProperty(weex, '[[CurrentInstanceId]]', { value: id })
}
function getId (weex) {
return weex['[[CurrentInstanceId]]']
}
function moduleGetter (id, module, method) {
const taskCenter = getTaskCenter(id)
if (!taskCenter || typeof taskCenter.send !== 'function') {
console.error(`[JS Framework] Failed to find taskCenter (${id}).`)
return null
}
return (...args) => taskCenter.send('module', { module, method }, args)
}
function moduleSetter (id, module, method, fn) {
const taskCenter = getTaskCenter(id)
if (!taskCenter || typeof taskCenter.send !== 'function') {
console.error(`[JS Framework] Failed to find taskCenter (${id}).`)
return null
}
if (typeof fn !== 'function') {
console.error(`[JS Framework] ${module}.${method} must be assigned as a function.`)
return null
}
return fn => taskCenter.send('module', { module, method }, [fn])
}
在文件内注册 moduleSetter 和 moduleGetter，
export default class WeexInstance {
constructor (id, config) {
setId(this, String(id))
this.config = config || {}
this.document = new Document(id, this.config.bundleUrl)
this.requireModule = this.requireModule.bind(this)
this.isRegisteredModule = isRegisteredModule
this.isRegisteredComponent = isRegisteredComponent
}
requireModule (moduleName) {
const id = getId(this)
if (!(id && this.document && this.document.taskCenter)) {
console.error(`[JS Framework] Failed to requireModule("${moduleName}"), `
+ `instance (${id}) doesn't exist anymore.`)
return
}
// warn for unknown module
if (!isRegisteredModule(moduleName)) {
console.warn(`[JS Framework] using unregistered weex module "${moduleName}"`)
return
}
// create new module proxy
const proxyName = `${moduleName}#${id}`
if (!moduleProxies[proxyName]) {
// create registered module apis
const moduleDefine = getModuleDescription(moduleName)
const moduleApis = {}
for (const methodName in moduleDefine) {
Object.defineProperty(moduleApis, methodName, {
enumerable: true,
configurable: true,
get: () => moduleGetter(id, moduleName, methodName),
set: fn => moduleSetter(id, moduleName, methodName, fn)
})
}
moduleProxies[proxyName] = moduleApis
}
return moduleProxies[proxyName]
}
}
获取当前实例的id，传入方法调用。
网友评论