JavaScriptCore实现iOS和JS之间的通信（一）

前言

Slogan： 我又回来啦

好久没有写文章了，很大的原因是同花顺的加班过于严重。连我自己的博客我都没时间维护（老板千万不要看到这篇文章 么么哒）

好了言归正传，不扯淡了。在iOS开发的过程中，肯定要嵌入部分UIWebView。本文实用场景：在UIWebView中点击某个WebView上的按钮或者某些条件下，可以回调到iOS中。又或者你像在WebView中加入某些JS代码。

JS -> Native

JS调用原生，可以在引入JavaScriptCore之后。

JS端实现

//iOSNative 这个是随便定义的 只要和JS那边商议好久ok
//callHandler 这个是function name，方法名称 要和JS商议确定
//handlerName和info 这个是传过来给iOS的参数
iOSNative.callHandler(handlerName,info)

OC端实现

自己要定义一个继承<JSExport>的Protocol，并在Web所在的ViewController中实现这个Protocol。

#import <JavaScriptCore/JavaScriptCore.h>

@protocol WebViewJSExportProtocol <JSExport>

JSExportAs(callHandler, - (void)callHandler:(NSString *)handlerName withInfo:(NSDictionary *)info);

@end

解释：JSExportAs是JSExport中的一个宏。意思就是，我把OC的- (void)callHandler方法对应给JS中的callHandler方法。就给把OC方法映射到JS中

在.m文件中,实现Protocol

@interface ViewController ()<UIWebViewDelegate, WebViewJSExportProtocol>

//声明一个JSContent JS运行环境上下文
@property(nonatomic,strong) JSContent *context;

@end

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
    //获取WebView的JS运行环境上下文环境
    self.content = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //把JS环境中的iOSNative指向self
    [self.content setObject:self forKeyedSubscript:@"iOSNative"];
    
}

//回调Method
- (void)callHandler:(NSString *)handlerName withInfo:(NSDictionary *)info
{
    NSLog(@"%@ %@",handlerName,info);
}

解释：实现上面步骤，只要JS端调用 iOSNative.callHandler(handlerName,info)就会回调到OC中的callHandler方法。这里你就可以处理很大事情。
上面的代码，大致干的事情就是：
第一 把JS的iOSNative指针指向自己
第二 掉JS端的iOSNative.function就等于掉self.function
第三 实现Protocol实现代理，回调

Swift

Swift大体个OC类似，但是由于Swift不支持宏。所以就没有用JSExportAS这个宏。

同样要定义一个继承<JSExport>的Protocol，并在Web所在的ViewController中实现这个Protocol。

import Foundation
import JavaScriptCore

public typealias callHandlerAlias = (handlerName:String , info:NSDictionary) -> Void

@objc public protocol WebViewJSExportProtocol:JSExport {
    
    var callHandler:callHandlerAlias?{get}
    
}

解释：这里需要注意的是，JSExport协议是OC的。
所以要在protocol前面加一个@objc。
还有就是typealias了一个闭包，然后在protocol中定义了一个闭包。
这点比较特殊，因为闭包和func在swift中都是一等公民，所以可以直接这样声明。

实现Protocol

import JavaScriptCore

@objc class WebViewController: UIViewController,JSToNativeProtocol,UIWebViewDelegate {
    //MARK: 变量
    var content:JSContext?
    var callHandler:callHandlerAlias?
    
    //MARK: 代理
    func webViewDidFinishLoad(webView: UIWebView) {
        self.content = webView.valueForKeyPath("documentView.webView.mainFrame.javaScriptContext") as? JSContext
        self.content?.setObject(webView, forKeyedSubscript: "iOSNative")
    }
    
    //MARK: 生命周期
    init() {
        super.init(nibName: nil, bundle: nil)
        //回调闭包
        self.callHandler = {(handlerName:String , info:NSDictionary) in
        print(handlerName,info)
        }
    }
}

解释:这个也要加@objc这个谨记。然后和OC类似，实现代理，定义回调。

Native -> JS

OC调用Javascript较为简单，只要通过evaluateScript即可

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
    JSContext *content = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    NSString *alertJS = @"alert('hello world')";
    [content evaluateScript: alertJS];
    
}

较为简单 Swift端便不写了。

最后

JS和OC交互这块公司本来是用WebViewJavascriptBridge的，后来要自己写。我就硬着头皮上了，这里是基础的用法。下次写写如何封装，让这个东西更好用。

参考和致谢

http://sntd.github.io/2015/08/22/JavaScript%E4%B8%8EObjective-C%E4%B9%8B%E9%97%B4%E7%9A%84%E9%80%9A%E4%BF%A1/
http://blog.csdn.net/lwjok2007/article/details/47058795
http://nshipster.cn/javascriptcore/
http://blog.csdn.net/lizhongfu2013/article/details/9236357