背景

• h5和native 交互代码冗余 不清晰 多人开发时效率地下

目的

• 为了寻找更搞笑的编程开发方式，节省代码量，以及多人开发的效率
  

过程探索

JavaScriptCore

• 官方解释
  The JavaScriptCore Framework provides the ability to evaluate JavaScript programs from within Swift, Objective-C, and C-based apps. You can use also use JavaScriptCore to insert custom objects to the JavaScript environment.
  JavaScriptCore框架提供了从Swift、Objective-C和基于c的应用程序中评估JavaScript程序的能力。您还可以使用JavaScriptCore将定制对象插入到JavaScript环境中。
  苹果爸爸在iOS7.0以后推出的官方库，目前看起来是适用于UIWebView(官方以不推荐使用)

下面说一下使用方法

关键词： JSContext JSValue JSExport

• JSExport
  继承并申明你需要到protocol - 注入到JS里到function

@objc protocol SwiftJavaScriptProtocol: JSExport {
    func test(_ value: String?)
    // js调用App的功能后 App再调用js函数执行回调
    func callHandler(handleFuncName: String)

    var stringCallback: (@convention(block) (String) -> String)? { get set }
}

申明一个继承于NSObjectt的class, 并实现你的protocol

class SwiftJavaScriptModel: NSObject, SwiftJavaScriptProtocol  {
    weak var jsContext: JSContext? //js 的执行环境，调用js 或者注入js
    var stringCallback: (@convention(block) (String) -> String)? // swift里想要让JS能够调用我们的clourse，一定要用这个关键字

    func test(_ value: String?) {
        print("js call test(_ value: \(value ?? ""))")
    }

    func callHandler(handleFuncName: String) {
        let jsHandlerFunc = self.jsContext?.objectForKeyedSubscript("\(handleFuncName)")
        let dict = ["name": "sean", "age": 18] as [String : Any]
        jsHandlerFunc?.call(withArguments: [dict])
    }

    override init() {
        super.init()
        self.stringCallback = {
            [weak self] value in
            print("SwiftJavaScriptModel stringCallback \(value)")
            return value.appending("this is append string")

        }
    }
}

最后，通过UIWebView的特性，获取JSContext,并将我们的function注入到上下文

extension JSCoreVC: UIWebViewDelegate {
    func webViewDidFinishLoad(_ webView: UIWebView) {
        if let jsContext = webView.value(forKeyPath:"documentView.webView.mainFrame.javaScriptContext") as? JSContext {
            let model = SwiftJavaScriptModel()
            model.jsContext = jsContext
            jsContext.setObject(model, forKeyedSubscript: ("WebViewJavascriptBridge" as NSString)) //注入
            jsContext.evaluateScript(self.htmlContent)
            jsContext.exceptionHandler = {
                [weak self] (context, exception) in
                guard let self = self else { return }
                print("exception：", exception)

            }
        }
    }
}

• WebViewJavascriptBridge 注意，这里注入的名字即是JS调用的名字，JS调用我们的函数和自己的使用方式一样,举例如下

<div class="btn-block" onclick="WebViewJavascriptBridge.test('this is toast')">
    test
</div>
<div class="btn-block" onclick="appStringCallbackFunc('this is toast')">
    stringCallback
</div>
<script type="text/javascript">
    function appStringCallbackFunc(arg) {
        let value = WebViewJavascriptBridge.stringCallback('this is toast')
        document.getElementById('js-content').innerHTML = "App调用js回调函数啦， 返回 ->" + value;
    }
</script>

看起来很方便吧，app -> JS 也很方便

let context = JSContext()
let _ = context?.evaluateScript("var triple = (value) => value + 3") //注入
let returnV = context?.evaluateScript("triple(3)") // 调用
print("__testValueInContext --- returnValue = \(returnV?.toNumber())")
        

WKWebView

• 官方解释
  You can make POST requests with httpBody content in a WKWebView.
  After creating a new WKWebView object using the init(frame:configuration:) method, you need to load the web content. Use the loadHTMLString(:baseURL:) method to begin loading local HTML files or the load(:) method to begin loading web content. Use the stopLoading() method to stop loading, and the isLoading property to find out if a web view is in the process of loading. Set the delegate property to an object conforming to the WKUIDelegate protocol to track the loading of web content. See Listing 1 for an example of creating a WKWebView programmatically.
  你可以在WKWebView中用httpBody内容发出POST请求。
  在使用init(frame:configuration:)方法创建一个新的WKWebView对象之后，您需要加载web内容。使用loadHTMLString(:baseURL:)方法开始加载本地HTML文件，或使用load(:)方法开始加载web内容。使用stopLoading()方法停止加载，使用isLoading属性查明web view是否在加载过程中。将委托属性设置为符合WKUIDelegate协议的对象，以跟踪web内容的加载。清单1给出了以编程方式创建WKWebView的示例。

WKWebView关键词

WKUIDelegate WKNavigationDelegate WKScriptMessageHandler

/*
     实现原理：
     1、JS与iOS约定好xdart协议，用作JS在调用iOS时url的scheme；
     2、JS拿到的url：(xdart://lot_detail?id=123)；
     3、iOS的WKWebView在请求跳转前会调用-webView:decidePolicyForNavigationAction:decisionHandler:方法来确认是否允许跳转；
     4、iOS在此方法内截取xdart协议获取JS传过来的数据，执行内部schema跳转逻辑
     5、通过decisionHandler(.cancel)可以设置不允许此请求跳转 decisionHandler一定要调用
     */
    //! WKWeView在每次加载请求前会调用此方法来确认是否进行请求跳转
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        guard let url = navigationAction.request.url else {return}
        guard let scheme = url.scheme else {return}

        if scheme == "xdart" {
            // THSchemeManager.handleScheme(url.absoluteString)
        }
        decisionHandler(.allow)

    }

WKUIDelegate 基于JS系统的几个内部方法 实现一下方法要调用对应的completionHandler，否则崩溃

func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        // call toast
        completionHandler()
}

func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
        // call alert
        completionHandler(true)
}
func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
        // call input
        completionHandler("this is a message")
}

WKScriptMessageHandler 重点来了，这是苹果爸爸推荐使用的JS交互

let content = WKUserContentController()
content.add(self, name: "artproFunc") //此方法会造成循环引用，注意时机释放
let config = WKWebViewConfiguration()
config.userContentController = content
wkwebV = WKWebView.init(frame: self.view.bounds, configuration: config)

• 这里往content里注入的是JS调用APP的函数
  JS通过window.webkit.messageHandlers.artproFunc.postMessage()给artproFunc发送消息
  我们的解析在此方法里

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name != self.applicationName { return }
        if let body = message.body as? [String: Any],
           let method = body["method"] as? String {
            let aSel = NSSelectorFromString(method)
            if !self.canPerformAction(aSel, withSender: nil) {
                return
            }
            let para = body["parameter"]
            let callback = body["callback"]
        }
}

以我目前的项目为例，我们是将 artproFunc当作了一个通道，所有的function都走message.body分发出来，所以会有switch case 解析 body中的method，然后再进行不同的方法分发。

缺点

• 代码冗余
• 字符串分发，容易出错

• 函数格式各式各样，多人开发，他人不好接手

  
  artpro_userContent.png

WebViewJavascriptBridge

最近研究JS和iOS native交互，偶然发现的库发现github上用的人也不少,感觉还不错的样子，就研究了下使用方法

WebViewJavascriptBridge_star.png

看起来很简单的样子

bridge = WebViewJavascriptBridge.init(webV)
// js call app
bridge.registerHandler("testCallHandler") { [weak self](data, callback) in
    guard let self = self else { return }
    callback?("Response from testCallHandler")
}
// app call js
self.bridge.callHandler("testJavascriptHandler", data: ["foo": "before ready"])

WebViewJavascriptBridge 原理将在下篇文章中剖析
参考文档1