iOS 中的web开发（1）--UIWebView

写在前面

这篇文章是去年在实习的时候写的，那时候不懂什么React-Native开发，不懂js，然后在一家创业公司干了几个月，虽然现在离开了，但是觉得当时在那里学到了很多，毕竟第一份实习，一周的学习就开始上手开发。那篇文章主要讲React-Native通信机制，然后我截取了前面一小部分关于webview的知识。

Hybrid App

在如今大前端的浪潮下，hybrid其实已经很常见了。为了适应每天都需要更新的内容，web比原生提供了更好的可塑性。很多公司web部分会交给前端去做，但是作为一位iOSer，并对前端很感兴趣，所以研究这部分的知识还是很有必要的。本系列文章通过如下三个方面来写OC和JS之间的交互

1. 基于UIWebView和WKWebView
2. 基于JavaScriptCore
3. React-Native源码分析

本文主要基于UIWebView来讲究iOS 与JS的交互。iOS 中可以通过如下两种方式调用JS，或者被JS调用。

1. 一种是UIWebView和WKWebview通过代理，截取点击事件
2. 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代码展示如下

![]([email protected])

// 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。