iOS原生App與H5頁面互動筆記

標籤：

iOS原生App與H5頁面互動筆記字數390 閱讀2204 評論1 喜歡25

      最近在做一個項目用到了原生App與H5互動，之前有做過簡單的H5頁面直接調用原生方法的例子，就是利用UIWebView中的代理方法

//webview每次載入之前都會調用這個方法,利用該代理方法截取JS的href來調用原生的方法

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType

       然而這次的互動要求是進行雙向通訊，即JS調用原生App的方法之後，原生App要講相關參數資訊返回給H5頁面，H5頁面接受到參數資訊後做其他處理。

例：H5頁面的發布資訊按鈕，在點擊按鈕後要在原生端判斷使用者是否登入，若沒有登入則彈出原生登入頁面，登入成功後將使用者資訊返回給H5頁面，繼續發布流程。

重點來了！

在這裡推薦一個比較好的第三方庫即：WebViewJavascriptBridge 

地址：https://github.com/marcuswestin/WebViewJavascriptBridge

通過使用該庫可以輕鬆實現JS與原生互動。

//初始化WebViewJavascriptBridge方法

_bridge= [WebViewJavascriptBridge bridgeForWebView:self.BookWebView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {

}];

//原生與JS約定介面名為“testObjcCallback”，data是JS傳遞過來的資訊，responseCallback來將資訊傳遞給JS

[_bridge registerHandler:@"testObjcCallback" handler:^(id  data,WVJBResponseCallback responseCallback) {

responseCallback（"postInfomationToJS"）

}];

UIWebView頁面資訊的離線緩衝

推薦一個比較好的第三方庫RNCachingURLProtocol ，只需要在AppDelegate中加入下面方法即可。

[NSURLProtocolregisterClass:[RNCachingURLProtocolclass]];

地址:https://github.com/rnapier/RNCachingURLProtocol

iOS原生App與H5頁面互動筆記