前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >MessageHandler 高级用法一:封装MessageHandler

MessageHandler 高级用法一:封装MessageHandler

作者头像
onety码生
发布2018-11-21 10:33:42
2.7K0
发布2018-11-21 10:33:42
举报
文章被收录于专栏:码生

在iOS中 JS 和原生APP交互有许多种方法

WebViewJavascriptBridge 是我用的比较多的一个库,但是 WebViewJavascriptBridge 中在使用时最大的一个缺点就是 WebViewJavascriptBridge 使用了一个中间代理

setWebViewDelegate

必须将 UIWebView、WKWebView 的代理设置为 WebViewJavascriptBridge 内部的处理类

这就造成了对原始的调用方法有一定的影响

WKWebView

iOS 8 之后,无疑没有理由不使用 WKWebView

在 JS 端只需要 window.webkit.messageHandler.<method>.postMessage(<body>)即可

在APP端通过 configuration.userContentController.add(_scriptMessageHandler:WKScriptMessageHandler, name:String) 并且实现协议方法即可

在 APP 端只需要 evaluateJavaScript 既可以调用 JS 方法

通过上面三种方法便可以实现大多数的 JS 原生交互

WKUserScript

通过configuration.userContentController.addUserScript 便可以添加一个 WKUserScript 对象,从而可以插入需要额外加入的 JS 代码

WKScriptMessageHandler

至于 messageHandler 的具体的使用用法,这里便不做详细的说明

下面是对 MessageHandler 的一个封装,所谓的封装就是懒人的一个高尚的借口。 说一下大致思路:

创建一个类 WKJSHandler 此类的初始化方法中会对 webView 有一个弱引用,只有拥有了 webView 才能做任何事情

我们无论是使用 regist 或者 call 和 JS 相关的方法,一般都是采用 block 的方法 block 一般最直接的表现就是异步

所以我们需要 WKJSHandler 中存在一个属性 data 对block 进行持有,从而可以实现异步回调 所以在 WKScriptMessageHandler 协议方法执行的时候,根据name 取出来对应的block进行回调

代码语言:javascript
复制
import UIKit

import WebKit

open class WKJSHandler: NSObject, WKScriptMessageHandler {
    
    public typealias Handler = (Any?) -> Void
    
    open weak var webView: WKWebView?
    
    public init(webView: WKWebView) {
        
        super.init()
        
        self.webView = webView
        
        let bundle = Bundle.init(for: WKJSHandler.classForCoder())
        
        guard let path = bundle.path(forResource: "injectjs", ofType: nil) else {
            return
        }
        
        guard let content = try? String.init(contentsOfFile: path) else {
            return
        }
        
        self.inject(javascript: content, begin: true, main: true)
    }
    
    open var data = [String: Handler]()
    
    /// regist a new hander for name
    ///
    /// - Parameters:
    ///   - name: handler name
    ///   - handler: callBack
    open func regist(name: String, handler: @escaping Handler) {
        
        self.data[name] = handler
        
        self.webView?.configuration.userContentController.removeScriptMessageHandler(forName: name)
        
        self.webView?.configuration.userContentController.add(self, name: name)
    }
    
    
    /// remove message handler
    ///
    /// - Parameter name: handler name
    open func remove(name: String) {
        
        self.data[name] = nil
        
        self.webView?.configuration.userContentController.removeScriptMessageHandler(forName: name)
    }
    
    
    /// evaluateJavaScript a javascript
    ///
    /// - Parameters:
    ///   - javascript: javascript code
    ///   - callBack: result of evalueteJavaScript
    open func runJS(javascript: String, result: ((Any?, Error?) -> Void)?) {
        
        self.webView?.evaluateJavaScript(javascript, completionHandler: result)
    }
    
    
    /// inject javascript code
    ///
    /// - Parameters:
    ///   - javascript: javascript code
    ///   - begin: When the script should be injected.
    ///   - main: forMainFrameOnly Whether the script should be injected into all frames or just the main frame.
    open func inject(javascript: String, begin: Bool, main: Bool) {
        
        let newScript = WKUserScript.init(source: javascript, injectionTime: begin ? .atDocumentStart : .atDocumentEnd, forMainFrameOnly: main)
        
        self.webView?.configuration.userContentController.addUserScript(newScript)
    }

    
    /// delegate method
    public func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        
        let name = message.name
        
        guard let handler = self.data[name] else {
            return
        }
        
        handler(message.body)
    }
    
    deinit {
        for t in self.data {
            self.remove(name: t.key)
        }
        self.data = [String: Handler]()
        self.webView?.configuration.userContentController.removeAllUserScripts()
    }

有了此层的封装,在使用的时候就会显得非常的方便

代码语言:javascript
复制
 self.webView = WKWebView.init(frame: self.view.bounds)
        
        self.jsHandler = WKJSHandler.init(webView: self.webView)
 /// 注册一个事件,当
        self.jsHandler.regist(name: "kkalert") { [weak self] (data) in
            
            if let title = data as? String {
                self?.alert(title: title)
            }
        }

上面的源码可以在 https://github.com/TieShanWang/WKJSHandler 上面找到 当然也可以直接使用 cocoapod 使用 pod 'WKJSHandler' 安装

当然现在实现了 JS 和 Native 之间的直接方法的调用,并且实现了参数的传递 但是我们并不会满足于此,因为在实际的使用中,我们多数时候需要从Native 中获取一些数据,这个时候使用 postMessage 的方法,便不能够满足我们的需求了 通过 postMessage 只能够调用APP的一个方法,并且传参,没有办法直接回调 JS。

同样在我们调用 JS 方法后也希望 JS 在处理完毕之后会给我们一个回调

我们的需求是 “回调“

在下一章 将会解决一下回调的问题

MessageHandler 高级用法二:原生调用JS 实现回调

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.07.31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • WKWebView
  • WKUserScript
  • WKScriptMessageHandler
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档