1.引入 webViewJavaScriptBridge 框架，通過cocoaPods

 `pod 'WebViewJavascriptBridge', '~> 5.0'`

或者手動拖入導入
2.引入頭文件

  我當前的項目中使用的是 webView, 因此在創(chuàng)建webView 的界面引入的是#import"WebViewJavascriptBridge.h.

image.png

3.與 html 建立橋接

   iOS 與 html建立橋接并不是僅僅是前端或者是原生端某一端處理就能解決的,必須要兩端協(xié)作完成才行(一定要跟前端大哥處好關系!) 下面這些操作都是固定的,直接粘上去就行。

1>聲明WebViewJavascriptBridge屬性,這也就是我們所需要的橋,操作全靠它

image.png

2>OC 端進行架橋

image.png

從代碼我們可以看出,這一步是讓 webView 與 html 進行橋接,但是橋接不可能無緣無故就能搭建成功,所以還要在 html 的 js 上還要進行一步操作。

3>前端 js 需要寫的東西

image.png

在 js 中,這個是對setupWebViewJavascriptBridge(callback)這個方法進行一個聲明 ,這個也是固定的。如果要進行交互,一定要寫的東西,直接將其粘貼在js 代碼中就行。要交互的內(nèi)容,要寫在 js 相應的方法實現(xiàn)中,這個不需要我們 iOS 端來寫,這個是 web 端進行書寫的.

image.png

4.iOS 端與 html 端互相的方法調(diào)用

    使用此框架, iOS 與 html 交互的基本方法就是通過 registerHandler 和 callHandler兩個方法進行實現(xiàn)的。OC端如果需要調(diào)用 html 中的方法,那么js 上需要注冊方法(registerHandler),OC端需要進行 callHandler,只要對應上 handler名就能實現(xiàn)聯(lián)通。

1>js 調(diào)用 OC 方法

OC操作:

image.png

注冊方法時，兩端一定要約定好 handler 名,因為這是進行搭橋識別的唯一途徑,相當于一個 identity,js端只需要對應上相應的handler 名就行,這里的 handler 名是"jsCallIosBoard".
js 操作:

image.png

此時 js 中的畫筆$(".pen,.page4RSmallBi")被點擊后,就會調(diào)用OC端中相應的方法.我這里是彈入了畫板界面

2>OC 調(diào)用 js方法

和前面的道理相同,只需要在 js 中注冊 handler,OC 端進行 callhandler 就可以了

js 操作:

image.png

此時約定的 handler名是"jsCallIosBoard1"

OC端操作:

image.png

根據(jù) handler 名將數(shù)據(jù)傳到前端,用于顯示.

5.注意點

1> js 中所有registerHandler 和 callHandler 方法必須寫在setupWebViewJavascriptBridge(function (bridge)的實現(xiàn)方法中，否則沒有效果。

2> handler 名一定要是唯一的.

3> 在 registerhandler/callHandler 的 block 方法中,回調(diào)是在建橋后, callHandler /registerHandler成功之后立馬就會進行回調(diào)。 所有如果工程中有傳值需要注意下面這種情況：被調(diào)用的方法需要一定時間的延遲,才能得出結(jié)果,因為這個 block 主要是用來反饋搭橋是否成功，會被立刻調(diào)用(我的項目中, js 調(diào)用了 oc 的畫板,在畫板繪畫后傳到 js 中,使用回調(diào)是不行的,后來又從新注冊一個用來專門傳圖片地址的方法)

4> 官方給的 demo 中, js 是直接寫在 html 中的,而平常的開發(fā)中,前端大多數(shù)時候都是都是把 js 直接抽取出來,創(chuàng)建一個 js 文件,然后去引用,這兩種性質(zhì)是相同的,所有不要詫異,建議最好能跟前端學習一下 html, 并不難.

6.總結(jié)

iOS 與 html 進行交互的方法有很多種,這里說的是比較簡單的一種,能在最快的時間內(nèi)進行交互,不過最好還是能對橋接的原理進行了解,這樣有助于開發(fā),畢竟再好的第三方,也不如原生的好用(誰也不知道啥時候第三方就不能用了).