一篇了解jsBridge运行机制的文章

我们的APP是典型的混合开发APP，内嵌的前端页面都是内嵌的。前端页面要和原来的效果差不多，调用一些native方法是难免的。jsBridge是js和native通信的桥梁。本文不谈概念性的东西，而是通过分析我们项目中jsBridge的源码，从前端的角度大致了解它是如何实现的。先来看看js的调用方式。js如何调用native方法？首先，它会在初始化时调用window.WebViewJavascriptBridge.init方法：window.WebViewJavascriptBridge.init()然后如果要调用native方法，可以使用如下函数：functionnative(funcName,args={},callbackFunc,errorCallbackFunc){//检查参数是否合法!args.length){args=JSON.stringify(args);}else{thrownewError('参数不符合规范');}//判断是否为手机环境if(getIsMobile()){//调用window.WebViewJavascriptBridge对象的callHandler方法window.WebViewJavascriptBridge.callHandler(funcName,args,(res)=>{res=JSON.parse(res);if(res.code===0){returncallbackFunc(res);}else{returnerrorCallbackFunc(res);}});}}只需传入方法名、参数和要调用的回调，它首先检查参数，然后调用window.WebViewJavascriptBridge.callHandler方法还可以为原生调用提供回调：window.WebViewJavascriptBridge.registerHandler(funcName,callbackFunc);接下来我们看一下window.WebViewJavascriptBridge对象是什么。AndroidWebViewJavascriptBridge.js文件是一个自执行函数。首先，定义一些变量：//定义变量varmessagingIframe;varsendMessageQueue=[];//发送消息的队列varreceiveMessageQueue=[];//接收消息的队列varmessageHandlers={};//消息处理器varCUSTOM_PROTOCOL_SCHEME='yy';//自定义协议varQUEUE_HAS_MESSAGE='__QUEUE_MESSAGE__/';varresponseCallbacks={};//响应回调varuniqueId=1;简单的按照我翻译出来的变量名，具体使用接下来会分析。接下来，定义WebViewJavascriptBridge对象：可以看到是一个普通对象，上面Mounted了一些方法，具体方法暂时不看，继续往下：vardoc=document;_createQueueReadyIframe(doc);调用_createQueueReadyIframe方法：function_createQueueReadyIframe(doc){messagingIframe=doc.createElement('iframe');messagingIframe.style.display='无';doc.documentElement.appendChild(messagingIframe);}这个方法很简单，就是创建一个隐藏的iframe插入到页面中，继续往下：//创建一个事件类型（基本事件模块）事件（Event）对象varreadyEvent=doc.createEvent('Events');//定义事件名称为WebViewJavascriptBridgeReadyreadyEvent.initEvent('WebViewJavascriptBridgeReady');//通过文档触发事件doc.dispatchEvent(readyEvent);在这里定义创建了一个自定义事件并直接派发它。其他地方可以像监听原生事件一样监听事件：document.addEventListener('WebViewJavascriptBridgeReady',function(){console.log(window.WebViewJavascriptBridge)},false);我理解这里的用处是，如果jsBridge文件是在其他代码之后引入的，需要保证前面的代码能够知道window.WebViewJavascriptBridge对象什么时候可用。如果指定jsBridge必须先引入，那么就不需要这个处理了。自执行功能到这里就结束了。接下来看初始的init方法：}//调用init时没有传递参数，所以messageHandler=undefinedWebViewJavascriptBridge._messageHandler=messageHandler;//当前receiveMessageQueue只是一个空数组varreceivedMessages=receiveMessageQueue;receiveMessageQueue=null;对于(vari=0;i{//Dosomething...})registerHandler方法如下：functionregisterHandler(handlerName,handler){messageHandlers[handlerName]=handler;}很简单，在messageHandlers对象中存放我们要监听的事件名称和方法，以及那么如果原生监听了return键事件，它会发送如下结构的消息：{handlerName:'onBackPressed'}这样就可以通过handlerName找到我们注册的函数并执行了至此，Android环境下js和native相互调用的逻辑就结束了。总结一下：1.js调用native生成唯一id，保存回调和id，然后将信息（用这个生成的唯一id）发送到一个队列，然后通过iframe发送自定义协议请求，调用native拦截后js的window.WebViewJavascriptBridge对象的一个??方法获取队列信息，解析request和参数并执行相应的Native方法，然后将response（带前端的id）传递给前端通过调用js的window.WebViewJavascriptBridge的指定方法，前端通过id找到之前存储的回调并执行。2.原生调用js，前端需要预先注册好要监听的事件，保存事件名和回调，然后在某个时刻调用js的window.WebViewJavascriptBridge对象的指定方法，前端end根据返回的参数找到注册的事件名回调执行，同时native也会传一个id。如果前端执行完相应的逻辑后需要给native返回消息，那么就必须带回id，native会根据id找到对应的回调并执行。可以看出js和native两边的逻辑是一致的。ios和android基本一样，有些细节有点不同，首先协议不一样，ios是这样的：varCUSTOM_PROTOCOL_SCHEME_IOS='https';varQUEUE_HAS_MESSAGE_IOS='__wvjb_queue_message__';然后ios会发送一个请求：varBRIDGE_LOADED_IOS='__bridge_loaded__';函数_createQueueReadyIframe(doc){messagingIframe=doc.createElement('iframe');messagingIframe.style.display='无';if(isIphone()){//这里应该是ios需要首先加载bridgemessagingIframe.src=CUSTOM_PROTOCOL_SCHEME_IOS+'://'+BRIDGE_LOADED_IOS;}doc.documentElement.appendChild(messagingIframe);}然后，ios在获取我们的消息队列时，不需要经过iframe，可以直接获取并执行js函数返回的数据：function_fetchQueue(){varmessageQueueString=JSON.stringify(sendMessageQueue);发送消息队列=[];returnmessageQueueString;//直接返回，不需要通过iframe}其他部分同理。综上所述，本文分析了jsBridge的源码，可以发现它其实是一个很简单的东西，只是平时可能没有仔细去理解。总想做一些“大”事，让自己成为一个“高尚”的人。我希望你不像作者那样。另外，本文只分析作者所在公司的jsBridge实现。可能有不同的、更好的或更新的实现。欢迎留言讨论。