為什么現在越來越多的APP中開始出現H5頁面？
1，H5頁面開發效率更高，更改更加方便；
2，適當縮小APP安裝包的大小；
3，蹭熱點更加方便，比如五一，十一，雙十一搞活動；
那么為什么說H5無法取代原生的APP，只能處在一個共存的例子呢？
1，這個是由系統的底層決定的，極端例子，所有的應用都通過H5展示，那么你是否需要一個瀏覽器？
2，涉及龐大的功能，涉及復雜的邏輯結構，涉及安全性的要求，H5可以勝任嗎？
所以，H5和原生的融合會出現動態的調和，最終會找到一個平衡。
那么接下來就說下iOS開發中原生和H5的相互調用。
原生頁面優勢：（1）運行速度比較快（2）能使用設備的底層功能，如攝像頭、方向傳感器、重力傳感器、撥號、GPS、語音、短信、藍牙等（3）在界面設計、功能模塊、操作邏輯等層面相較web更易
做到App的便捷性和舒適性，功能更加強大（4）節省流量
劣勢：（1）不同的操作系統（如Android和iOS）需要獨立的進行開發，使用其各自的開發包、開發工具和控件（2）每次有更新，都需要重新打包一次發布到應用平台上，且每次要向各個應用商店進行
提交審核。之后用戶需要手動進行點擊更新安裝（安裝成本較高）（3）開發成本比較高，尤其需要適配各種機型時（如Android應用，需要適配各種Android手機）
H5頁面優勢：（1）由於是運行在瀏覽器上，所以只需要開發一次便可以在不同的操作系統上顯示（2）迭代版本時，不需要打包便可以發布（實時更新、快速迭代），與雲端實現實時數據交互（3）開發
成本相對較低，對瀏覽器的適配較簡單，且發布門檻相對較低
劣勢：（1）每次打開頁面，都得重新加載，獲取數據...（2）過於依賴網絡，速度無法保證。特別在弱網環境下，不僅耗費流量而且加載緩慢，就算是WiFi情況下也不容樂觀（3）只能使用有限的設備底
層功能（無法使用攝像頭、方向傳感器、重力傳感器、撥號、GPS、語音、短信、藍牙等功能）（4）仍處於發展階段，部分功能無法在基於現有技術的瀏覽器基礎上實現，且無法全面的顯示最完美的用戶
體驗，只能用現有技術去彌去找最佳解決方案
原生與H5的相互調用，其實也可以簡單理解為Webview跟JavaScript的相互調用。
====================Webview調用JS(應用場景較少)=========================
// 網頁加載完調用JS彈窗
- (void)webViewDidFinishLoad:(UIWebView *)webView{
//webView 調用 js
NSString *result = [webView stringByEvaluatingJavaScriptFromString:@"javascript:add(3,5);"];
NSLog(@"%@",result);
}
====================JS調用WebView(最常見)=========================
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
/**
<!-- 自定義協議與OC進行交互 -->
// 網頁上的一個鏈接，點擊這個鏈接出發以下反應。。。
<a href="protocol:///showMessage:/晚上小樹林見面,有驚喜!!!:D">女神</a>
*/
//在此方法中截取下一個請求的URL,通過自定義協議頭，截取要執行的方法和參數
if ([request.URL.scheme isEqualToString:@"protocol"]) {
//調用oc的方法做事
//工作中用下面的
NSArray *pathComponents = [request.URL pathComponents];
//獲取到方法名的字符串
NSString *methodName = pathComponents[1];
//獲取到的參數的字符串
NSString *param= pathComponents[2];
//SEL
SEL method = NSSelectorFromString(methodName);
//調用方法
if ([self respondsToSelector:method]) {
[self performSelector:method withObject:param];
}
return NO;
}
return YES;
}
// OC的方法
- (void)showMessage:(NSString *)param{
NSLog(@"showMessage---%@",param);
UIViewController *nvshen = [[UIViewController alloc] init];
nvshen.view.backgroundColor = [UIColor yellowColor];
nvshen.title = @"女神經";
[self.navigationController pushViewController:nvshen animated:YES];
}
當然，還有更好的方法，有一個第三方的框架可以用。
在這里推薦一個比較好的第三方庫即：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"）
}];
------------------------------------------------------------------------------------------------------------------------------
購買阿里雲服務優惠鏈接：