?????????之前和同行交流的時(shí)候，有些童鞋就表示他們公司已經(jīng)開(kāi)始在一些完整的模塊里使用RN或者Weex來(lái)開(kāi)發(fā)頁(yè)面，并且頁(yè)面用起來(lái)還很順滑，瞬間讓我感覺(jué)別人家的公司好潮流。。這兩天剛好手上項(xiàng)目里有個(gè)需求，原生頁(yè)面需要與前端多個(gè)延伸的界面進(jìn)行交互，并且隱藏原生的導(dǎo)航欄。如何讓我和前端相互助力呢，這里我們借力的橋梁就是Bridge。所以我選擇WebViewJavascriptBridge來(lái)處理，安卓的同事也是采用相應(yīng)的庫(kù)。GitHub地址：https://github.com/marcuswestin/WebViewJavascriptBridge?感謝開(kāi)源作者

????????眾所周知，UIWebView和WKWebView的性能差異很大。例如我在此項(xiàng)目中分別使用二者打開(kāi)網(wǎng)頁(yè)，模擬器的內(nèi)存消耗如下如所示：

UIWebView加載時(shí)所占內(nèi)存示意圖

WKWebView加載時(shí)所占內(nèi)存示意圖

所以現(xiàn)在在開(kāi)發(fā)中我都是選擇使用WKWebView。

????????在使用WebViewJavascriptBridge的時(shí)候，我們要先讓前端在js中注冊(cè)監(jiān)聽(tīng)（例如我們需要在移動(dòng)端點(diǎn)擊web頁(yè)面中的某個(gè)按鈕實(shí)現(xiàn)返回，那么注冊(cè)監(jiān)聽(tīng)的代碼就需要寫(xiě)在那里。）并且前端那邊需要寫(xiě)兩套代碼，分別對(duì)應(yīng)iOS端和安卓端。

JS注入完整代碼

?iOS端加載web頁(yè)面、開(kāi)啟日志并給webView建立JS與OC的橋梁

iOS端創(chuàng)建web頁(yè)面、開(kāi)啟日志、建立JS與OC的橋梁

????????iOS端注冊(cè)與前端JS中對(duì)應(yīng)的方法，獲得回調(diào)，然后我們就可以在回調(diào)中做我們需要做的操作。

收到回調(diào)

????????最后在dealloc方法調(diào)用清除緩存的方法：

WKWebView清除緩存

????????以上就是簡(jiǎn)單使用WebViewJavascriptBridge的一個(gè)實(shí)例。這個(gè)庫(kù)的原理大致如下：分別在OC環(huán)境和javascript環(huán)境都保存一個(gè)bridge對(duì)象，里面維持著requestId,callbackId,以及每個(gè)id對(duì)應(yīng)的具體實(shí)現(xiàn)。其中一個(gè)比較重點(diǎn)的方法如下圖所示，它用來(lái)判斷是普通的跳轉(zhuǎn)還是WebViewJavascriptBridge的跳轉(zhuǎn)，然后再進(jìn)行下一步操作。

webView的代理方法

????????以前使用UIWebView做的時(shí)候沒(méi)有使用Bridge橋接，而是在其代理方法中進(jìn)行攔截，然后做我們需要做的操作，示例代碼如下圖，需要注意的是WKWebView中不能使用下面第二張代碼中的方法，WKWebView只能使用WKScriptMessageHandler來(lái)做JS交互。

攔截url中的關(guān)鍵字段

UIWebView使用JSContext來(lái)與JS做交互