写在前面
这篇文章是去年在实习的时候写的，那时候不懂什么React-Native开发，不懂js，然后在一家创业公司干了几个月，虽然现在离开了，但是觉得当时在那里学到了很多，毕竟第一份实习，一周的学习就开始上手开发。那篇文章主要讲React-Native通信机制，然后我截取了前面一小部分关于webview的知识。
Hybrid App
在如今大前端的浪潮下，hybrid其实已经很常见了。为了适应每天都需要更新的内容，web比原生提供了更好的可塑性。很多公司web部分会交给前端去做，但是作为一位iOSer，并对前端很感兴趣，所以研究这部分的知识还是很有必要的。本系列文章通过如下三个方面来写OC和JS之间的交互
- 基于
UIWebView和WKWebView - 基于
JavaScriptCore - React-Native源码分析
本文主要基于UIWebView来讲究iOS 与JS的交互。iOS 中可以通过如下两种方式调用JS，或者被JS调用。
- 一种是
UIWebView和WKWebview通过代理，截取点击事件 -
JavaScriptCore进行交互。
本文先讨论第一种方式
UIWebView代理
OC调用JS
使用webview调用JS ，需要webview加载完HTML之后再调用JS文件。这和web开发中，html将JS文件的引入放在文档解析后的原因相似，即js文件的导入会阻碍html文件的解析。所以最佳实践就是在webViewDidFinishLoad代理方法中执行JS文件。
-(void)webViewDidFinishLoad:(UIWebView *)webView{
[_webView stringByEvaluatingJavaScriptFromString:@"alert('webViewDidFinishLoad')"];
}
JS调用OC
从本地或者服务器获取html文件，使用UIWebView来加载。在之前的网易新闻客户端中，采用本地html模板，解析从服务器返回的json，来拼接HTML正文页。并通过webview的
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;代理来监听webview的请求，自定义scheme，针对不同的scheme调用不同的OC原生方法。html和JS代码展示如下
<!-- html -->
</img>
// js
function shareButtonDidClick(element){
var href = "ios://share/WeChat";
location.href = href;
};
// oc
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
if ([host isEqualToString:@"share"]) {
NSString *msg = request.URL.path.lastPathComponent ;
if (msg) {
[self showAlertWithMessage:msg];
}
return NO;
}
通过改变当前页的location.href属性，webview进行一次urlRequest,在StartLoadWithRequest中监听到这次请求，并从请求的url中获取获取scheme和一些参数，根据这些scheme和参数进行oc方法调用。并返回NO来防止webView进行跳转，至此一个基本的从 js 到oc方法的调用的过程结束。
总结
本文章写的比较浅显，但是简单易懂。下一篇将介绍JavaScriptCore。
