注：此文只現(xiàn)在只推薦需要適配iOS7的同學(xué)讀，如果已經(jīng)扔掉iOS7简烤，強烈建議換用WKWebView塘淑。已出WKWebView文章WKWebView使用及注意點(keng)
最近公司的運營瞎搞了個活動痒筒，其活動要服務(wù)端提供數(shù)據(jù)支持，web前端在微信公眾賬號內(nèi)作為主要的運營陣地肩狂，而iOS、Android要提供相應(yīng)的入口及頁面進行配合姥饰。一個活動傻谁，動用了各個端的程序猿。而在這里面技術(shù)方面主要就是涉及到web端和服務(wù)端的交互列粪，web前端和iOS审磁、Android的交互。本人作為一個iOS開發(fā)者岂座，今天就聊聊web态蒂、iOS、Android三端的交互掺逼，其實在說明白一點就是方法的互相調(diào)用而已吃媒。這里主要講解iOS。Android會稍微提一下吕喘，僅作參考赘那。
此篇文章的邏輯圖
概述
iOS原生應(yīng)用和web頁面的交互大致上有這幾種方法iOS7之后的JavaScriptCore、攔截協(xié)議氯质、第三方框架WebViewJavaScriptBridge募舟、iOS8之后的WKWebView在這里主要講解JavaScriptCore和攔截協(xié)議這兩種辦法。WebViewJavaScriptBridge是基于攔截協(xié)議進行的封裝闻察。學(xué)習(xí)成本相對JavaScriptCore較高拱礁，使用也不如JavaScriptCore方便本文不做敘述琢锋。WKWebView是iOS8之后推出的，還沒有成為主流使用呢灶，所以本篇文章也不做詳細敘述吴超。
Objective-C執(zhí)行JavaScript代碼
相關(guān)方法
// UIWebView的方法
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
// JavaScriptCore中JSContext的方法
- (JSValue *)evaluateScript:(NSString *)script;
- (JSValue *)evaluateScript:(NSString *)script withSourceURL:(NSURL *)sourceURL
相關(guān)應(yīng)用
用這些方法去執(zhí)行大段的JavaScript代碼是沒什么必要的，但是有些小場景用起來還是比較順手和實用的鸯乃，列舉兩個例子作為參考：
// 獲取當(dāng)前頁面的title
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
// 獲取當(dāng)前頁面的url
NSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];
JavaScriptCore
iOS7之后蘋果推出了JavaScriptCore這個框架鲸阻，從而讓web頁面和本地原生應(yīng)用交互起來非常方便，而且使用此框架可以做到Android那邊和iOS相對統(tǒng)一缨睡，web前端寫一套代碼就可以適配客戶端的兩個平臺鸟悴，從而減少了web前端的工作量。
web前端
在三端交互中奖年，web前端要強勢一些细诸，一切傳值、方法命名都按web前端開發(fā)人員來定義陋守，讓另外兩端去做適配震贵。在這里以調(diào)用攝像頭和分享為例來詳細講解，測試網(wǎng)頁代碼取名為test.html嗅义，其代碼內(nèi)容如下：
test.html代碼內(nèi)容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<div style="margin-top: 100px">
<h1>Objective-C和JavaScript交互的那些事</h1>
<input type="button" value="CallCamera" onclick="Toyun.callCamera()">
</div>
<div>
<input type="button" value="Share" onclick="callShare()">
</div>
<script>
var callShare = function() {
var shareInfo = JSON.stringify({"title": "標(biāo)題", "desc": "內(nèi)容", "shareUrl": "http://www.reibang.com/p/f896d73c670a",
"shareIco":"http://upload-images.jianshu.io/upload_images/1192353-fd26211d54aea8a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"});
Toyun.share(shareInfo);
}
var picCallback = function(photos) {
alert(photos);
}
var shareCallback = function(){
alert('success');
}
</script>
</body>
</html>
test.html代碼解釋
可能有些同學(xué)對web前端的一些知識不太熟悉屏歹，稍微對這段代碼做下解釋，先說Toyun是iOS和Android這兩邊在本地要注入的一個對象【參考下面iOS的代碼更容易明白】之碗，充當(dāng)原生應(yīng)用和web頁面之間的一個橋梁蝙眶。頁面上定義了兩個按鈕名字分別為CallCamera和Share。點擊CallCamera會通過Toyun這個橋梁調(diào)用本地應(yīng)用的方法- (void)callCamera褪那，沒有傳參幽纷；而點擊Share會先調(diào)用本文件中的JavaScript方法callShare這里將要分享的內(nèi)容格式轉(zhuǎn)成JSON字符串格式（這樣做是為了適配Android，iOS可以直接接受JSON對象）然后再通過Toyun這個橋梁去調(diào)用原生應(yīng)用的- (void)share:(NSString *)shareInfo方法這個是有傳參的博敬，參數(shù)為shareInfo友浸。而下面的兩個方法為原生方法調(diào)用后的回調(diào)方法，其中picCallback為獲取圖片成功的回調(diào)方法偏窝，并且傳回拿到的圖片photos收恢；shareCallback為分享成功的回調(diào)方法。
iOS
iOS這邊根據(jù)前端定義的方法名來寫代碼祭往，但是有些時候web前端會讓我們定義伦意，但是我們定義好之后他又要修改，這時候就會很煩啊硼补。所以碰到三端交互的時候最好就是讓web前端去定義方法名驮肉，iOS和Android根據(jù)web前端定義好的去寫代碼。JavaScriptCore中web頁面調(diào)用原生應(yīng)用的方法可以用Delegate或Block兩種方法已骇，此文以按Delegate講解离钝。
JavaScriptCore中類及協(xié)議：
- JSContext：給
JavaScript提供運行的上下文環(huán)境 - JSValue：
JavaScript和Objective-C數(shù)據(jù)和方法的橋梁 - JSManagedValue：管理數(shù)據(jù)和方法的類
- JSVirtualMachine：處理線程相關(guān)票编，使用較少
- JSExport：這是一個協(xié)議，如果采用協(xié)議的方法交互卵渴，自己定義的協(xié)議必須遵守此協(xié)議
ViewController中的代碼
#import "ViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>
@protocol JSObjcDelegate <JSExport>
- (void)callCamera;
- (void)share:(NSString *)shareString;
@end
@interface ViewController () <UIWebViewDelegate, JSObjcDelegate>
@property (nonatomic, strong) JSContext *jsContext;
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end
@implementation ViewController
#pragma mark - Life Circle
- (void)viewDidLoad {
[super viewDidLoad];
NSURL *url = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"];
[self.webView loadRequest:[[NSURLRequest alloc] initWithURL:url]];
}
#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
self.jsContext[@"Toyun"] = self;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"異常信息：%@", exceptionValue);
};
}
#pragma mark - JSObjcDelegate
- (void)callCamera {
NSLog(@"callCamera");
// 獲取到照片之后在回調(diào)js的方法picCallback把圖片傳出去
JSValue *picCallback = self.jsContext[@"picCallback"];
[picCallback callWithArguments:@[@"photos"]];
}
- (void)share:(NSString *)shareString {
NSLog(@"share:%@", shareString);
// 分享成功回調(diào)js的方法shareCallback
JSValue *shareCallback = self.jsContext[@"shareCallback"];
[shareCallback callWithArguments:nil];
}
@end
ViewController中的代碼解釋
自定義JSObjcDelegate協(xié)議慧域，而且此協(xié)議必須遵守JSExport這個協(xié)議，自定義協(xié)議中的方法就是暴露給web頁面的方法浪读。在webView加載完畢的時候獲取JavaScript運行的上下文環(huán)境吊趾，然后再注入橋梁對象名為Toyun，承載的對象為self即為此控制器瑟啃，控制器遵守此自定義協(xié)議實現(xiàn)協(xié)議中對應(yīng)的方法。在JavaScript調(diào)用完本地應(yīng)用的方法做完相對應(yīng)的事情之后揩尸，又回調(diào)了JavaScript中對應(yīng)的方法蛹屿，從而實現(xiàn)了web頁面和本地應(yīng)用之間的通訊。
JavaScriptCore使用注意
JavaScript調(diào)用本地方法是在子線程中執(zhí)行的岩榆，這里要根據(jù)實際情況考慮線程之間的切換错负，而在回調(diào)JavaScript方法的時候最好是在剛開始調(diào)用此方法的線程中去執(zhí)行那段JavaScript方法的代碼，我在實際運用中開始沒注意勇边，就被坑慘了啊犹撒。什么，說的太繞粒褒，看下面的代碼解釋：
// 假設(shè)此方法是在子線程中執(zhí)行的识颊，線程名sub-thread
- (void)callCamera {
// 這句假設(shè)要在主線程中執(zhí)行，線程名main-thread
NSLog(@"callCamera");
// 下面這兩句代碼最好還是要在子線程sub-thread中執(zhí)行啊
JSValue *picCallback = self.jsContext[@"picCallback"];
[picCallback callWithArguments:@[@"photos"]];
}
運行效果
運行效果如圖3-1所示
攔截協(xié)議
攔截協(xié)議這個適合一些比較簡單的一些情況奕坟，不需要引入什么框架祥款，只需要web前端配合一下就好。但是在具體調(diào)用哪一個方法上月杉，以及在傳值的時候可能會有些不方便刃跛，而且調(diào)用完后無法在回調(diào)JavaScript的方法。
web前端
test.html中的代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<div>
<input type="button" value="CallCamera" onclick="callCamera()">
</div>
<script>
function callCamera() {
window.location.href = 'toyun://callCamera';
}
</script>
</body>
</html>
test.html中的代碼解釋
這段代碼相比上面的那段測試代碼是很簡單的苛萎，同樣有一個按鈕桨昙，名字為CallCamera點擊之后調(diào)用自己的callCamera方法，window.location.href這里是改變主窗口的指向從而馬上發(fā)出一個鏈接為toyun://callCamera請求腌歉，而想要傳給原生應(yīng)用的參數(shù)也可已包含到此請求中蛙酪，而在iOS方法中我們要攔截這個請求，根據(jù)請求內(nèi)容去判斷JavaScript想要做的事情究履，從而實現(xiàn)web頁面和本地應(yīng)用之間的交互滤否。
iOS
iOS對應(yīng)的代碼
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *url = request.URL.absoluteString;
if ([url rangeOfString:@"toyun://"].location != NSNotFound) {
// url的協(xié)議頭是toyun
NSLog(@"callCamera");
return NO;
}
return YES;
}
iOS對應(yīng)的代碼的解釋
在webView的代理方法中去攔截自定義的協(xié)議Toyun://如果是此協(xié)議則據(jù)此判斷JavaScript想要做的事情，調(diào)用原生應(yīng)用的方法最仑，這些都是提前約定好的藐俺，同時阻止此鏈接的跳轉(zhuǎn)炊甲。
總結(jié)
隨著手機硬件的配置越來越強大和HTML5的興起，一個App完全可以由web頁面來寫∮郏現(xiàn)在已經(jīng)有部分應(yīng)用這么干了卿啡，我是遇見過的，如古詩文網(wǎng)菱父。盡管比較少但是web頁面和本地應(yīng)用的交互不論是iOS還是Android都是會有遇到的颈娜。iOS我還是比較推薦JavaScriptCore，這樣三端可以相對統(tǒng)一起來浙宜，寫的時候都比較簡單官辽。隨著時間的推移iOS8推出的WKWebView會逐漸成為主流,這個的功能更強大。攔截協(xié)議也只能說用到比較簡單的一些情況吧粟瞬，復(fù)雜的情況處理相互之間參數(shù)的傳遞還是比較麻煩的同仆，而且這個不能回調(diào)JavaScript的方法，確實喜歡攔截協(xié)議的同學(xué)可以研究WebViewJavaScriptBridge這個第三方庫裙品。對于Android本人也就是略知皮毛而已俗批，就不班門弄斧了，對于一些Android開發(fā)者來說市怎，可以看地第一段的test.html這個頁面的寫法完全是可以適配Android的岁忘。
更新
關(guān)于使用過程中的坑，出了一片續(xù)区匠，具體參看JavaScript和Objective-C交互的那些事(續(xù))
關(guān)于WKWebView干像，已經(jīng)出了一篇新文章，具體參看WKWebView使用及注意點(keng)
