WKJSBridge 0.0.2

WKJSBridge 0.0.2

×

由 Meng 维护。

WKJSBridge 0.0.2

  • 由
  • Meng

WKJSBridge

针对 WKWebView 类型安全 JSBridge，纯 Swift 构建。
一个使用 Swift 实现的，用于 WKWebView 的类型安全 JSBridge。

如何安装

CocoaPods

platform :ios, '10.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'WKJSBridge', '~> 0.0.2'
end

如何使用

可以在 Example/ 下查看具体的 demo

您的本地代码

安装
创建 JSBridge 并注册 webview

import WebKit
import WKJSBridge

let webview = WKWebView(frame: .zero)
let jsbridge = WKJSBridge()

jsbridge.register(webview)

声明模块或处理器
声明一个调用 JS 的模块逻辑和一个处理 JS 逻辑的模块

// your native module
final class PreferenceControl: WKJSModuleType {

    static func makeModule(_ bridge: WKJSBridge) -> PreferenceControl {
        return PreferenceControl()
    }
    
    // tell JS scroll to some area
    func scroll(to area: Area) -> WKJSMessageMeta {
        return self.makeMessage(action: "scrollToArea", params: area)
    }

}

// your js module handler
final class ThemePrefHandler: WKJSHandlerType {

    private weak var hostVC: NSViewController?

    static func makeHandler(_ bridge: WKJSBridge) -> ThemePrefHandler {
        let hostVC = bridge.webview?.window?.contentViewController
        return ThemePrefHandler(hostVC: hostVC)
    }

    init(hostVC: NSViewController?) {
        self.hostVC = hostVC
    }

    // register handle
    func config(with container: WKJSHandleContainer) {
        container.register("getCurrentTheme", for: self.getCurrentTheme)
    }

    // handle JS getCurrentTheme action and resopons
    func getCurrentTheme(_ response: @escaping WKJSResponse) {
        let currentTheme = hostVC?.view.effectiveAppearance.theme ?? .aqua
        response(currentTheme.rawValue.encodeWKJSParams, nil)
    }

}

注册模块 & 处理器
将声明的模块注册到 bridge

jsbridge.register(PreferenceControl.self)
jsbridge.register(ThemePrefHandler.self)

本地调用 JS
在适当的时机调用模块的方法

jsbridge.postFrom(PreferenceControl.self) { $0.scroll(to: .about) }

您的 JS 代码

声明处理器
JS 声明 native 模块的处理逻辑，类似于 NodeJS 的 Event，支持注册多次

window.wkjsbridge.on("PreferenceControl", "scrollToArea", function() {
    // handle action
});

JS 调用本地
JS 调用 native 的 handler 模块

window.wkjsbridge.postMessageToNative("ThemePrefHandler", "getCurrentTheme", function(message) {
    console.log(message.code);
    console.log(message.message);
    console.log(message.params);
});

还有什么？

  • 参数：参数类型安全，调用参数符合Codable协议即可，响应参数使用encodeWKJSParams
  • 响应：支持双向回调
  • 等待 JSReady：支持 JSReady 逻辑，JS 逻辑准备完成后可以通过window.wkjsbridge.notiJSReady();通知 native
  • 类型安全：类型安全
  • ...

待办事项

  • 支持 native 与 JS 模块及方法实现双向查询
  • 默认处理器模块支持更多的 JS 生命周期逻辑
  • ...