• 在iOS中涉及Web HTML页面展示的两个控件分别是UIWebView和WKWebView，下面来介绍这两个控件的具体用法；
• 首先UIWebView是Apple在2008年 iOS2.0系统发布出来的，其在加载HTML页面时，内存占用巨大，且原生与WebView之间的交互单一，Apple为了解决UIWebView的缺点，在2014年 iOS8系统正式发布WKWebView

UIWebView的优缺点

• 优点：
  • 操作cookie很容易；
  • 可以使用NSURLRequestCachePolicy缓存策略；
  • 可使用自定义的NSURLProtocol对request请求，进行定制化处理，例如修改request参数，请求头，重定向，解决dns域名劫持等等；
• 缺点：
  • 加载HTML时会导致App内存急剧上升，易闪退；
  • 原生与webView的交互单一；
  • 对H5新特性的支持不是很好；
  • Apple提供的Api少，给开发者可控制的细节少；

UIWebView的简单使用

• 案例代码如下：

#import "SimpleWebController.h"

@interface SimpleWebController ()<UIWebViewDelegate>
@property(nonatomic,strong)UIWebView *webView;
@end

@implementation SimpleWebController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    NSString *urlStr = @"http://jdcl.ztehealth.com/agedservice/modules/admin/activityView/activityList.html?type=231";
    NSURL *url = [NSURL URLWithString:urlStr];
    //使用本地编写的html
    url = [[NSBundle mainBundle] URLForResource:@"first" withExtension:@"html"];
    //使用远程URL
    url = [NSURL URLWithString:@"https://www.baidu.com"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    
    _webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, ScreenW, ScreenH)];
    [_webView loadRequest:request];
    _webView.delegate = self;
    
    [self.view addSubview:_webView];
}

- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
//    self.navigationController.navigationBar.hidden = YES;
}

- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
//    self.navigationController.navigationBar.hidden = NO;
}

#pragma mark UIWebViewDelegate
//webView 是否应该开始加载request  YES才会加载 NO不会加载
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    NSLog(@"%s",__func__);
    NSLog(@"request.url = %@",request.URL.absoluteString);
    return YES;
}

//webView已经开始进行加载
- (void)webViewDidStartLoad:(UIWebView *)webView{
    NSLog(@"%s",__func__);
}

//webView已经加载完成
- (void)webViewDidFinishLoad:(UIWebView *)webView{
    NSLog(@"%s",__func__);
    //判断NSHTTPCookieStorage中 是否自动存入了cookie
    NSHTTPCookieStorage *cookieJar2 = [NSHTTPCookieStorage sharedHTTPCookieStorage];
    NSArray *StorageCookies = cookieJar2.cookies;
    for (NSHTTPCookie *cookie in StorageCookies) {
        NSLog(@"方法三 NSHTTPCookieStorage中的cookie = %@", cookie);
    }
}

//webView已经加载失败
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{
    NSLog(@"%s",__func__);
}
@end

• NSHTTPCookieStorage是管理请求cookie的一个单例类；

UIWebView使用NSURLProtocol进行请求的拦截

• 首先NSURLProtocol是一个抽象类，我们需要自定义一个子类继承自NSURLProtocol，才能使用；
• 在iOS系统中，每次在对一个URL进行请求的时候，URL Loading System都会向已经注册的NSURLProtocol的自定义子类 进行询问，是否处理该URL请求，所以这里我们可以对所有的URL请求，进行了拦截，加入自己的处理逻辑；
• URL Loading System 整体组件如下所示：
  
  image.png

#import <Foundation/Foundation.h>

@interface SFWebURLProtocol : NSURLProtocol

@end

#import "SFWebURLProtocol.h"

static NSString * const SFImageURLRequestHandledKey = @"image-handled";
static NSString * const SFImageURLRequestHandledValue = @"handled";

@interface SFWebURLProtocol ()<NSURLConnectionDelegate, NSURLConnectionDataDelegate>
@property(nonatomic, strong) NSURLConnection *connection;
@property(nonatomic, strong) NSMutableData *webpData;
@property(nonatomic, assign) BOOL isWebP;
@end

@implementation SFWebURLProtocol

+ (void)load {
    [NSURLProtocol registerClass:[SNWebPURLProtocol class]];
}

//#pragma mark override
//该方法是判断是否拦截处理对应请求，可以通过返回YES，来拦截改请求
+ (BOOL)canInitWithRequest:(NSURLRequest *)request {
    if ([self propertyForKey:SNImageURLRequestHandledKey inRequest:request] == SNImageURLRequestHandledValue) {
        return NO;
    }
    
    //浏览器发送请求会带上Referer,没有不处理
    NSString *referer = [request valueForHTTPHeaderField:@"Referer"];
    if (referer==nil || [referer isEqualToString:@""]) {
        return NO;
    }
    //图片处理
    //baidu.cn域名的图片，以jpg和png结尾的，加上from=mobile，下载webp图片
    NSRange range = [request.URL.host rangeOfString:@".baidu.cn"];
    if (range.location == NSNotFound) {
        BOOL endResult = NO;
        //其他逻辑
        return endResult;
    }
    NSString *path = [request.URL path];
    NSString *pathExtension = [[path pathExtension] lowercaseString];
    if ([pathExtension rangeOfString:@"jpg"].length > 0) {
        return YES;
    }    if ([pathExtension rangeOfString:@"png"].length > 0) {
        return YES;
    }
    return NO;
}

//拦截请求后必须实现的方法，规范化URL请求，一般返回request
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
    return request;
}

//此方法无需实现也行，一般不在这里做额外的操作
//用于检测两个请求是缓存等效的，则为YES，否则为NO
+ (BOOL)requestIsCacheEquivalent:(NSURLRequest *)a toRequest:(NSURLRequest *)b {
    return [super requestIsCacheEquivalent:a toRequest:b];
}

//此方法是 请求 拦截完毕 后，进行篡改内容的重要一步，可以在里面根据拦截的请求，来替换篡改请求数据
- (void)startLoading {
    NSMutableURLRequest *mRequest = [[self request] mutableCopy];
    //增加key标识，防止请求死循环
    [NSURLProtocol setProperty:SNImageURLRequestHandledValue forKey:SNImageURLRequestHandledKey inRequest:mRequest];
    //增加from=mobile，下载webp图片
    NSString *url = self.request.URL.absoluteString;
    NSString *query = [[mRequest URL] query];
    if (query && (([query rangeOfString:@"format="].location !=NSNotFound) && ([query rangeOfString:@".webp"].location !=NSNotFound))) {
        mRequest.URL = [NSURL URLWithString:url];
    }else if (!query || [query rangeOfString:@"from=mobile"].length==0) {
        if (query) {
            url = [url stringByAppendingString:@"&from=mobile"];
        } else {
            url = [url stringByAppendingString:@"?from=mobile"];
        }
        mRequest.URL = [NSURL URLWithString:url];
    }
    self.connection = [NSURLConnection connectionWithRequest:mRequest delegate:self];
}

//Stops protocol-specific loading of a request.
- (void)stopLoading {
    [self.connection cancel];
    self.connection = nil;
}

#pragma mark lifecycle
- (void)dealloc {
    _webpData = nil;
    [_connection cancel];
    _connection = nil;
}

#pragma mark NSURLConnectionDelegate,NSURLConnectionDataDelegate
- (NSURLRequest *)connection:(NSURLConnection *)connection willSendRequest:(NSURLRequest *)request redirectResponse:(NSURLResponse *)response {
    if (response) {//跳转
        //去除key标识，以便重新发送请求我们可以进行处理
        NSMutableURLRequest *redirectableRequest = [request mutableCopy];
        [NSURLProtocol removePropertyForKey:SNImageURLRequestHandledKey inRequest:redirectableRequest];
        [[self client] URLProtocol:self wasRedirectedToRequest:redirectableRequest redirectResponse:response];
        return redirectableRequest;
    } else {
        return request;
    }
}

- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response {
    self.webpData = [NSMutableData data];
    [[self client] URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowed];
}

- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data {
    if (self.webpData.length == 0) {
        NSString *imageContentType = [NSData sd_contentTypeForImageData:data];
        if ([imageContentType isEqualToString:@"image/webp"]) {
            self.isWebP = YES;
        }
    }
    if (self.isWebP) {
        @try {
            [self.webpData appendData:data];
        } @catch (NSException *exception) {
            [[self client] URLProtocol:self didFailWithError:[NSError errorWithDomain:@"appendData Error" code:-123 userInfo:nil]];
            [self stopLoading];
        } @finally {
            
        }
    } else {
        [[self client] URLProtocol:self didLoadData:data];
    }
}

- (void)connectionDidFinishLoading:(NSURLConnection *)connection {
    if (self.isWebP) {
        NSData *imageData = nil;
        NSString *imageContentType = [NSData sd_contentTypeForImageData:self.webpData];
        if ([imageContentType isEqualToString:@"image/webp"]) {
            UIImage *image = [UIImage sd_imageWithData:self.webpData];
            if (image) {
                NSString *url = self.request.URL.absoluteString;
                NSString *pathExtension = [[url pathExtension] lowercaseString];
                if ([pathExtension rangeOfString:@"png"].length > 0) {
                    imageData = UIImagePNGRepresentation(image);
                } else {
                    imageData = UIImageJPEGRepresentation(image, 0.75f);
                }
            }
        }
        if (imageData) {
            [[self client] URLProtocol:self didLoadData:imageData];
        } else {
            [[self client] URLProtocol:self didFailWithError:[NSError errorWithDomain:@"WebP decode Error" code:-123 userInfo:nil]];
            [self stopLoading];
            return;
        }
    }
    [[self client] URLProtocolDidFinishLoading:self];
    self.connection = nil;
    self.webpData = nil;
}

- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error {
    [[self client] URLProtocol:self didFailWithError:error];
    self.connection = nil;
    self.webpData = nil;
}
@end

• [NSURLProtocol registerClass:[SNWebPURLProtocol class]]在+load方法中注册SNWebPURLProtocol，只有注册了才能使用；

WKWebView的优缺点

• 优点：
  • 拥有60FPS的滚动刷新率；
  • 丰富的内置手势；
  • 原生与WebView之间的交互更加简单；
  • App的占用内存低；
  • 多进程结构具有更完整的执行流程控制；
• 缺点：
  • cookie的设置不方便；
  • 不能直接使用NSURLProtocol黑魔法；
• 首先，对于WKWebView，当你每创建一个WKWebView出来，默认的都会开启一个叫做Web Content Process的进程，也可以实现创建多个WKWebView，对应一个Web Content Process进程，即多对一`，这就涉及到一个共享数据的问题；
• 现在我们启动App，然后创建一个WKWebView用来加载网页，这是就存在两个进程，也就是说WKWebView在App进程之外单独开启了一个新的进程Web Content Process，如下图所示：

image.png

• 由于WKWebView开辟的是独立于App之外的进程，webView占用的内存转移到自己的进程中，而不是在App的进程中，所以App占用的内存相对于使用UIWebView时要小，那么如下阐述：
  • 当使用UIWebView时，不会开启新的进程，全部占用App的内存，导致App的内存骤增，会导致App闪退；
  • 当使用WKWebView时，若webView占用的内存过高，会使得Web Content Process进程闪退，导致App会出现webView的白屏现象，但而App不会出现闪退，可继续使用App的其他功能；
• WKWebView在iOS8系统发布出来的时候，不能像UIWebView那样非常方便的设置cookie，所以在iOS11以下的系统版本，并没有类似于UIWebView中NSHTTPCookieStorage这样可以直接设置和存储cookie的官方类，后来在iOS11时，新增了WKHTTPCookieStorage类，来帮助开发者解决cookie问题，但API功能不稳定；
• WKWebView不能直接使用NSURLProtocol黑魔法，若调用私用API来获取和实现NSURLProtocol的方法，会出现Post请求body丢失的问题；

WKWebView的简单使用

• Apple关于WKWebView提供的Api比较多，我对此做了如下分类：

image.png

• 案例代码如下：

#import "WKWebController.h"
#import <WebKit/WebKit.h>

@interface WKWebController ()<WKUIDelegate,WKNavigationDelegate>
@property(nonatomic,strong)WKWebView *webView;
@end

@implementation WKWebController

- (void)viewDidLoad {
    [super viewDidLoad];
    //WKWebView的配置
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
    self.webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, YYNavBarHeight, ScreenW, ScreenH - YYNavBarHeight) configuration:config];
    //设置代理监听对象
    self.webView.UIDelegate = self;
    self.webView.navigationDelegate = self;
    [self.view addSubview:self.webView];
    
    NSString *urlStr = @"http://www.baidu.com";
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:urlStr]]];
}

#pragma mark WKNavigationDelegate
// 页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{
    NSLog(@"%s",__func__);
}

// 内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation{
    NSLog(@"%s",__func__);
}

// 页面加载完成后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
     NSLog(@"%s",__func__);
}

// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error{
    NSLog(@"%s -- error = %@",__func__,error.localizedDescription);
}

// 接收到服务器跳转请求之后调用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation{
    NSLog(@"%s",__func__);
}

// 在发送请求之前 决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    NSLog(@"%s\n",__func__);
    NSLog(@" request = %@",navigationAction.request.URL.absoluteString);
    decisionHandler(WKNavigationActionPolicyAllow);
}

// 在收到响应之后 决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{
    NSLog(@"%s\n",__func__);
    NSLog(@" response = %@",navigationResponse.response.URL.absoluteString);
    decisionHandler(WKNavigationResponsePolicyAllow);
}

#pragma mark WKUIDelegate
// 创建一个新的WebView
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures{
    NSLog(@"%s\n",__func__);
    return  [[WKWebView alloc]init];
}

// 输入框
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
    NSLog(@"%s\n",__func__);
    completionHandler(@"HTTP");
}

// 确认框
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
    NSLog(@"%s\n",__func__);
    completionHandler(YES);
}

// 警告框
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
    NSLog(@"%s\n",__func__);
    completionHandler();
}
@end

• WKNavigationDelegate：提供追踪主窗口网页加载过程和判断主窗口是否进行页面加载新页面的相关方法，能监听webView的开始加载，正在加载，加载状态的各种回调，可以让我们掌控webView更多的加载细节，可对其加载工程进行干预；
• WKUIDelegate：提供用原生控件显示网页的方法回调；

原生Native与WebView的交互

• Native与WebView的交互分为两种：
  • 第一种：JS调用原生；
  • 第二种：原生调用JS；
• JS调用原生的方式有如下三种：
  • 第一种：通过webView的代理方法，拦截请求的URL；
  • 第二种：Native向HTML注入脚本；
  • 第三种：使用第三方库WebViewJavascriptBridge实现JS交互；
• 原生调用JS：
  • 可通过webView的evaluateJavaScript: completionHandler方法，实现Native直接调用HTML中的JS方法；

第一种：拦截请求的URL

• 首先我自己写了一个本地HTML文件indexUrl.html，代码如下所示：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8">
            <script language="javascript">
                function loadURL(url) {
                    var iFrame;
                    iFrame = document.createElement("iframe");
                    iFrame.setAttribute("src", url);
                    iFrame.setAttribute("style", "display:none;");
                    iFrame.setAttribute("height", "0px");
                    iFrame.setAttribute("width", "0px");
                    iFrame.setAttribute("frameborder", "0");
                    document.body.appendChild(iFrame);
                    // 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
                    iFrame.parentNode.removeChild(iFrame);
                    iFrame = null;
                }
            function scanClick() {
                alert(arr);
                loadURL("haleyAction://scanClick");
            }
                
            function shareClick() {
                loadURL("haleyAction://shareClick?title=测试分享的标题&content=测试分享的内容&url=http://www.baidu.com");
            }
            
            function locationClick() {
                loadURL("haleyAction://getLocation");
            }
            
            function setLocation(location) {
                asyncAlert(location);
                document.getElementById("returnValue").value = location;
            }
            
            function getQRCode(result) {
                asyncAlert(result);
                document.getElementById("returnValue").value = result;
            }
            
            function colorClick() {
                loadURL("haleyAction://setColor?r=67&g=205&b=128&a=0.5");
            }
            
            function payClick() {
                loadURL("haleyAction://payAction?order_no=201511120981234&channel=wx&amount=1&subject=粉色外套");
            }
            
            function payResult(str,code) {
                var content = str + ", " + code;
                asyncAlert(content);
                document.getElementById("returnValue").value = content;
            }
            
<!--            function payResult(str) {-->
<!--                var content = str;-->
<!--                asyncAlert(content);-->
<!--                document.getElementById("returnValue").value = content;-->
<!--            }-->
            
            function shareResult(channel_id,share_channel,share_url) {
                var content = channel_id+","+share_channel+","+share_url;
                asyncAlert(content);
                document.getElementById("returnValue").value = content;
            }

            function shake() {
                loadURL("haleyAction://shake");
            }
            
            function goBack() {
                loadURL("haleyAction://back");
            }
            
            function asyncAlert(content) {
                setTimeout(function(){
                           alert(content);
                           },1);
            }
            
            
            </script>
            </head>
    
    <body>
        <h1>这是按钮调用</h1>
        <input type="button" value="扫一扫" onclick="scanClick()" />
        <input type="button" value="获取定位" onclick="locationClick()" />
        <input type="button" value="修改背景色" onclick="colorClick()" />
        <input type="button" value="分享" onclick="shareClick()" />
        <input type="button" value="支付" onclick="payClick()" />
        <input type="button" value="摇一摇" onclick="shake()" />
        <input type="button" value="返回" onclick="goBack()" />
        
        <h1>这是文件上传</h1>

        <input type="file" />
        
        <h1>这是回调结果展示区</h1>
        <textarea id ="returnValue" type="value" rows="5" cols="50">
        
        </textarea>
        
        <h4>竖直方向的表头：</h4>
        <table border="1" style="width:300px;height:600px">
            <tr>
                <th>姓名</th>
                <td>Bill Gates</td>
            </tr>
            <tr>
                <th>电话</th>
                <td>555 77 854</td>
            </tr>
            <tr>
                <th>传真</th>
                <td>555 77 855</td>
            </tr>
        </table>
    </body>
</html>

• WKWebView加载indexUrl.html，代码实现如下：

#import "WKURLController.h"
#import <WebKit/WebKit.h>

@interface WKURLController ()<WKUIDelegate,WKNavigationDelegate,UIScrollViewDelegate>
@property(nonatomic,strong)NSURL *url;
@property(nonatomic,strong)WKWebView *webView;
@property(nonatomic,strong)UIProgressView *progressView;
@property(nonatomic,assign)CGFloat delayTime;
@end

@implementation WKURLController

- (void)viewDidLoad {
    [super viewDidLoad];
    _url = [[NSBundle mainBundle] URLForResource:@"indexUrl" withExtension:@"html"];
    [self.view addSubview:self.webView];
    [self.view addSubview:self.progressView];
    [self.webView addObserver:self forKeyPath:@"estimatedProgress" options:(NSKeyValueObservingOptionNew) context:nil];
}

- (void)dealloc{
    NSLog(@"%s",__func__);
    [self.webView removeObserver:self forKeyPath:@"estimatedProgress"];
}

#pragma mark WKNavigationDelegate
// 在发送请求之前 决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    NSLog(@"%s\n",__func__);
    NSLog(@" request = %@",navigationAction.request.URL.absoluteString);
    
    NSURL *url = navigationAction.request.URL;
    NSString *scheme = [url scheme];
    
    if ([scheme isEqualToString:@"haleyaction"]) {
        [self handleCustomAction:url];
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}

#pragma mark 与JS约定的OC方法
- (void)handleCustomAction:(NSURL *)URL{
    NSString *host = [URL host];
    if ([host isEqualToString:@"scanClick"]) {
        NSLog(@"扫一扫");
    } else if ([host isEqualToString:@"shareClick"]) {
        [self share:URL];
    } else if ([host isEqualToString:@"getLocation"]) {
        [self getLocation];
    } else if ([host isEqualToString:@"setColor"]) {
        [self changeBGColor:URL];
    } else if ([host isEqualToString:@"payAction"]) {
        [self payAction:URL];
    } else if ([host isEqualToString:@"shake"]) {
        [self shakeAction];
    } else if ([host isEqualToString:@"back"]) {
        [self goBack];
    }
}

- (void)getLocation{
    // 获取位置信息
    // 将结果返回给js
    // 直接调用JS中的setLocation方法，设置位置信息到HTML标签上
    NSString *jsStr = [NSString stringWithFormat:@"setLocation('%@')",@"广东省深圳市南山区学府路XXXX号"];
    [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"%@----%@",result, error);
    }];
}

- (void)share:(NSURL *)URL{
    //JS 向 OC 传递参数 是拼接在URL当中的 需要我们手动去截取
    NSArray *params =[URL.query componentsSeparatedByString:@"&"];
    
    NSMutableDictionary *tempDic = [NSMutableDictionary dictionary];
    for (NSString *paramStr in params) {
        NSArray *dicArray = [paramStr componentsSeparatedByString:@"="];
        if (dicArray.count > 1) {
            NSString *decodeValue = [dicArray[1] stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
            [tempDic setObject:decodeValue forKey:dicArray[0]];
        }
    }
    
    NSString *title = [tempDic objectForKey:@"title"];
    NSString *content = [tempDic objectForKey:@"content"];
    NSString *url = [tempDic objectForKey:@"url"];
    // 在这里执行分享的操作
    
    // 将分享结果返回给js
    NSString *jsStr = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
    [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"%@----%@",result, error);
    }];
}

- (void)changeBGColor:(NSURL *)URL{
    NSArray *params =[URL.query componentsSeparatedByString:@"&"];
    NSMutableDictionary *tempDic = [NSMutableDictionary dictionary];
    for (NSString *paramStr in params) {
        NSArray *dicArray = [paramStr componentsSeparatedByString:@"="];
        if (dicArray.count > 1) {
            NSString *decodeValue = [dicArray[1] stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
            [tempDic setObject:decodeValue forKey:dicArray[0]];
        }
    }
    CGFloat r = [[tempDic objectForKey:@"r"] floatValue];
    CGFloat g = [[tempDic objectForKey:@"g"] floatValue];
    CGFloat b = [[tempDic objectForKey:@"b"] floatValue];
    CGFloat a = [[tempDic objectForKey:@"a"] floatValue];
    
    self.view.backgroundColor = [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:a];
}

- (void)payAction:(NSURL *)URL{
    NSArray *params =[URL.query componentsSeparatedByString:@"&"];
    
    NSMutableDictionary *tempDic = [NSMutableDictionary dictionary];
    for (NSString *paramStr in params) {
        NSArray *dicArray = [paramStr componentsSeparatedByString:@"="];
        if (dicArray.count > 1) {
            NSString *decodeValue = [dicArray[1] stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
            [tempDic setObject:decodeValue forKey:dicArray[0]];
        }
    }
    //    NSString *orderNo = [tempDic objectForKey:@"order_no"];
    //    long long amount = [[tempDic objectForKey:@"amount"] longLongValue];
    //    NSString *subject = [tempDic objectForKey:@"subject"];
    //    NSString *channel = [tempDic objectForKey:@"channel"];
    
    // 支付操作
    
    // 将支付结果返回给js
    NSString *jsStr = [NSString stringWithFormat:@"payResult('%@')",@"支付成功"];
    [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"%@----%@",result, error);
    }];
}

- (void)shakeAction{
//    AudioServicesPlaySystemSound (kSystemSoundID_Vibrate);
}

- (void)goBack{
    if ([self.webView canGoBack]) {
        [self.webView goBack];
    }else{
        [self.navigationController popViewControllerAnimated:YES];
    }
}

#pragma mark events
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
    if ([keyPath isEqualToString:@"estimatedProgress"]) {
        [self.progressView setProgress:self.webView.estimatedProgress animated:YES];
        
        if (self.webView.estimatedProgress < 1.0) {
            _delayTime = 1 - self.webView.estimatedProgress;
            return;
        }
        //延迟执行
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(_delayTime * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            self.progressView.progress = 0;
        });
    }
}

#pragma mark lazy
- (WKWebView *)webView{
    if (!_webView) {
        //创建WKWebView的配置
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];
        configuration.userContentController = [[WKUserContentController alloc]init];
        //支持内嵌视频播放,否则网页中的视频无法播放
        configuration.allowsInlineMediaPlayback = YES;
        //偏好设置
        WKPreferences *preferences = [WKPreferences new];
        preferences.javaScriptCanOpenWindowsAutomatically = YES;
        preferences.minimumFontSize = 40.0;
        configuration.preferences = preferences;
        
        //创建WKWebView
        _webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, YYNavBarHeight, ScreenW, ScreenH - YYNavBarHeight) configuration:configuration];
        //设置内部滚动视图的代理
        _webView.scrollView.delegate = self;
        //设置navigationDelegate
        _webView.navigationDelegate = self;
        //设置UIDelegate
        _webView.UIDelegate = self;
        //加载HTML资源
        [_webView loadRequest:[NSURLRequest requestWithURL:_url]];
    }
    return _webView;
}

- (UIProgressView *)progressView{
    if (!_progressView) {
        _progressView = [[UIProgressView alloc]initWithFrame:CGRectMake(0, YYNavBarHeight, ScreenW, 2)];
        _progressView.progressTintColor = [UIColor redColor];
        _progressView.trackTintColor = [UIColor clearColor];
    }
    return _progressView;
}
@end

• 加载出来的webView如下所示：

image.png

• 在- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler代理方法中，拦截HTML传递过来的URL，然后根据URL中的scheme与host区分出不同的点击事件，然后执行不同的事件回调，这里实现了JS 调用 原生；
• 当点击HTML中的获取定位按钮，在WKWebView的代理方法中获取HTML中JS事件传递过来的URL，loadURL("haleyAction://getLocation")，然后根据URL中的scheme与host参数，确定原生中的事件回调为- (void)getLocation；
• 在getLocation原生方法中，获取位置信息，然后再传递给HTML，这里是直接调用HTML中的JS方法，

- (void)getLocation{
    // 获取位置信息
    // 将结果返回给js
    NSString *jsStr = [NSString stringWithFormat:@"setLocation('%@')",@"广东省深圳市南山区学府路XXXX号"];
    [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"%@----%@",result, error);
    }];
}

• 将位置信息，作为参数，通过evaluateJavaScript: completionHandler 直接调用JS方法setLocation:，这里实现了原生 调用 JS
• 综上所述，实现了原生与JS之间的相互调用，即JS交互；

第二种：Native向HTML注入脚本事件回调

• 通过WKScriptMessageHandler 原生直接向HTML注入脚本事件回调，实现代码如下：

#import "HHController.h"
#import <WebKit/WebKit.h>

@interface HHController ()<WKUIDelegate,WKNavigationDelegate,UIScrollViewDelegate,WKScriptMessageHandler>
@property(nonatomic,strong)NSURL *url;
@property(nonatomic,strong)WKWebView *webView;
@property(nonatomic,strong)UIProgressView *progressView;
@property(nonatomic,assign)CGFloat delayTime;
@end

@implementation HHController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.url = [[NSBundle mainBundle] URLForResource:@"indexHandler" withExtension:@"html"];
    [self.view addSubview:self.webView];
    [self.view addSubview:self.progressView];
    [self.webView addObserver:self forKeyPath:@"estimatedProgress" options:(NSKeyValueObservingOptionNew) context:nil];
}

- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    // OC 向 JS 中注册脚本信息 为JS调用OC方法做铺垫
    // addScriptMessageHandler 很容易导致循环引用
    // 控制器 强引用了WKWebView, WKWebView copy(强引用了)configuration， configuration copy(强引用了) userContentController
    // userContentController 强引用了 self(控制器)
    // 为了解决这个循环引用
    // addScriptMessageHandler 与 removeScriptMessageHandlerForName 必须成对出现
    // 扫一扫
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"showMessage"];
    
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"finishArea"];
    // 获取定位
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Location"];
    // 修改背景颜色
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Share"];
    // 分享
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Color"];
    // 支付
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Pay"];
    // 摇一摇
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Shake"];
    // 返回
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"GoBack"];
    // 播放声音
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"PlaySound"];
}

- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    // 因此这里要记得移除handlers
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"showMessage"];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"finishArea"];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Location"];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Share"];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Color"];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Pay"];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Shake"];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"GoBack"];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"PlaySound"];
}

- (void)dealloc{
    NSLog(@"%s",__func__);
    [self.webView removeObserver:self forKeyPath:@"estimatedProgress"];
}

#pragma mark WKScriptMessageHandler  JS --> OC
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    //JS -- Native 约定好的方法名称
    NSString *name = message.name;
    
    if ([name isEqualToString:@"ScanAction"]) {
        NSLog(@"扫一扫");
    } else if ([message.name isEqualToString:@"Location"]) {
        [self getLocation];
    } else if ([message.name isEqualToString:@"Share"]) {
        [self shareWithParams:message.body];
    } else if ([message.name isEqualToString:@"Color"]) {
        [self changeBGColor:message.body];
    } else if ([message.name isEqualToString:@"Pay"]) {
        [self payWithParams:message.body];
    } else if ([message.name isEqualToString:@"Shake"]) {
        [self shakeAction];
    } else if ([message.name isEqualToString:@"GoBack"]) {
        [self goBack];
    } else if ([message.name isEqualToString:@"PlaySound"]) {
        [self playSound:message.body];
    }
}

#pragma mark 与JS约定的OC方法
- (void)getLocation{
    // 获取位置信息
    // 将结果返回给js  OC --> JS
    NSString *jsStr = [NSString stringWithFormat:@"setLocation('%@')",@"广东省深圳市南山区学府路XXXX号"];
    // OC 将获取的位置参数 传递给JS JS然后将其在H5页面上显示
    [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"%@----%@",result, error);
    }];
    
    NSString *jsStr2 = @"window.ctuapp_share_img";
    [self.webView evaluateJavaScript:jsStr2 completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"%@----%@",result, error);
    }];
}

- (void)shareWithParams:(NSDictionary *)tempDic{
    if (![tempDic isKindOfClass:[NSDictionary class]]) {
        return;
    }
    NSString *title = [tempDic objectForKey:@"title"];
    NSString *content = [tempDic objectForKey:@"content"];
    NSString *url = [tempDic objectForKey:@"url"];
    // 在这里执行分享的操作
    
    // 将分享结果返回给js
    NSString *jsStr = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
    [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"%@----%@",result, error);
    }];
}

- (void)changeBGColor:(NSArray *)params{
    if (![params isKindOfClass:[NSArray class]]) {
        return;
    }
    if (params.count < 4) {
        return;
    }
    CGFloat r = [params[0] floatValue];
    CGFloat g = [params[1] floatValue];
    CGFloat b = [params[2] floatValue];
    CGFloat a = [params[3] floatValue];
    self.view.backgroundColor = [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:a];
}

- (void)payWithParams:(NSDictionary *)tempDic{
    if (![tempDic isKindOfClass:[NSDictionary class]]) {
        return;
    }
    NSString *orderNo = [tempDic objectForKey:@"order_no"];
    long long amount = [[tempDic objectForKey:@"amount"] longLongValue];
    NSString *subject = [tempDic objectForKey:@"subject"];
    NSString *channel = [tempDic objectForKey:@"channel"];
    NSLog(@"%@---%lld---%@---%@",orderNo,amount,subject,channel);
    // 支付操作
    
    // 将支付结果返回给js
    NSString *jsStr = [NSString stringWithFormat:@"payResult('%@')",@"支付成功"];
    [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"%@----%@",result, error);
    }];
}

- (void)shakeAction{
//    AudioServicesPlaySystemSound (kSystemSoundID_Vibrate);
//    [HLAudioPlayer playMusic:@"shake_sound_male.wav"];
}

- (void)goBack{
    if ([self.webView canGoBack]) {
        [self.webView goBack];
    }else{
        [self.navigationController popViewControllerAnimated:YES];
    }
}

- (void)playSound:(NSString *)fileName{
//    if (![fileName isKindOfClass:[NSString class]]) {
//        return;
//    }
//
//    [HLAudioPlayer playMusic:fileName];
}

#pragma mark events
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
    if ([keyPath isEqualToString:@"estimatedProgress"]) {
        [self.progressView setProgress:self.webView.estimatedProgress animated:YES];
        
        if (self.webView.estimatedProgress < 1.0) {
            _delayTime = 1 - self.webView.estimatedProgress;
            return;
        }
        //延迟执行
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(_delayTime * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            self.progressView.progress = 0;
        });
    }
}

#pragma mark lazy
- (WKWebView*)webView{
    if (!_webView) {
        //创建WKWebView的配置
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];
        configuration.userContentController = [[WKUserContentController alloc]init];
        //支持内嵌视频播放,否则网页中的视频无法播放
        configuration.allowsInlineMediaPlayback = YES;
        //参数对象
        WKPreferences *preferences = [WKPreferences new];
        preferences.javaScriptCanOpenWindowsAutomatically = YES;
        preferences.minimumFontSize = 40.0;
        configuration.preferences = preferences;
        
        //创建WKWebView
        _webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, YYNavBarHeight, ScreenW, ScreenH - YYNavBarHeight) configuration:configuration];
        //设置内部滚动视图的代理
        _webView.scrollView.delegate = self;
        //设置navigationDelegate
        _webView.navigationDelegate = self;
        //设置UIDelegate
        _webView.UIDelegate = self;
        //加载HTML资源
        [_webView loadRequest:[NSURLRequest requestWithURL:self.url]];
    }
    return _webView;
}

- (UIProgressView*)progressView{
    if (!_progressView) {
        _progressView = [[UIProgressView alloc]initWithFrame:CGRectMake(0, YYNavBarHeight, ScreenW, 2)];
        _progressView.progressTintColor = [UIColor redColor];
        _progressView.trackTintColor = [UIColor clearColor];
    }
    return _progressView;
}
@end

• WKUserContentController在添加完脚本事件回调即addScriptMessageHandler之后，必须要移除，执行removeScriptMessageHandlerForName，否则会造成内存泄漏，这里实现的是JS 调用 原生，实现原生 调用 JS与第一种方法中的方式相同，直接原生调用JS方法；

第三种：使用第三方库WebViewJavascriptBridge实现JS交互

• WebViewJavascriptBridge 专门用来实现 原生与JS进行交互的第三库；
• 案例代码，首先是引用WebViewJavascriptBridge第三库的的HTML代码，文件为indexBridge.html，如下所示：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8">
         <script language="javascript">
            function setupWebViewJavascriptBridge(callback) {
                if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
                if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
                window.WVJBCallbacks = [callback];
                var WVJBIframe = document.createElement('iframe');
                WVJBIframe.style.display = 'none';
                WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
            }
            
            setupWebViewJavascriptBridge(function(bridge) {
                 bridge.registerHandler('testJSFunction', function(data, responseCallback) {
                    alert('JS方法被调用:'+data);
                    responseCallback('js执行过了');
                 })
            })

            function scanClick() {
                WebViewJavascriptBridge.callHandler('scanClick', {'foo': 'bar'}, function(response) {
                    alert('扫描结果:' + response);
                    document.getElementById("returnValue").value = response;
                })
            }
            
            function shareClick() {
                var params = {'title':'测试分享的标题','content':'测试分享的内容','url':'http://www.baidu.com'};
                WebViewJavascriptBridge.callHandler('shareClick',params,function(response) {
                     alert(response);
                    document.getElementById("returnValue").value = response;
                 });
            }
            
            function locationClick() {
                WebViewJavascriptBridge.callHandler('locationClick',null,function(response) {
                    alert(response);
                    document.getElementById("returnValue").value = response;
                });
            }
            
            function colorClick() {
                var params = {'r':67,'g':20,'b':128,'a':0.5};
                WebViewJavascriptBridge.callHandler('colorClick',params);
            }
            
            function payClick() {
                var params = {'order_no':'201511120981234','channel':'wx','amount':1,'subject':'粉色外套'};
                WebViewJavascriptBridge.callHandler('payClick',params,function(response) {
                    alert(response);
                    document.getElementById("returnValue").value = response;
                });
            }

            function shake() {
                WebViewJavascriptBridge.callHandler('shakeClick');
            }
            
            function goBack() {
                WebViewJavascriptBridge.callHandler('goback');
            }
            
            function asyncAlert(content) {
                setTimeout(function(){
                           alert(content);
                           },1);
            }
            </script>
         </head>
    
    <body>
        <h1>这是按钮调用</h1>
        <input id = 'scanBtn' type="button" value="扫一扫" onclick="scanClick()"/>
        <input id = 'locationBtn' type="button" value="获取定位" onclick="locationClick()" />
        <input id = 'colorBtn' type="button" value="修改背景色" onclick="colorClick()" />
        <input id = 'shareBtn' type="button" value="分享" onclick="shareClick()" />
        <input id = 'payBtn' type="button" value="支付" onclick="payClick()" />
        <input id = 'shakeBtn' type="button" value="摇一摇" onclick="shake()" />
        <input id = 'gobackBtn' type="button" value="返回" onclick="goBack()" />
        
        <h1>这是文件上传</h1>

        <input type="file" />
        
        <h1>这是回调结果展示区</h1>
        <textarea id ="returnValue" type="value" rows="5" cols="50">
        
        </textarea>
        
        <h4>竖直方向的表头：</h4>
        <table border="1" style="width:300px;height:600px">
            <tr>
                <th>姓名</th>
                <td>Bill Gates</td>
            </tr>
            <tr>
                <th>电话</th>
                <td>555 77 854</td>
            </tr>
            <tr>
                <th>传真</th>
                <td>555 77 855</td>
            </tr>
        </table>
    </body>
</html>

• 然后是引用WebViewJavascriptBridge第三方库的OC原生代码UIWebJSBController.h/m，如下所示：

#import "UIWebJSBController.h"

@interface UIWebJSBController ()<UIWebViewDelegate>
@property(nonatomic,strong)UIWebView *webView;
@property(nonatomic,strong)WebViewJavascriptBridge *webJSBridge;
@property(nonatomic,strong)NSURL *url;
@end

@implementation UIWebJSBController

- (void)viewDidLoad {
    [super viewDidLoad];
    _url = [[NSBundle mainBundle] URLForResource:@"indexBridge" withExtension:@"html"];
    [self.view addSubview:self.webView];
    
    UIBarButtonItem *rightItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemReply target:self action:@selector(rightClick)];
    self.navigationItem.rightBarButtonItem = rightItem;
    
    _webJSBridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
    [_webJSBridge setWebViewDelegate:self];
    
    // 添加JS 要调用的Native 功能
    [self registerNativeFunctions];
}

- (void)dealloc{
    NSLog(@"%s",__func__);
}

#pragma mark events
- (void)rightClick{
    // native 调用 JS
    [_webJSBridge callHandler:@"testJSFunction" data:@"一个字符串" responseCallback:^(id responseData) {
        NSLog(@"调用完JS后的回调：%@",responseData);
    }];
}

#pragma mark - private method
- (void)registerNativeFunctions{
    [self registScanFunction];
    [self registShareFunction];
    [self registLocationFunction];
    [self regitstBGColorFunction];
    [self registPayFunction];
    [self registShakeFunction];
}

// JS 调用 原生
- (void)registLocationFunction{
    [_webJSBridge registerHandler:@"locationClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        // 获取位置信息
        
        NSString *location = @"广东省深圳市南山区学府路XXXX号";
        // 将结果返回给js
        responseCallback(location);
    }];
}

- (void)registScanFunction{
    // 注册的handler 是供 JS调用Native 使用的。
    [_webJSBridge registerHandler:@"scanClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"扫一扫");
        NSString *scanResult = @"http://www.baidu.com";
        responseCallback(scanResult);
    }];
}

- (void)registShareFunction{
    [_webJSBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data 的类型与 JS中传的参数有关
        NSDictionary *tempDic = data;
        // 在这里执行分享的操作
        NSString *title = [tempDic objectForKey:@"title"];
        NSString *content = [tempDic objectForKey:@"content"];
        NSString *url = [tempDic objectForKey:@"url"];
        
        // 将分享的结果返回到JS中
        NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];
        responseCallback(result);
    }];
}

- (void)regitstBGColorFunction{
    __weak typeof(self) weakSelf = self;
    [_webJSBridge registerHandler:@"colorClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data 的类型与 JS中传的参数有关
        NSDictionary *tempDic = data;
        
        CGFloat r = [[tempDic objectForKey:@"r"] floatValue];
        CGFloat g = [[tempDic objectForKey:@"g"] floatValue];
        CGFloat b = [[tempDic objectForKey:@"b"] floatValue];
        CGFloat a = [[tempDic objectForKey:@"a"] floatValue];
        
        weakSelf.webView.backgroundColor = [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:a];
    }];
}

- (void)registPayFunction{
    [_webJSBridge registerHandler:@"payClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data 的类型与 JS中传的参数有关
        NSDictionary *tempDic = data;
        NSString *orderNo = [tempDic objectForKey:@"order_no"];
        long long amount = [[tempDic objectForKey:@"amount"] longLongValue];
        NSString *subject = [tempDic objectForKey:@"subject"];
        NSString *channel = [tempDic objectForKey:@"channel"];
        // 支付操作...
        
        // 将分享的结果返回到JS中
        NSString *result = [NSString stringWithFormat:@"支付成功:%@,%@,%@",orderNo,subject,channel];
        responseCallback(result);
    }];
}

- (void)registShakeFunction{
    [_webJSBridge registerHandler:@"shakeClick" handler:^(id data, WVJBResponseCallback responseCallback) {
//        AudioServicesPlaySystemSound (kSystemSoundID_Vibrate);
    }];
}

- (void)registGoBackFunction{
    __weak typeof(self) weakSelf = self;
    [_webJSBridge registerHandler:@"goback" handler:^(id data, WVJBResponseCallback responseCallback) {
        [weakSelf.webView goBack];
    }];
}

#pragma mark lazy
- (UIWebView*)webView{
    if (!_webView) {
        _webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, YYNavBarHeight, ScreenW, ScreenH - YYNavBarHeight)];
        _webView.delegate = self;
        [_webView loadRequest:[NSURLRequest requestWithURL:_url]];
        //UIWebView 滚动的比较慢，这里设置为正常速度
        _webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;
    }
    return _webView;
}
@end

• 下面我们来探讨一下WebViewJavascriptBridge的执行原理；
• 首先是WebViewJavascriptBridge的初始化，包括两个部分，一部分是原生OC的WebViewJavascriptBridge对象初始化，另一部分是JavaScript中的window.WebViewJavascriptBridge的初始化，最终的实现目标是：让原生OC与JavaScript两端各自持有一个WebViewJavascriptBridge对象；
• 原生OC的WebViewJavascriptBridge对象的初始化，如下所示：

#pragma mark lazy
- (UIWebView*)webView{
    if (!_webView) {
        _webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, YYNavBarHeight, ScreenW, ScreenH - YYNavBarHeight)];
        _webView.delegate = self;
        [_webView loadRequest:[NSURLRequest requestWithURL:_url]];
        //UIWebView 滚动的比较慢，这里设置为正常速度
        _webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;
    }
    return _webView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    _url = [[NSBundle mainBundle] URLForResource:@"indexBridge" withExtension:@"html"];
    [self.view addSubview:self.webView];
    
    UIBarButtonItem *rightItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemReply target:self action:@selector(rightClick)];
    self.navigationItem.rightBarButtonItem = rightItem;
    
    //创建WebViewJavascriptBridge对象
    _webJSBridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
    [_webJSBridge setWebViewDelegate:self];
    
    // 添加JS 要调用的Native方法
    [self registerNativeFunctions];
}

• 紧接着原生端会向WebViewJavascriptBridge 注册 JS方法的回调Handler；

//分享
- (void)registShareFunction{
    [_webJSBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data 的类型与 JS中传的参数有关
        NSDictionary *tempDic = data;
        // 在这里执行分享的操作
        NSString *title = [tempDic objectForKey:@"title"];
        NSString *content = [tempDic objectForKey:@"content"];
        NSString *url = [tempDic objectForKey:@"url"];
        
        // 将分享的结果返回到JS中
        NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];
        responseCallback(result);
    }];
}

• _webJSBridge调用registerHandler函数，注册方法，第一个参数方法名称，是原生端与JS双方约定好的，第二个参数handler是JS方法在原生端的回调函数，也就是说JS方法中会调用在原生端定义的handler(Block代码块)，其中有两个参数，参数data表示JS传递给原生端的数据，参数responseCallback表示
• registerHandler函数实现如下：

- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
    _base.messageHandlers[handlerName] = [handler copy];
}

• WebViewJavascriptBridge持有一个WebViewJavascriptBridgeBase对象，在WebViewJavascriptBridgeBase中有一个字典属性messageHandlers，其存储的是原生方法名 -- JS方法在原生端的回调方法的键值对，上面注册了6个JS方法在原生端的回调方法，所以messageHandlers中会存储6个键值对；
• 接下来UIWebView开始加载URL，HTML页面一加载就会执行HTML中关于WebViewJavascriptBridge的初始化代码，即setupWebViewJavascriptBridge(bridge)函数，如下所示：

function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

setupWebViewJavascriptBridge(function(bridge) {
    //注册
     bridge.registerHandler('testJSFunction', function(data, responseCallback) {
        alert('JS方法被调用:'+data);
        responseCallback('js执行过了');
     })
     
})

• 创建WVJBIframe对象，WVJBIframe可以理解为webview中的窗口，当我们改变iframe的src属性的时候，相当于我们浏览器实现了链接的跳转，WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'，一旦赋值webView就会重定向，那么WebViewJavascriptBridge中监听到webView的URL重定向的回调，如下：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    if (webView != _webView) { return YES; }
    
    NSURL *url = [request URL];
    __strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
    if ([_base isWebViewJavascriptBridgeURL:url]) {
        if ([_base isBridgeLoadedURL:url]) {
            [_base injectJavascriptFile];
        } else if ([_base isQueueMessageURL:url]) {
            //JS命令转成字符串
            NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
            [_base flushMessageQueue:messageQueueString];
        } else {
            [_base logUnkownMessage:url];
        }
        return NO;
    } else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
        return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
    } else {
        return YES;
    }
}

• 我们首先通过[_base isWebViewJavascriptBridgeURL:url]来判断是否是普通的跳转，还是webViewjavascriptBridege的跳转，如果是__bridge_loaded__则执行[_base injectJavascriptFile]方法初始化Javascript环境的消息，如果是__wvjb_queue_message__则表示是发送Javascript消息；
• 上面阐述的是两端初始化webViewjavascriptBridege的逻辑流程，现在我们来探索一下，当用户点击HTML中分享按钮时，是如何实现JS与原生之间的相互通信的；
• 首先JS中会执行shareClick函数，实现如下：

function shareClick() {
    var params = {'title':'测试分享的标题','content':'测试分享的内容','url':'http://www.baidu.com'};
    WebViewJavascriptBridge.callHandler('shareClick',params,function(response) {
         alert(response);
        document.getElementById("returnValue").value = response;
     });
}

• 其中字符串shareClick是双方约定好的方法名，params是JS传递给原生端的数据，function是回调函数，提供给原生端调用的，其中response是原生端传递给JS的数据；
• 然后来到WebViewJavascriptBridge中，调用callHandler方法，实现如下：

- (void)callHandler:(NSString *)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback {
    [_base sendData:data responseCallback:responseCallback handlerName:handlerName];
}

• 内部调用WebViewJavascriptBridgeBase的sendData:方法，实现如下：

- (void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName {
    NSMutableDictionary* message = [NSMutableDictionary dictionary];
    if (data) {
        message[@"data"] = data;
    }
    if (responseCallback) {
        NSString* callbackId = [NSString stringWithFormat:@"objc_cb_%ld", ++_uniqueId];
        self.responseCallbacks[callbackId] = [responseCallback copy];
        message[@"callbackId"] = callbackId;
    }
    if (handlerName) {
        message[@"handlerName"] = handlerName;
    }
    [self _queueMessage:message];
}

• 创建字典，然后以键值对的形式存储，handlerName -- 约定的方法名，data -- JS传递给原生端的数据，callbackId -- 回调函数Id，同时将回调函数存储在属性字典responseCallbacks中，最后将字典方法属性数组startupMessageQueue中；
• 接着来到WebView拦截URL的代理监听方法中，这次是发送JS消息，所以调用如下：

NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
[_base flushMessageQueue:messageQueueString];

• 将JS字符串，转成字符串，flushMessageQueue核心实现如下：

- (void)flushMessageQueue:(NSString *)messageQueueString{
    ...
    id messages = [self _deserializeMessageJSON:messageQueueString];
    for (WVJBMessage* message in messages) {
        WVJBResponseCallback responseCallback = NULL;
        NSString *callbackId = message[@"callbackId"];
        if (callbackId) {
            //定义初始化JS端的回调函数(供原生调用的)
            responseCallback = ^(id responseData) {
                if (responseData == nil) {
                    responseData = [NSNull null];
                }
                WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
                [self _queueMessage:msg];
            };
        }
        //取出原生端定义的回调函数(供JS调用的)
        WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];
        
        if (!handler) {
            NSLog(@"WVJBNoHandlerException, No handler for message from JS: %@", message);
            continue;
        }
        //执行回调 原生端的回调函数
        handler(message[@"data"], responseCallback);
    }
}

• 其核心逻辑有两个，一个是获取JS端定义的回调函数id即callbackId，若id存在，则定义初始化一个回调block即responseCallback(供原生调用的)，将callbackId与原生端传给JS的参数封装到WVJBMessage对象中去，另一个是从messageHandlers中取出原生端定义的回调函数(供JS调用的)，然后执行原生端的回调函数handler(message[@"data"], responseCallback)，就会来到如下所示：

- (void)registShareFunction{
    [_webJSBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data 的类型与 JS中传的参数有关
        NSDictionary *tempDic = data;
        // 在这里执行分享的操作
        NSString *title = [tempDic objectForKey:@"title"];
        NSString *content = [tempDic objectForKey:@"content"];
        NSString *url = [tempDic objectForKey:@"url"];
        // 将分享的结果返回到JS中
        NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];
        //data是JS端传递过来的参数，responseCallback是JS端定义的函数
        responseCallback(result);
    }];
}

• 上面就实现了JS 调用 原生函数；
• 最后执行responseCallback(result)，responseCallback就是上面定义初始化的提供给原生调用的回调函数，执行

responseCallback = ^(id responseData) {
    if (responseData == nil) {
        responseData = [NSNull null];
    }
    
    WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
    [self _queueMessage:msg];
};

• responseData是原生端传给JS的数据；
• 最后进入_queueMessage:函数，实现如下：

- (void)_queueMessage:(WVJBMessage*)message {
    if (self.startupMessageQueue) {
        [self.startupMessageQueue addObject:message];
    } else {
        [self _dispatchMessage:message];
    }
}

• 进入_dispatchMessage:，实现如下：

- (void)_dispatchMessage:(WVJBMessage*)message {
    NSString *messageJSON = [self _serializeMessage:message pretty:NO];
    [self _log:@"SEND" json:messageJSON];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\'" withString:@"\\\'"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\\u2028"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\\u2029"];
    
    NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
    if ([[NSThread currentThread] isMainThread]) {
        [self _evaluateJavascript:javascriptCommand];

    } else {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [self _evaluateJavascript:javascriptCommand];
        });
    }
}

• 将原生端传递的数据，转成JS执行命令，最后执行：

[_webView stringByEvaluatingJavaScriptFromString:javascriptCommand]

• 这里就实现了原生调用JS；

参考文章

https://baijiahao.baidu.com/s?id=1706003657854947113&wfr=spider&for=pc