摘要:
? ? ? 由于最近的項(xiàng)目中大部分功能需要 iOS 原生端與 html 進(jìn)行交互才能完美實(shí)現(xiàn),所以對(duì) iOS 與 html 的交互方式進(jìn)行了學(xué)習(xí),這篇文章主要介紹 WebViewJavascriptBridge 框架的使用.至于原生的 JavaScriptCore.framework 就不多介紹了,同時(shí)在這里推薦一個(gè)比較好的博客.
1.引入 webViewJavaScriptBridge 框架
? ?1>通過(guò)cocoaPods
? ? ?`pod 'WebViewJavascriptBridge', '~> 5.0'`
? ?2>手動(dòng)導(dǎo)入
? ? ?直接拖到項(xiàng)目中,
? ?3>框架介紹
1.github地址:https://github.com/marcuswestin/WebViewJavascriptBridge
? ? 2.在把框架下載下來(lái)之后,里面會(huì)有一個(gè) demo, 找到WebViewJavascriptBridge文件夾,里面共有8個(gè)文件,4個(gè). h 以及對(duì)應(yīng)的. m 文件,然后根據(jù)你項(xiàng)目中使用的是webView 還是WKWebView進(jìn)行選擇相應(yīng)的框架.
2.引入頭文件
? ? ? 我當(dāng)前的項(xiàng)目中使用的是 webView, 因此在創(chuàng)建webView 的界面引入的是#import"WebViewJavascriptBridge.h.
3.與 html 建立橋接
? ? ? ?iOS 與 html建立橋接并不是僅僅是前端或者是原生端某一端處理就能解決的,必須要兩端協(xié)作完成才行(一定要跟前端大哥處好關(guān)系!) 下面這些操作都是固定的,直接粘上去就行。
1>聲明WebViewJavascriptBridge屬性,這也就是我們所需要的橋,操作全靠它
2>OC 端進(jìn)行架橋
? ? ? ? 從代碼我們可以看出,這一步是讓 webView 與 html 進(jìn)行橋接,但是橋接不可能無(wú)緣無(wú)故就能搭建成功,所以還要在 html 的 js 上還要進(jìn)行一步操作。
3>前端 js 需要寫(xiě)的東西
? ? ? ? 在 js 中,這個(gè)是對(duì)setupWebViewJavascriptBridge(callback)這個(gè)方法進(jìn)行一個(gè)聲明 ,這個(gè)也是固定的。如果要進(jìn)行交互,一定要寫(xiě)的東西,直接將其粘貼在js 代碼中就行。要交互的內(nèi)容,要寫(xiě)在 js 相應(yīng)的方法實(shí)現(xiàn)中,這個(gè)不需要我們 iOS 端來(lái)寫(xiě),這個(gè)是 web 端進(jìn)行書(shū)寫(xiě)的.
4.iOS 端與 html 端互相的方法調(diào)用
? ? ? ? 使用此框架, iOS 與 html 交互的基本方法就是通過(guò) registerHandler 和 callHandler兩個(gè)方法進(jìn)行實(shí)現(xiàn)的。OC端如果需要調(diào)用 html 中的方法,那么js 上需要注冊(cè)方法(registerHandler),OC端需要進(jìn)行 callHandler,只要對(duì)應(yīng)上 handler名就能實(shí)現(xiàn)聯(lián)通。
1>js 調(diào)用 OC 方法
OC操作:
? ? ? ? 注冊(cè)方法時(shí)，兩端一定要約定好 handler 名,因?yàn)檫@是進(jìn)行搭橋識(shí)別的唯一途徑,相當(dāng)于一個(gè) identity,js端只需要對(duì)應(yīng)上相應(yīng)的handler 名就行,這里的 handler 名是"jsCallIosBoard".
js 操作:
此時(shí) js 中的畫(huà)筆$(".pen,.page4RSmallBi")被點(diǎn)擊后,就會(huì)調(diào)用OC端中相應(yīng)的方法.我這里是彈入了畫(huà)板界面
2>OC 調(diào)用 js方法
和前面的道理相同,只需要在 js 中注冊(cè) handler,OC 端進(jìn)行 callhandler 就可以了
js 操作:
此時(shí)約定的 handler名是"jsCallIosBoard1"
OC端操作:
根據(jù) handler 名將數(shù)據(jù)傳到前端,用于顯示.
5.注意點(diǎn)
1> ? js 中所有registerHandler 和 callHandler 方法必須寫(xiě)在setupWebViewJavascriptBridge(function (bridge)的實(shí)現(xiàn)方法中，否則沒(méi)有效果。
2> ? handler 名一定要是唯一的.
3> ? 在 registerhandler/callHandler 的 block 方法中,回調(diào)是在建橋后, callHandler /registerHandler成功之后立馬就會(huì)進(jìn)行回調(diào)。 所有如果工程中有傳值需要注意下面這種情況：被調(diào)用的方法需要一定時(shí)間的延遲,才能得出結(jié)果,因?yàn)檫@個(gè) block 主要是用來(lái)反饋搭橋是否成功，會(huì)被立刻調(diào)用(我的項(xiàng)目中, js 調(diào)用了 oc 的畫(huà)板,在畫(huà)板繪畫(huà)后傳到 js 中,使用回調(diào)是不行的,后來(lái)又從新注冊(cè)一個(gè)用來(lái)專(zhuān)門(mén)傳圖片地址的方法)
4> ?官方給的 demo 中, js 是直接寫(xiě)在 html 中的,而平常的開(kāi)發(fā)中,前端大多數(shù)時(shí)候都是都是把 js 直接抽取出來(lái),創(chuàng)建一個(gè) js 文件,然后去引用,這兩種性質(zhì)是相同的,所有不要詫異,建議最好能跟前端學(xué)習(xí)一下 html, 并不難.
6.總結(jié)
iOS 與 html 進(jìn)行交互的方法有很多種,這里說(shuō)的是比較簡(jiǎn)單的一種,能在最快的時(shí)間內(nèi)進(jìn)行交互,不過(guò)最好還是能對(duì)橋接的原理進(jìn)行了解,這樣有助于開(kāi)發(fā),畢竟再好的第三方,也不如原生的好用(誰(shuí)也不知道啥時(shí)候第三方就不能用了).
后言
互聯(lián)網(wǎng)時(shí)代的今天,我們都是站在巨人的肩膀上看著這個(gè)世界,共勉!
