Android Smart WebView JS Bridge深度解析如何实现JavaScript与原生Android的双向通信【免费下载链接】Android-SmartWebViewA simple use webview integrated w/ native features plugin support for building hybrid apps.项目地址: https://gitcode.com/gh_mirrors/an/Android-SmartWebViewAndroid Smart WebView 是一款内置 JS Bridge 双向通信机制的混合应用开发框架。它通过JSInterfacePlugin插件让 JavaScript 代码调用原生 Android 能力剪贴板、定位、分享、生物识别等同时支持原生侧向网页注入事件回调真正实现 JavaScript 与原生 Android 的双向通信。本文带你完整拆解这套 JS Bridge 的实现原理。一、JavaScript 调用原生一行 addJavascriptInterface 完成注入JS Bridge 的起点只有一行代码。在 JSInterfacePlugin.java 的initialize方法中插件把自己的接口类挂到 WebView 上webView.addJavascriptInterface(new JSBridgeInterface(), JSBridge);注册后网页里就能通过window.JSBridge访问所有标注了JavascriptInterface注解的原生方法。以获取设备信息为例见 JSInterfacePlugin.java// 网页端一行代码拿到厂商、机型、系统版本 const info JSON.parse(window.JSBridge.getDeviceInfo());原生侧返回 JSON 字符串JS 侧解析即用——数据跨语言传输零格式转换成本。同样的模式在 MainActivity.java 中还注册了AndroidInterface供主题切换等全局功能使用。关键点只有标注JavascriptInterface的方法才会暴露给 JS这是 Android 官方的安全门槛API 17未标注的方法网页端完全不可见。二、原生调用 JavaScriptevaluateJavascript 事件回调通信的另一半是原生主动喊网页。Android 提供了evaluateJavascript在页面中执行任意 JSSmart WebView 把它封装进插件接口 PluginInterface.java让每个插件都能直接触发 JS。更优雅的是事件回调系统实现在 JSInterfacePlugin.java页面加载完成onPageFinished时原生自动向网页注入一段轻量 JS注册出window.JSBridge.registerCallback与triggerCallback两个方法JS 侧用registerCallback(eventName, callback)挂起监听器原生侧随时调用triggerJsCallback(eventName, data)通过evaluateJavascript触发对应回调见 JSInterfacePlugin.java。这套注册监听 按名触发的设计让异步的原生操作定位结果、权限申请、网络变化能干净利落地把数据送回转 JS 世界而不是靠轮询。三、双向通信实战深色模式主题同步以项目内置的主题切换为例看一次完整的双向闭环demo/script.jsJS → 原生用户点击深色模式按钮JS 调用window.AndroidInterface.setNativeTheme(dark)原生处理MainActivity.java 中的setNativeTheme收到字符串用runOnUiThread切到主线程通过AppCompatDelegate切换夜间模式原生 → JS系统配置变化触发onConfigurationChanged原生再反向执行 JS 把新主题同步给页面MainActivity.java网页 UI 与原生 UI 始终保持一致。 一次点击两个方向的通信全部打通——这就是 JS Bridge 最典型的应用场景。四、插件化的 JS Bridge每个功能一个 window 对象Smart WebView 把 JS Bridge 做成了插件体系 。PluginManager.java 负责统一注册与初始化每个插件都自带一个专属的 JS 对象网页端开箱即用JS 对象原生接口能力典型调用window.JSBridgeJSBridge设备信息 / 应用信息getDeviceInfo()window.AndroidInterfaceAndroidInterface主题同步setNativeTheme(dark)window.ClipboardClipboardInterface剪贴板读写copy(text)/paste(cb)window.ShareShareInterface系统分享面板file(uri, type, title)window.SWVLocationLocationInterfaceGPS 定位异步回调getCurrentPosition(cb)window.GeolocationCacheGeolocationCacheInterface定位缓存兜底getLastKnown(cb)window.NetworkInfoNetworkInfoInterface网络状态监听getStatus(cb)window.ToastToastInterface原生轻提示show(msg)所有插件源码集中在 app/src/main/java/mgks/os/swv/plugins/ 目录。插件的启用开关在配置文件 swv.properties 的plugins.enabled列表中——不需要某项能力把它从列表里去掉即可实现按需加载、最小暴露面。以剪贴板为例网页端的调用简洁到只有一行见 script.jswindow.Clipboard.copy(text); // JS 调原生 window.Clipboard.paste(function(t) {}); // 原生异步回调 JS五、写好 JS Bridge 的三个关键实践✅线程安全原生回调可能发生在后台线程涉及 UI 操作时务必runOnUiThread参考setNativeTheme的写法✅异步用回调、同步返回 JSON定位、权限等耗时操作一律走回调函数同步查询则返回 JSON 字符串跨语言传输稳定可靠✅暴露面最小化JavascriptInterface只标注真正需要的只读/无副作用方法配合swv.properties的插件开关把网页能触碰到的原生能力压到最小。六、动手实践5 分钟跑通 JS Bridgegit clone https://gitcode.com/gh_mirrors/an/Android-SmartWebView用 Android Studio 打开项目后重点阅读以下文件即可摸清整条通信链路桥接核心JSInterfacePlugin.java注册中心PluginManager.javaJS 侧调用示例script.js编写你自己的插件creating-plugins.md想扩展自己的能力按 creating-plugins.md 的指引实现PluginInterface在static块中自注册再在swv.properties里启用即可——新的 JS Bridge 通道也就此诞生。总结Android Smart WebView 的 JS Bridge 方案可以归纳为三板斧addJavascriptInterface打通 JS→原生、evaluateJavascript 命名事件回调打通原生→JS、插件管理器统一注册与按需启用。它没有引入额外的通信框架而是把 Android WebView 的原生能力组织得足够清晰、安全且易扩展是构建混合应用的务实之选。【免费下载链接】Android-SmartWebViewA simple use webview integrated w/ native features plugin support for building hybrid apps.项目地址: https://gitcode.com/gh_mirrors/an/Android-SmartWebView创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考