WebViewJavascriptBridge原理与使用

此文章写的挺详细

https://www.jianshu.com/p/df299f7ef5db

高级篇

https://blog.csdn.net/jason_chen13/article/details/53701387

上面代码比较复杂，但是却比较容易看，主要分为以下几个功能： 三个属性： sendMessageQueue 用于存储消息列表 messageHandlers 用于存储注册给oc调用的方法 responseCallbacks 用于存储oc在调用js方法时需要调用的js提供的回调方法 实现了registerHandler方法，原理是把方法名和方法实现存储在messageHandlers队列中 实现了callHandler方法，原理是生成一个callback的id，和callback的实现作为对用的key、value一同存储在responseCallbacks队列中，与此同时，把方法名和参数和callback的id存储在一个字典中，然后吧这个字典加入到sendMessageQueue队列中，最后变化网址，形成跳转，触发oc回调方法，实现一个信息交流，至于是怎么把参数和方法名称带过去的呢？ disableJavscriptAlertBoxSafetyTimeout等相关的一些列作用暂时没研究？ 实现了接收oc消息的方法，原理是解析收到的json值，从中解析出需要的回调函数的信息，然后触发回调函数，之后从回调函数的队列responseCallbacks中删除该回调方法，如果说oc返回的信息中没有这个回调方法，是不是说oc端没有主动回调这个js的回调？则将会通过json数据获取到之前存储的message的callbackid来查找对应的回调函数来进行调用，之后的步骤和callHandler同理，也就是说这个回调函数是一定会被调用的？ 通过同样的方式制造跳转，目的是把初始化好之后把js要发给oc的消息一下发出去 立即执行的函数，把WebViewJavascriptBridge注入到之前文件的callbacks方法中作为参数，实现register方法的真正触发，（扣题） 

functionsetupWebViewJavascriptBridge(callback){if(window.WebViewJavascriptBridge){returncallback(WebViewJavascriptBridge);}if(window.WVJBCallbacks){returnwindow.WVJBCallbacks.push(callback);}window.WVJBCallbacks=[callback];varWVJBIframe=document.createElement('iframe');WVJBIframe.style.display='none';WVJBIframe.src='wvjbscheme://__BRIDGE_LOADED__';document.documentElement.appendChild(WVJBIframe);setTimeout(function(){document.documentElement.removeChild(WVJBIframe)},0)}/*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/setupWebViewJavascriptBridge(function(bridge){varuniqueId=1functionlog(message,data){varlog=document.getElementById('log')varel=document.createElement('div')el.className='logLine'el.innerHTML=uniqueId+++'. '+message+':
'+JSON.stringify(data)if(log.children.length){log.insertBefore(el,log.children[0])}else{log.appendChild(el)}}//register、call代码bridge.registerHandler('getUserInfos',function(data,responseCallback){log("这是在H5中的getUserInfos 接收的从ObjC传过来的参数",data)responseCallback({'userId':'123456','blog':'标哥的技术博客'})})/*JS给ObjC提供公开的API，ObjC端通过注册，就可以在JS端调用此API时，得到回调。ObjC端可以在处理完成后，反馈给JS，这样写就是在载入页面完成时就先调用*/bridge.callHandler('getUserIdFromObjC',function(responseData){log("这是在H5中的getUserIdFromObjC方法对应的参数responseData的值",responseData)})})