shudao-main/Native2H5.md

JSBridge实现Native和H5方法互调的原理是什么？ 浏览259发布于2025-05-28 13:51广东 JSBridge 是实现 Native（iOS/Android）与 H5 之间方法互调的核心技术，其原理基于双向通信机制。下面从通信原理、实现方式和关键细节三个方面进行详细解析：

一、核心通信原理 JSBridge 的核心是构建 Native 与 JavaScript 的双向数据通道，主要通过以下两种方式实现：

1. JavaScript 调用 Native 原理：利用 WebView 提供的接口，让 JavaScript 代码能够触发 Native 方法。 实现方式： URL Scheme 拦截：JavaScript 通过修改 URL（如 jsbridge://method?param=123），Native 监听 WebView 的 URL 变化并解析参数。 注入 API：Native 向 WebView 的 JavaScript 环境注入对象或方法（如 window.bridge.callNative），JavaScript 直接调用。 2. Native 调用 JavaScript 原理：Native 代码通过 WebView 提供的接口执行 JavaScript 代码。 实现方式： WebView 内置方法： iOS：WKWebView.evaluateJavaScript(_:completionHandler:) Android：webView.loadUrl("javascript:yourFunction()") 消息传递：Native 发送消息到 H5，H5 通过监听事件接收。 二、具体实现方式 1. URL Scheme 拦截（通用方案） JavaScript 端： javascript

// 通过修改 URL 触发 Native 方法 function callNative(method, params) { const url = jsbridge://${method}?${JSON.stringify(params)}; window.location.href = url; } Native 端： iOS（Swift）： swift

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {

if let url = navigationAction.request.url, url.scheme == "jsbridge" {
    // 解析 method 和 params
    handleJSBridge(url)
    decisionHandler(.cancel) // 拦截 URL
    return
}
decisionHandler(.allow)

} Android（Java）： java

webView.setWebViewClient(new WebViewClient() {

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith("jsbridge://")) {
        // 解析 method 和 params
        handleJSBridge(url);
        return true; // 拦截 URL
    }
    return super.shouldOverrideUrlLoading(view, url);
}

}); 2. 注入 API（高性能方案） iOS（WKWebView）： swift

// 注入 bridge 对象到 JavaScript 环境 let config = WKWebViewConfiguration() let controller = WKUserContentController() controller.add(self, name: "bridge") // 实现 WKScriptMessageHandler 协议 config.userContentController = controller Android： java

// 注入 Java 对象到 JavaScript class JsInterface {

@JavascriptInterface
public void callNative(String method, String params) {
    // 处理来自 JavaScript 的调用
}

} webView.addJavascriptInterface(new JsInterface(), "bridge"); JavaScript 调用： javascript

// 直接调用注入的 API window.bridge.callNative("login", { username: "test" }); 3. 消息队列机制（优化方案） 为解决同步调用和复杂参数传递问题，通常引入消息队列：

  JavaScript 端： javascript

const messageQueue = []; function callNative(method, params) { messageQueue.push({ method, params }); // 通知 Native 有新消息 window.webkit.messageHandlers.bridge.postMessage("newMessage"); } Native 端： swift

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

if message.name == "bridge" {
    // 从消息队列获取消息并处理
    processMessageQueue()
}

} 三、关键技术细节 协议设计：

定义统一的消息格式（如 JSON-RPC）： json

{ "id": 1, "method": "login", "params": { "username": "test" }, "callbackId": "cb_123" } 异步回调处理：

JavaScript 注册回调函数并生成唯一 ID，传递给 Native。 Native 执行完成后，通过 ID 调用对应的 JavaScript 回调： javascript

const callbacks = {}; function callNativeWithCallback(method, params, callback) { const callbackId = cb_${Date.now()}; callbacks[callbackId] = callback; window.bridge.callNative(method, { ...params, callbackId }); } 安全机制：

白名单校验：限制允许调用的方法和域名。 参数过滤：防止 XSS 攻击和恶意代码注入。 签名验证：对敏感操作进行签名校验。 四、常见应用场景 混合开发：H5 页面调用 Native 摄像头、定位等功能。 数据同步：Native 实时推送数据到 H5 页面。 支付流程：H5 调用 Native 支付 SDK 完成支付。 性能优化：复杂计算交给 Native 处理，避免阻塞 H5。 五、主流 JSBridge 库 iOS：WKWebViewJavascriptBridge、WebViewJavascriptBridge Android：DSBridge-Android、JavascriptInterface 跨平台：React Native、Flutter（通过 Platform Channel） 六、总结 JSBridge 的核心在于利用 WebView 提供的接口，构建双向通信通道，并通过消息协议和队列机制实现复杂交互。其实现方式各有优劣，实际开发中需根据性能要求、兼容性和安全需求选择合适的方案。