摘要:

由于最近的項目中大部分功能需要 iOS 原生端與 html 進行交互才能完美實現,所以對 iOS 與 html 的交互方式進行了學習,這篇文章主要介紹 WebViewJavascriptBridge 框架的使用.至于原生的 JavaScriptCore.framework 就不多介紹了,同時在這里推薦一個比較好的博客.http://blog.csdn.net/baihuaxiu123/article/details/51674726

1.引入 webViewJavaScriptBridge 框架

1>通過cocoaPods

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

2>手動導入

直接拖到項目中,

3>框架介紹1.github地址:https://github.com/marcuswestin/WebViewJavascriptBridge

2.在把框架下載下來之后,里面會有一個 demo, 找到WebViewJavascriptBridge文件夾,里面共有8個文件,4個. h 以及對應的. m 文件,然后根據你項目中使用的是webView 還是WKWebView進行選擇相應的框架.

框架文件

2.引入頭文件

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

導入相應頭文件

3.與 html 建立橋接

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

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

創建橋接

2>OC 端進行架橋

建立橋接

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

3>前端 js 需要寫的東西

前端橋接方法聲明

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

橋接后要進行的操作

4.iOS 端與 html 端互相的方法調用

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

1>js 調用 OC 方法

OC操作:

iOS 注冊 handler

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

js 操作:

js 在 setup方法中進行 callHandler

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

2>OC 調用 js方法

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

js 操作:

js 在 setup 方法中進行注冊

此時約定的 handler名是"jsCallIosBoard1"

OC端操作:

ios 端進行callHandler

根據 handler 名將數據傳到前端,用于顯示.

5.注意點

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

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

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

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

6.總結

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

后言

互聯網時代的今天,我們都是站在巨人的肩膀上看著這個世界,共勉!