混合开发中如何实现 JavaScript 调用原生功能？

题目

混合开发中如何实现 JavaScript 调用原生功能？

信息

• 类型：问答
• 难度：⭐

考点

混合开发原理, WebView与JavaScript交互, 原生桥接

快速回答

在混合开发中，通过 WebView 的桥接机制实现 JavaScript 调用原生功能：

• Android：使用 @JavascriptInterface 注解暴露 Java 方法
• iOS：通过 WKScriptMessageHandler 协议处理消息
• 通用步骤：
  1. 原生端注册桥接对象/方法
  2. WebView 加载时注入 JavaScript 接口
  3. JavaScript 调用约定方法触发原生功能

原理说明

混合开发的核心是 WebView 作为容器加载 Web 内容，通过桥接机制建立 JavaScript 与原生代码的双向通信通道。JavaScript 调用原生功能的本质是 WebView 拦截特定格式的请求或消息，将其转发给原生模块处理。

代码示例

Android 实现

// 1. 创建桥接类
public class JsBridge {
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
    }
}

// 2. 在 WebView 中注册
WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsBridge(), "AndroidBridge");

// 3. JavaScript 调用
// <button onclick="window.AndroidBridge.showToast('Hello Android!')">点击</button>

iOS 实现 (Swift)

// 1. 遵守 WKScriptMessageHandler 协议
class ViewController: UIViewController, WKScriptMessageHandler {
    func userContentController(_ controller: WKUserContentController, 
                               didReceive message: WKScriptMessage) {
        if message.name == "iOSBridge", 
           let dict = message.body as? [String: String] {
            showToast(dict["message"]!)
        }
    }

    func showToast(_ text: String) {
        // 原生 Toast 实现
    }
}

// 2. 配置 WebView
let config = WKWebViewConfiguration()
config.userContentController.add(self, name: "iOSBridge")
let webView = WKWebView(frame: .zero, configuration: config)

// 3. JavaScript 调用
// <button onclick="window.webkit.messageHandlers.iOSBridge.postMessage({message:'Hello iOS!'})">点击</button>

最佳实践

• 安全校验：验证 JavaScript 调用来源，防止恶意注入
• 参数检查：原生端校验参数类型和范围
• 异步通信：耗时操作使用回调机制返回结果
• 命名规范：统一桥接方法命名规则（如 bridge 前缀）

常见错误

• 忘记开启 JavaScript：未设置 setJavaScriptEnabled(true)（Android）
• 主线程问题：在非 UI 线程更新界面导致崩溃
• 内存泄漏：未及时移除消息处理器（iOS 的 removeScriptMessageHandler）
• 跨平台差异：Android/iOS 桥接方法命名不一致

扩展知识

• JSBridge 库：简化开发的封装库（如 DSBridge、WebViewJavascriptBridge）
• 回调机制：通过 callbackId 实现异步操作结果返回
• 混合框架：Cordova/Ionic 底层使用类似的桥接原理
• 安全增强：采用 HTTPS 加载页面，避免中间人攻击