js jsbridge

做了一段时间RN

先说RN中方法调用原理

目前没碰上原生带callback调用js,只有js带callback调用原生

  1. 原生和js端各自持有一份list,js持有原生注册过的模块和方法信息,还有一份callback列表,当js 调用call(moduleId, methodId, params, callbackId(这个cb保存在callbacklist)),会将 这次调用存在一个队列中(不是正真意义上的主动调用),待原生的事件驱动时会读取队列然后从持有的模块和方法列表中找到对应的 RCT_EXPORTMODULE和RCT_EXPORTMETHOD通过runtime生成对应的类和方法执行,至于callback执行后会在js的callback列表中根据id查找对应的callback执行。
    2.native调用js,底层是通过jsbridge持有jsContentRef向js发送消息,在RN 中js通过监听事件的方式来捕捉native的调用事件

hybrid 框架,h5与native交互

h5调用native通过代码注入URL_SCHEMA(有长度限制)
1.代码注入
iOS端使用wkwebview时,获取到jscontent然后通过[jscontent addScriptMessageHandler:self name:@"nativeBridge"]挂载一个“nativeBridge”,H5通过window.webkit.messageHandlers.nativeBridge.postMessage(message); 发送消息。其中callback执行原理是在js端保存callbacid原生执行完后将返回值和id回传给js找到对应id的callback执行

  1. URL_SCHEMA
    通过拦截iframe.src解析其中的protocal和host以及param再调用native自身方法

native调用h5
result = [uiWebview stringByEvaluatingJavaScriptFromString:javaScriptString];
当使用wkwebview时[wkWebView evaluateJavaScript:javaScriptString completionHandler:completionHandler];

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容