1.Native与H5交互的常用交互机制,主流选择是jsbridge
2.jsbridge是什么?
JSBridge 是 Android 官方 WebView 提供的 addJavascriptInterface() 能力 + 项目方(或三方库)封装的桥梁通信协议。
- 底层机制由 Android 官方 WebView 提供
核心类/方法:
webView.addJavascriptInterface(JavaObject, “bridgeName”)
这段代码:
• 把你提供的 JavaObject 中所有用 @JavascriptInterface 注解的方法暴露给 JS。
• JS 页面中就能通过 window.bridgeName.methodName(…) 调用这些方法。
这是 Android WebView 官方支持的通信桥 ✅,也是所有现代 JSBridge 的底层基础。
3.底层是如何实现通信的
简而言之:Android WebView 底层通过 JNI 把 Java 对象转成一个 JS “代理对象”,注入到 JS 引擎(V8 或 JSC)中。
这个对象的方法就可以被JS调用到啦,但这个方法其实只是JS 层的壳子,调用时会通过 JNI 反射调用 Java 中对应的真实方法。 这样就实现了通信
详细的展开:
JS 与 Android Native 的通信,本质是通过 WebView 内部暴露的桥接接口机制,依托于两个核心方式:
1.addJavascriptInterface() —— JS 调 Native 的注册通道,注册桥
2.evaluateJavascript() —— Native 回调 JS 触发js的回调
这两个方法是 Android WebView 的核心桥梁机制,是一切 JSBridge 封装的“底层物理管道”。
这两个“物理通道”原理详解
- addJavascriptInterface(Object obj, String name)
• 由 Android 官方提供
• 会将 obj 上所有标注了 @JavascriptInterface 的方法暴露给 JS
• 在 JS 中,变成 window.name.method(…)
工作原理
• WebView 内部将这个 Java 对象和方法注册进一个 JS 引擎(通常是 V8 或 WebKit 引擎,这里的v8不是node.js的v8,而是chromium,这是谷歌提供的开源浏览器内核)
• 当你在 JS 调用 window.name.method(…) 时,其实是通过 JS 引擎“代理”调用了 Java 层的接口
• WebView 使用了 JNI(Java Native Interface)调用到 JVM 中的 Java 方法
数据是如何传的?
• JS 调用 window.bridgeName.methodName(jsonString)
• WebView 将这个字符串参数通过 JNI 送到 Java 中对应方法
• Java 方法返回值也通过 JNI 返回给 JS(但注意,不能返回复杂对象,通常是 void)
- evaluateJavascript(String script, ValueCallback callback)
• 也是 WebView 提供的方法
• Native 向当前页面注入 JS 脚本,并可拿到其执行结果(异步)
工作原理
• WebView 内部将 JS 代码注入到 JS 引擎中执行
• 执行结果以字符串形式,通过 WebView 的回调返回给 Java 层
✅ 数据怎么传的?
• Native 构造一个 JS 字符串,如:
webView.evaluateJavascript(“window.JSBridge.onCallback({ callbackId: ‘123’, data: ‘ok’ })”) { result -> … }
• JS 引擎执行这段代码
• JS 侧触发 window.JSBridge.onCallback(…) 函数
• 如果需要,还可以返回执行结果字符串(通常我们只注入,不等返回)