WebViewJavascriptBridge 源码剖析

IOS

2023-11-19 13:35:37

简介

WebViewJavascriptBridge 是一款用于实现原生端与web端无缝交互的三方库，应用广泛，支持UIWebView、WKWebView（iOS）以及WebView（OSX），原理一致。

工作原理

WebViewJavascriptBridge 的工作原理并不复杂，它通过在原生端和web端分别注入一段JavaScript代码，并在两端建立一个消息通道，实现双向通信。

原生端

在原生端，WebViewJavascriptBridge 会注入一段JavaScript代码，这段代码负责在原生端和web端之间建立消息通道，并提供一些原生端的方法供web端调用。

web端

在web端，WebViewJavascriptBridge 会注入一段JavaScript代码，这段代码负责在web端和原生端之间建立消息通道，并提供一些web端的方法供原生端调用。

消息通道

WebViewJavascriptBridge 在原生端和web端建立的消息通道是一个双向通信通道，原生端和web端都可以通过这个通道发送和接收消息。消息的格式是一个JSON字符串，其中包含了消息类型、消息内容等信息。

使用方法

WebViewJavascriptBridge 的使用方法也很简单，只需要在原生端和web端分别注入相应的JavaScript代码即可。

原生端

WebView webView = findViewById(R.id.webView);
WebViewJavascriptBridge bridge = new WebViewJavascriptBridge(webView);

// 注册原生方法供web端调用
bridge.registerHandler("hello", new ResponseCallback<String>() {
    @Override
    public void onResult(String data) {
        Log.d("WebViewJavascriptBridge", "Received message from web: " + data);
    }
});

// 发送消息给web端
bridge.callHandler("hello", "Hello from native!", new CallBackFunction() {
    @Override
    public void onInvoke(String data) {
        Log.d("WebViewJavascriptBridge", "Received response from web: " + data);
    }
});

web端

var bridge = new WebViewJavascriptBridge();

// 注册web端方法供原生端调用
bridge.registerHandler("hello", function(data) {
    console.log("Received message from native: " + data);
});

// 发送消息给原生端
bridge.callHandler("hello", "Hello from web!", function(data) {
    console.log("Received response from native: " + data);
});

优势

WebViewJavascriptBridge 是一款非常优秀的hybrid APP开发工具，它具有以下几个优势：

简单易用： WebViewJavascriptBridge 的使用方法非常简单，只需要在原生端和web端分别注入相应的JavaScript代码即可。
跨平台： WebViewJavascriptBridge 支持UIWebView、WKWebView（iOS）以及WebView（OSX），可以轻松实现原生端与web端的交互，非常适合开发跨平台的hybrid APP。
开源免费： WebViewJavascriptBridge 是一个开源的免费工具，任何人都可以免费使用和修改。