前言
隨著H5的強(qiáng)大绰咽，hybrid app已經(jīng)成為當(dāng)前互聯(lián)網(wǎng)的大方向菇肃，單純的native app和web app在某些方面顯得就很劣勢(shì)。關(guān)于H5的發(fā)展史取募，這里有一篇文章推薦給大家巷送，今天我們來(lái)學(xué)習(xí)最基礎(chǔ)的基于iOS系統(tǒng)的OC與JS之間是如何進(jìn)行交互的，本文介紹的是基于UIWebView"協(xié)議攔截"實(shí)現(xiàn)的交互方式矛辕，當(dāng)然后面還會(huì)循序漸進(jìn)的介紹其他的交互方式笑跛。這里的說(shuō)到的JS指的是廣義上JS，并不是單純的javascript聊品，你可以理解為web前端的三件套(html+css+javascript)飞蹂；這里說(shuō)的OC指的是iOS的系統(tǒng)語(yǔ)言O(shè)bjective-C，為什么叫做OC與JS交互而不是iOS與JS交互或者其他名字翻屈，這個(gè)不是重點(diǎn)陈哑，也有叫web交互，H5交互的伸眶。本著盡可能清楚解釋原理的目標(biāo)惊窖，文章的組織形式采用圖文并茂加示例代碼
先來(lái)一張圖，如下厘贼。簡(jiǎn)要說(shuō)明下：界面分為兩部分界酒，上半部分是UIWebView加載的本地html頁(yè)面，下半部分是原生UI繪制的界面嘴秸。我們這里需要實(shí)現(xiàn)的功能是毁欣，分別點(diǎn)擊上面的(小黃)三個(gè)按鈕庇谆，會(huì)執(zhí)行OC里面對(duì)應(yīng)的無(wú)參，1個(gè)參數(shù)凭疮，2個(gè)參數(shù)的方法饭耳；點(diǎn)擊下面的(小紅)三個(gè)按鈕，會(huì)執(zhí)行HTML里面對(duì)應(yīng)的無(wú)參执解，1個(gè)參數(shù)寞肖，2個(gè)參數(shù)的JS方法。下面的介紹會(huì)結(jié)合這張圖衰腌，及相關(guān)代碼來(lái)詮釋如何用原生UIWebView攔截協(xié)議的方式實(shí)現(xiàn)JS交互的逝淹。本文的示例代碼會(huì)放在文章的后面，需要的同學(xué)拿去不謝桶唐，可以先下載示例DEMO查看效果
OC與JS交互是雙向的，一方面是OC向JS發(fā)送消息茉兰，另一方面是JS向OC發(fā)送消息尤泽。代碼上的表現(xiàn)形式就是方法的相互調(diào)用，分為兩種：
一规脸、OC調(diào)用JS方法
UIWebView內(nèi)置一個(gè)方式可以執(zhí)行JavaScript代碼坯约，因此OC調(diào)用JS比較方便點(diǎn)
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
調(diào)用這個(gè)方法需要在網(wǎng)頁(yè)加載完成之后，因?yàn)檫@個(gè)時(shí)候整個(gè)html頁(yè)面包括js/css已經(jīng)注入到webView中莫鸭，此時(shí)調(diào)用方法才會(huì)有響應(yīng)闹丐，相反網(wǎng)頁(yè)加載完成之前調(diào)用界面不會(huì)有任何響應(yīng)
參考上圖，我們點(diǎn)擊小紅部分的事件按鈕被因，會(huì)調(diào)用JS中的事件處理代碼
OC部分：
if (sender.tag == 123) {
[self.webView stringByEvaluatingJavaScriptFromString:@"alertMobile()"];
}
if (sender.tag == 234) {
[self.webView stringByEvaluatingJavaScriptFromString:@"alertName('小紅')"];
}
if (sender.tag == 345) {
[self.webView stringByEvaluatingJavaScriptFromString:@"alertSendMsg('18870707070','周末爬山真是件愉快的事情')"];
}
JS部分：
function alertMobile() {
alert('我是上面的小黃 手機(jī)號(hào)是:13300001111')
}
function alertName(msg) {
alert('你好 ' + msg + ', 我也很高興見(jiàn)到你')
}
function alertSendMsg(num,msg) {
alert('這是我的手機(jī)號(hào):' + num + ',' + msg + '!!')
}
二卿拴、JS調(diào)用OC方法
UIWebView加載過(guò)程中會(huì)有一系列代理方法，這里不關(guān)注其他的方法梨与，只關(guān)注UIWebView在加載之前的一個(gè)代理方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebView
這是UIWebView在加載之前或者網(wǎng)頁(yè)進(jìn)行重定向的時(shí)候調(diào)用的一個(gè)方法堕花，而我們JS調(diào)用OC采用協(xié)議攔截方式實(shí)現(xiàn)的細(xì)節(jié)就是在這個(gè)方法里面完成的
有了上面的方法后，很顯然粥鞋，想要JS調(diào)用OC我們就可以采用在按鈕點(diǎn)擊的后重定向一個(gè)URL缘挽，這個(gè)URL攜帶OC的方法名及參數(shù)信息，然后在這個(gè)方法中拿到對(duì)應(yīng)的URL呻粹，對(duì)URL進(jìn)行解析壕曼，提取對(duì)應(yīng)的方法名和參數(shù)信息瞬铸，調(diào)用OC相應(yīng)的方法去团，從而實(shí)現(xiàn)了交互的可能拧抖，下面是示例中的URL
rrcc://showSendNumber_msg_?13300001111&go climbing this weekend
在這個(gè)URL中前面的"rrcc://"是URL的scheme腰涧，通過(guò)這個(gè)來(lái)提取我們關(guān)心的URL绸罗，對(duì)其他URL不做任何處理遗菠，后面就是OC方法和參數(shù)的信息了僵井，這里用"?"來(lái)分割分割方法名和參數(shù)海铆，"&"來(lái)分割多個(gè)參數(shù)，"_"用作OC方法名中冒號(hào)的替換踪少。如果你愿意塘安，可以使用任何幾個(gè)字符來(lái)定義這個(gè)規(guī)則，這里采用的URL中經(jīng)常會(huì)見(jiàn)到的字符援奢。下面貼出部分示例代碼
JS部分：
function btnClick1() {
location.href = "rrcc://showMobile"
}
function btnClick2() {
location.href = "rrcc://showName_?xiaohuang"
}
function btnClick3() {
location.href = "rrcc://showSendNumber_msg_?13300001111&go climbing this weekend"
}
OC部分：
NSArray *components = [subPath componentsSeparatedByString:@"?"];
NSString *methodName = [components firstObject];
methodName = [methodName stringByReplacingOccurrencesOfString:@"_" withString:@":"];
SEL sel = NSSelectorFromString(methodName);
NSString *parameter = [components lastObject];
NSArray *params = [parameter componentsSeparatedByString:@"&"];
if (params.count == 2) {
if ([self respondsToSelector:sel]) {
[self performSelector:sel withObject:[params firstObject] withObject:[params lastObject]];
}
}
三兼犯、含參數(shù)的方法調(diào)用
- OC調(diào)用JS方法，如果有參數(shù)集漾，直接在方面名后面的括號(hào)中寫(xiě)入*
對(duì)應(yīng)的參數(shù)即可切黔；如果是含有多個(gè)參數(shù)，參數(shù)之間用","分開(kāi)
- JS調(diào)用OC方法具篇，參數(shù)是攜帶在URL中纬霞，通過(guò)解析URL來(lái)調(diào)用對(duì)應(yīng)的方法
四、原生UIWebView交互的優(yōu)缺點(diǎn)
下面我們來(lái)分析下這種交互方式：
- 由于OC執(zhí)行選擇器(selector)方法的限制驱显，這種方式最多只能傳遞參數(shù)的個(gè)數(shù)為2個(gè)诗芜，如果需要多個(gè)參數(shù)，(開(kāi)個(gè)腦洞)可以從數(shù)據(jù)結(jié)構(gòu)的組織方面入手
- 每次需要發(fā)生交互的時(shí)候我們都需要來(lái)自定義一個(gè)URL埃疫，然后解析URL伏恐，最后提取參數(shù)，合成方法名栓霜，找到對(duì)應(yīng)的方法來(lái)調(diào)用翠桦；如果項(xiàng)目中有幾十上百個(gè)地方需要交互來(lái)完成，這樣一一來(lái)寫(xiě)的話胳蛮，顯然不是聰明的辦法销凑，到時(shí)候你的代碼也會(huì)是雜亂，難以維護(hù)的仅炊，所以這種交互方式適用于項(xiàng)目中有少量闻鉴，極個(gè)別的地方需要交互的需求。
- 我們嫌麻煩茂洒，前輩們肯定也會(huì)嫌麻煩孟岛，有沒(méi)有解決辦法呢？iOS7之前督勺，蘋(píng)果沒(méi)有出 JavaScriptCore 之前渠羞，業(yè)界普遍采用開(kāi)源庫(kù)WebViewJavascriptBridge和EasyJSWebView來(lái)解決的，原理都是基于攔截協(xié)議的封裝智哀，采用率第一個(gè)要遠(yuǎn)遠(yuǎn)高于第二個(gè)次询，我們將在下一篇文章中介紹WebViewJavascriptBridge的具體使用方法
戳這里：本文的DEMO地址歡迎star
