H5與App原生互動，一般會是前端頁面中的JavaScript與App使用的原生開發語言的互動。技術方案應能達到以下要求：
- 在js與原生進行互動的時候能保證正常的正向呼叫邏輯返回，反向可以處理非同步回撥，因為對js來說，大部分邏輯都是回撥與監聽。
- 要保證H5與Native App通訊效率高、安全性強，能有效防止通過H5頁面進行App注入、中間人攻擊或者釣魚。
- 方便測試階段，H5嵌入到App當中，開發人員方便除錯與Debug。
在iOS控制器中載入UIWebView，設定代理，遵守UIWebViewDelegate協議。
self.webView = [[UIWebView alloc] initWithFrame:self.view.frame]; _webView.delegate = self; _webView.scalesPageToFit = YES; [self.view addSubview:_webView]; NSURL * url = [NSURL URLWithString:@"file:///Users/feng/Desktop/11.html"]; NSURLRequest * request = [NSURLRequest requestWithURL:url]; [_webView loadRequest:request];
1、iOS呼叫JS方法
通過iOS呼叫JS程式碼實現起來比較方便直接呼叫UIWebView的方法- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
1.查詢標籤 // 查詢標籤 NSString *str = @"var word = document.getElementById('word');" @"alert(word.innerHTML)"; [webView stringByEvaluatingJavaScriptFromString:str]; 2.為網頁新增標籤： NSString *str = @"var img = document.createElement('img');" "img.src = 'icon5.jpg';" "img.width = 300;" "img.heigth = 100;" "document.body.appendChild(img);"; [webView stringByEvaluatingJavaScriptFromString:str]; 3.刪除網頁標籤： // 刪除標籤 NSString *str1 = @"var word = document.getElementById('word');" @"word.remove();"; [webView stringByEvaluatingJavaScriptFromString:str1]; 4.更改標籤： // 更改 NSString *str2 = @"var change = document.getElementsByClassName('change')[0];" "change.innerHTML = 'hello';"; NSString *result = [webView stringByEvaluatingJavaScriptFromString:str2]; HTML端程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iOS和H5互動</title> </head> <body> <p id="word">6666666666</p> <ul> <li class="change">111111</li> <li class="haha">222222</li> <li>333333</li> <li>444444</li> </ul> <input class="name" placeholder="請輸入密碼"> <button onclick="buttonClick()">提交資訊</button> <script type="text/javascript"> alert('這個一個彈框'); </script> </body> </html>
//獲取網頁地址 NSString * currentURL = [_webView stringByEvaluatingJavaScriptFromString:@"document.location.href"]; NSLog(@"%@",currentURL); //獲取標題 NSString * title = [_webView stringByEvaluatingJavaScriptFromString:@"document.title"]; NSLog(@"%@",title); //插入js程式碼 [_webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');" "script.type = 'text/javascript';" "script.text = \"function myFunction(){" "var field = document.getElementsByName('q')[0];" "field.value = 'dfjlsajfljsdkl';" "document.forms[0].submit();" "}\";" "document.getElementsByTagName('head')[0].appendChild(script);"]; NSLog(@"js:%@",[_webView stringByEvaluatingJavaScriptFromString:@"myFunction();"]); //提交表單 NSString * res = [_webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit();"]; NSLog(@"%@",res);
2、JS呼叫iOS方法
目前主流的技術方案：
在iOS7以前，在UIWebView中實現一些代理方法攔截帶有約定好的protocol的Url，從Url上獲取get方式的引數傳遞，對映成本地原生方法，如下：
1）第一種方法比較簡單，通過字串的比對。這種方式iOS端程式碼比較簡單，網頁載入完成後後臺需要重新定義網頁url，將移動端需要的引數拼接到url上返回，或者按照和後臺約定好的欄位來進行字串比對以達到呼叫iOS方法的目的。下面貼程式碼。
oc程式碼：（需要實現webView的協議） // 攔截協議頭，調取系統攝像頭 #pragma mark UIWebViewDelegate - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType: (UIWebViewNavigationType)navigationType { NSString *str = request.URL.absoluteString; if ([str containsString:@"wxd://"]) { [self getImage]; } return YES; } - (void)getImage { if([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypePhotoLibrary]) { //呼叫相簿 //例項化控制器 UIImagePickerController *picker = [[UIImagePickerController alloc] init]; picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary; picker.delegate = self; // 是否有圖片選取框 picker.allowsEditing = YES; [self presentViewController:picker animated:YES completion:nil]; } } HTML端程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在html中呼叫oc的方法</title> </head> <body> <button onclick="getImage()">訪問相簿</button> <script type="text/javascript"> function getImage(){ window.location.href = "wxd://getImage"; } </script> </body> </html>
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{ NSString *urlString = request.URL.absoluteString; if ([urlString rangeOfString:@"js-call://"].location != NSNotFound) { NSString * host = [self sliceHost:urlString]; NSDictionary * params = [self sliceParams:urlString]; if ([host isEqualToString:@"openOrderDetail"]) { [self openOrderDetail:params]; } return NO; } return YES; }
這僅僅解決了js呼叫原生方法的問題，至於呼叫的結果與呼叫完之後要進行一些頁面的回撥，在這個攔截的過程中根本沒有辦法進行，不過有一些蹩腳的補償措施，如下：
-(void)webViewDidFinishLoad:(UIWebView *)webView { self.orderDetailCallBackFuncName = [webView stringByEvaluatingJavaScriptFromString:@"orderCallbackfuncName()"]; }
會在頁面載入完畢後主動去取頁面上設定的回撥方法的名稱，然後在原生方法中處理完邏輯再進行回撥。
-(void)OpenOrderDetail:(NSDictionary *)params{ //do someting [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"%@()",self.orderDetailCallBackFuncName ]]; }
iOS7以後，大家都使用JavaScriptCore這個官方的WebKit 的 JavaScript 引擎，實現oc與JavaScript的語言穿梭。
2）第二種方法，JS直接用oc方法名來呼叫oc方法
標頭檔案需要匯入#import <JavaScriptCore/JavaScriptCore.h>。
首先建立一個繼承自NSObject的類，在這裡我命名為JSTestObjext，.h程式碼如下：
import <Foundation/Foundation.h> #import <JavaScriptCore/JavaScriptCore.h> @protocol JSTestObjectProtocol <JSExport> - (void)CallOCFunction; - (void)CallOCFunctionFirstParameter:(NSString *)parameter; - (void)CallOCFunctionFirstParameter:(NSString *)parameter1 SecondParameter:(NSString *)parameter2; @end @interface JSTestObjext : NSObject <JSTestObjectProtocol> @end
//.m中實現協議方法，程式碼如下：
#import "JSTestObjext.h" @implementation JSTestObjext - (void)CallOCFunction { NSLog(@"CallOCFunction"); } - (void)CallOCFunctionFirstParameter:(NSString *)parameter { NSLog(@"CallOCFunctionFirstParameter:%@",parameter); } - (void)CallOCFunctionFirstParameter:(NSString *)parameter1 SecondParameter:(NSString *)parameter2 { NSLog(@"CallOCFunctionFirstParameter:%@ SecondParameter:%@",parameter1,parameter2); } @end
之後在載入webView的控制器中呼叫：
#import "ViewController.h" #import <JavaScriptCore/JavaScriptCore.h> #import "JSTestObjext.h" @interface ViewController ()<UIWebViewDelegate> @property (nonatomic, strong) UIWebView * webView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.webView = [[UIWebView alloc] initWithFrame:self.view.frame]; _webView.delegate = self; _webView.scalesPageToFit = YES; [self.view addSubview:_webView]; NSURL * url = [NSURL URLWithString:@"file:///Users/feng/Desktop/11.html"]; NSURLRequest * request = [NSURLRequest requestWithURL:url]; [_webView loadRequest:request]; JSContext * context = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; JSTestObjext * test = [JSTestObjext new]; context[@"testObject"] = test; }
到此為止，oc程式碼就已經寫完了，我們只需告訴JS端使用testobject類，就可以調oc的方法了。下面附上JS呼叫的程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在html中呼叫oc的方法</title> <script type="text/javascript"> testObject.CallOCFunction(); testObject.CallOCFunctionFirstParameter('引數1'); testObject.CallOCFunctionFirstParameterSecondParameter('引數A','引數'); </script> </head> <body> <button type="button" onclick="secondClick">Click Me!</button> </body> </html>
iOS與H5互動遇到的坑
3、iOS7以後，大家都使用JavaScriptCore這個官方的WebKit 的 JavaScript 引擎，實現oc與JavaScript的語言穿梭。
-(void)configJsCallBack{ WeakSelf; self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; self.jsContext.exceptionHandler = ^(JSContext * con,JSValue * exception){ NSLog(@"JS Error:%@",exception); }; Coordinator * coordinator = [[Coordinator alloc]init]; self.jsContext[@"mobileCoordinator"] = coordinator; self.jsContext[@"console"] = coordinator; }
這裡我們使用一些技巧，將所有的App開放給js的方法都由一個叫Coordinator的排程器來排程，而這個排程器實現了JSExport協議：
#import <Foundation/Foundation.h> #import <JavaScriptCore/JavaScriptCore.h> @protocol CoordinatorExport <JSExport> -(void)log:(NSString *)msg; -(BOOL)callNativeModule:(NSString *)url; /* js呼叫原生分享 shareOpinion為json物件 { "type":"share", "title":"share title", "content":"share content", "imgUrl":"", "clickUrl":"" } 其中型別type有以下幾種: share(只有朋友圈和微信好友),doubleShare(包含所有分享渠道),allShare(分享全部渠道) */ JSExportAs(showShareMenu, -(BOOL)showShareMenu:(NSString *)url opinion:(NSString *)opinion); @end @interface Coordinator : NSObject< CoordinatorExport > @property(nonatomic,copy)BOOL (^openShareCallBack)(NSDictionary * opinion); @end
上面的做法就是我們會在合適的實際向JavaScript的執行的環境中注入一個叫做mobileCoordinator的物件，這個物件會注入到JavaScript環境中的window物件上，全域性可用。為什麼要封裝到一個物件上，是因為js沒有名稱空間的概念並且有變數提升向上查詢，會引起命名衝突，所以我們把對外暴露的方法都進行一個物件封裝。還有一個好處就是JavaScript的開發者與app的開發者都會像編寫各自語言的程式碼一樣書寫程式碼，沒有語法損失，js同步呼叫原生方法，原生實現的時候具備返回值，js的呼叫者就可以獲取返回值，如果是非同步回撥，那可以對外暴露方法的時候提供一個callback的入參，在非同步完成後進行回撥。
4、其他方案例如JavaScriptBridge等與第二種方案類似。
方案比較：
方案1的流程如下：
互動方式為單向
H5呼叫Native:
H5頁面 —>發起Url Redirect(Url上攜帶帶有動作語義的引數)->Native App->攔截Url Redirect->解析動作語義引數->呼叫相關Native程式碼
Native呼叫H5頁面:
Native App—>獲取頁面上預留引數和解析動作語義引數->呼叫相關JavaScript程式碼
這樣使得一個簡單的方法呼叫變得非常割裂，而且雙端維護成本非常高，不易debug。
方案2的流程如下：
互動為雙向：
H5頁面(Native App)<->呼叫Native程式碼(呼叫JavaScript程式碼)<->Native App執行被呼叫Native程式碼返回撥用結果(H5頁面執行被呼叫JavaScript程式碼並返回撥用結果)
方案2優勢比較明顯，一般會採用第二種。
實現細節
細節上有一些需要注意的東西：
1.oc方法是帶有引數標籤的，js的方法並沒有，注意使用JSExportAs這個巨集來將oc原生語言轉換為js語法風格的程式碼。
2.注意獲取jscontext上下文並注入方法與物件的時機，這取決於H5頁面上的js引用時機，如果H5頁面上使用require來進行順序引用，就不會出現問題，如果與原生互動的js的程式碼載入與原生注入的注入順序混亂，則呼叫不到原生暴露的方法會引起js執行異常。建議結合攔截url的方式讓H5決定何時注入，或者是前端工程師梳理規範，在H5引用js的時候做順序控制。
防止注入與釣魚
其實這個不太算是技術方案，不過可以提一下。有時候手機在危險的網路環境中比方說連結在不安全的路由器中，DNS進行惡意中轉到釣魚網站上，如果頁面呼叫已知的原生暴露出來的方法，同步資料或者是呼叫關鍵業務，就會有注入攻擊的風險。一般需要做的是，H5在呼叫app原生關鍵業務的時候，需要在呼叫原生方法的時候傳入票據，原生通過服務端的認證中心驗證票據，通過才可以處理頁面呼叫請求，在同步資料與狀態的時候，比方說將app中的使用者登入狀態同步到H5頁面上，一般app會同步cookie，不過這種方式維護成本較高。對於同步狀態與資料，app應該使用業務票據來傳遞給H5，H5通過票據中心置換出真正的使用者狀態或者是關鍵業務資料。更高階別的方案還有H5與App臨時握手等。
H5在WebView中的Debug
這個是一個比較噁心的事情，不過我們可以替換js的window物件上的console物件，將log函式轉接到原生，再通過一些其他方式進行輸出，JavaScriptCore中提供了exceptionHandler
context.exceptionHandler = ^(JSContext *context, JSValue *exception) { NSLog(@"JS Error: %@", exception);};