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），僅供參考