美文网首页
iOS下webView和JS交互

iOS下webView和JS交互

作者: 我只是个仙 | 来源:发表于2020-12-07 21:50 被阅读0次

背景

  • 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

相关文章

网友评论

      本文标题:iOS下webView和JS交互

      本文链接:https://www.haomeiwen.com/subject/mfkxgktx.html