基于WKWebView的Hybrid容器初次實踐

實現(xiàn)思路

我的最終方案主要參考了豆瓣的rexxar和廣為大家使用的WebViewJavascriptBridge幔虏,之前也對后者有一點點研究旨怠。

源碼實現(xiàn)

代碼暫時沒有考慮開源性,結(jié)合了部分公司的業(yè)務(wù)和個性化配置镣典,不做提供了兔毙。

WKWebView一直有很多坑,而且蘋果也沒有要解決的意思兄春。在性能和需求兩者中澎剥,一定要權(quán)衡利弊,謹慎使用赶舆。
創(chuàng)建一個WKWebView哑姚,會配置一些基本信息,主要是WKWebViewConfiguration芜茵,其中比較關(guān)鍵的一個是userContentController叙量,它可以用于注入javascript腳本、處理nativeweb交互(本文后續(xù)都簡稱交互)等九串。

1)為什么要注入javascript绞佩?
其實直接用WKWebView也能完成交互≈砼ィ客戶端直接調(diào)用evaluateJavaScript: completionHandler:方法品山,web端先在userContentController中調(diào)用addScriptMessageHandler方法注冊xxx事件,然后就可以用window.webkit.messageHandlers.xxx.postMessage(JSON.stringify(json))方法調(diào)用客戶端的方法了烤低。(注意:xxx是要一一對應(yīng)的)
當然肘交,更好的推薦是使用WebViewJavascriptBridge,我們只要處理好注冊的事情就可以方便使用了扑馁,網(wǎng)上的教程也很多涯呻。

2)為什么不基于WebViewJavascriptBridge實現(xiàn)一個Hybrid容器?
最主要的目的:為了web端能用一份代碼實現(xiàn)與Android和iOS端的交互腻要。(本文只是一種思路)

3)實現(xiàn)思路是什么复罐?

  • a.使用WKWebView提供的交互方法,而不是用攔截URL Scheme的方式
  • b.將多個注冊事件統(tǒng)一為一個事件

第一點主要還是要結(jié)合Android端和iOS端的方案選擇雄家。我們的Android端不使用攔截方式市栗,所以我選擇了WKWebView的方法。
第二點是為了避免后期維護頻繁的添加新的事件。假如這個H5容器是一個開源庫填帽,隨著業(yè)務(wù)擴展擴展,交互的事件越來越多咙好。我們可以選擇把webView交付出去篡腌,讓用戶自身實現(xiàn)configuration的配置,注冊新的事件勾效;也可以選擇提供API嘹悼,讓用戶注冊新事件。但是层宫,感覺這樣都不夠方便杨伙。
能否讓用戶只是單純的實現(xiàn)自己的業(yè)務(wù)方法,而不要考慮注冊的事情萌腿?
最終限匣,采用的辦法是:只注冊一個事件,兩端的開發(fā)只需要商定交互的方法名毁菱,中間的事情都交給H5容器去做米死。具體的實現(xiàn)是:

  • a.假設(shè)注冊了一個InteractiveEvent
  • b.web端統(tǒng)一調(diào)用window.webkit.messageHandlers.InteractiveEvent.postMessage(msg)方法,參數(shù)msg中包含了需要調(diào)用方法的函數(shù)名贮庞、數(shù)據(jù)峦筒、回調(diào)等
  • c.客戶端拿到函數(shù)名,用NSMethodSignature提供的API生成最終的函數(shù)簽名
  • d.客戶端用一個哈希表存放了這些函數(shù)以及他們對應(yīng)的組件功能窗慎,如果匹配上了則調(diào)用響應(yīng)的功能物喷。

小結(jié)

第一版做的比較簡單,基本是照葫蘆畫瓢遮斥,大部分的時間都用在填WKWebView的坑了峦失,還好前人總結(jié)的非常全面。不過伏伐,新東西采坑是件好事宠进,收獲很多。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末藐翎,一起剝皮案震驚了整個濱河市材蹬,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌吝镣,老刑警劉巖堤器,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異末贾,居然都是意外死亡闸溃,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門表蝙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人乓旗,你說我怎么就攤上這事∮煊蓿” “怎么了汇跨?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵穷遂,是天一觀的道長。 經(jīng)常有香客問我娱据,道長,這世上最難降的妖魔是什么吸耿? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮咽安,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘妆棒。我一直安慰自己,他們只是感情好糕珊,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著红选,像睡著了一般澜公。 火紅的嫁衣襯著肌膚如雪喇肋。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天甚侣,我揣著相機與錄音,去河邊找鬼间学。 笑死印荔,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的仍律。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼染苛,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了主到?” 一聲冷哼從身側(cè)響起躯概,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎娶靡,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體姿锭,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年轮纫,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片焚鲜。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖忿磅,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情葱她,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布吨些,位于F島的核電站,受9級特大地震影響锤灿,放射性物質(zhì)發(fā)生泄漏挽拔。R本人自食惡果不足惜但校,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧术裸,春花似錦、人聲如沸袭艺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至答倡,卻和暖如春轰传,著一層夾襖步出監(jiān)牢的瞬間瘪撇,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工倔既, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人渤涌。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像歼捏,于是被迫代替她去往敵國和親稿存。 傳聞我的和親對象是個殘疾皇子瞳秽,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內(nèi)容