現(xiàn)JavaScript與原生Android的雙向通信)
Android Smart WebView JS Bridge深度解析如何實(shí)現(xiàn)JavaScript與原生Android的雙向通信【免費(fèi)下載鏈接】Android-SmartWebViewA simple use webview integrated w/ native features plugin support for building hybrid apps.項(xiàng)目地址: https://gitcode.com/gh_mirrors/an/Android-SmartWebViewAndroid Smart WebView 是一款內(nèi)置 JS Bridge 雙向通信機(jī)制的混合應(yīng)用開(kāi)發(fā)框架。它通過(guò)JSInterfacePlugin插件讓 JavaScript 代碼調(diào)用原生 Android 能力剪貼板、定位、分享、生物識(shí)別等同時(shí)支持原生側(cè)向網(wǎng)頁(yè)注入事件回調(diào)真正實(shí)現(xiàn) JavaScript 與原生 Android 的雙向通信。本文帶你完整拆解這套 JS Bridge 的實(shí)現(xiàn)原理。一、JavaScript 調(diào)用原生一行 addJavascriptInterface 完成注入JS Bridge 的起點(diǎn)只有一行代碼。在 JSInterfacePlugin.java 的initialize方法中插件把自己的接口類掛到 WebView 上webView.addJavascriptInterface(new JSBridgeInterface(), JSBridge);注冊(cè)后網(wǎng)頁(yè)里就能通過(guò)window.JSBridge訪問(wèn)所有標(biāo)注了JavascriptInterface注解的原生方法。以獲取設(shè)備信息為例見(jiàn) JSInterfacePlugin.java// 網(wǎng)頁(yè)端一行代碼拿到廠商、機(jī)型、系統(tǒng)版本 const info JSON.parse(window.JSBridge.getDeviceInfo());原生側(cè)返回 JSON 字符串JS 側(cè)解析即用——數(shù)據(jù)跨語(yǔ)言傳輸零格式轉(zhuǎn)換成本。同樣的模式在 MainActivity.java 中還注冊(cè)了AndroidInterface供主題切換等全局功能使用。關(guān)鍵點(diǎn)只有標(biāo)注JavascriptInterface的方法才會(huì)暴露給 JS這是 Android 官方的安全門檻API 17未標(biāo)注的方法網(wǎng)頁(yè)端完全不可見(jiàn)。二、原生調(diào)用 JavaScriptevaluateJavascript 事件回調(diào)通信的另一半是原生主動(dòng)喊網(wǎng)頁(yè)。Android 提供了evaluateJavascript在頁(yè)面中執(zhí)行任意 JSSmart WebView 把它封裝進(jìn)插件接口 PluginInterface.java讓每個(gè)插件都能直接觸發(fā) JS。更優(yōu)雅的是事件回調(diào)系統(tǒng)實(shí)現(xiàn)在 JSInterfacePlugin.java頁(yè)面加載完成onPageFinished時(shí)原生自動(dòng)向網(wǎng)頁(yè)注入一段輕量 JS注冊(cè)出window.JSBridge.registerCallback與triggerCallback兩個(gè)方法JS 側(cè)用registerCallback(eventName, callback)掛起監(jiān)聽(tīng)器原生側(cè)隨時(shí)調(diào)用triggerJsCallback(eventName, data)通過(guò)evaluateJavascript觸發(fā)對(duì)應(yīng)回調(diào)見(jiàn) JSInterfacePlugin.java。這套注冊(cè)監(jiān)聽(tīng) 按名觸發(fā)的設(shè)計(jì)讓異步的原生操作定位結(jié)果、權(quán)限申請(qǐng)、網(wǎng)絡(luò)變化能干凈利落地把數(shù)據(jù)送回轉(zhuǎn) JS 世界而不是靠輪詢。三、雙向通信實(shí)戰(zhàn)深色模式主題同步以項(xiàng)目?jī)?nèi)置的主題切換為例看一次完整的雙向閉環(huán)demo/script.jsJS → 原生用戶點(diǎn)擊深色模式按鈕JS 調(diào)用window.AndroidInterface.setNativeTheme(dark)原生處理MainActivity.java 中的setNativeTheme收到字符串用runOnUiThread切到主線程通過(guò)AppCompatDelegate切換夜間模式原生 → JS系統(tǒng)配置變化觸發(fā)onConfigurationChanged原生再反向執(zhí)行 JS 把新主題同步給頁(yè)面MainActivity.java網(wǎng)頁(yè) UI 與原生 UI 始終保持一致。 一次點(diǎn)擊兩個(gè)方向的通信全部打通——這就是 JS Bridge 最典型的應(yīng)用場(chǎng)景。四、插件化的 JS Bridge每個(gè)功能一個(gè) window 對(duì)象Smart WebView 把 JS Bridge 做成了插件體系 。PluginManager.java 負(fù)責(zé)統(tǒng)一注冊(cè)與初始化每個(gè)插件都自帶一個(gè)專屬的 JS 對(duì)象網(wǎng)頁(yè)端開(kāi)箱即用JS 對(duì)象原生接口能力典型調(diào)用window.JSBridgeJSBridge設(shè)備信息 / 應(yīng)用信息getDeviceInfo()window.AndroidInterfaceAndroidInterface主題同步setNativeTheme(dark)window.ClipboardClipboardInterface剪貼板讀寫copy(text)/paste(cb)window.ShareShareInterface系統(tǒng)分享面板file(uri, type, title)window.SWVLocationLocationInterfaceGPS 定位異步回調(diào)getCurrentPosition(cb)window.GeolocationCacheGeolocationCacheInterface定位緩存兜底getLastKnown(cb)window.NetworkInfoNetworkInfoInterface網(wǎng)絡(luò)狀態(tài)監(jiān)聽(tīng)getStatus(cb)window.ToastToastInterface原生輕提示show(msg)所有插件源碼集中在 app/src/main/java/mgks/os/swv/plugins/ 目錄。插件的啟用開(kāi)關(guān)在配置文件 swv.properties 的plugins.enabled列表中——不需要某項(xiàng)能力把它從列表里去掉即可實(shí)現(xiàn)按需加載、最小暴露面。以剪貼板為例網(wǎng)頁(yè)端的調(diào)用簡(jiǎn)潔到只有一行見(jiàn) script.jswindow.Clipboard.copy(text); // JS 調(diào)原生 window.Clipboard.paste(function(t) {}); // 原生異步回調(diào) JS五、寫好 JS Bridge 的三個(gè)關(guān)鍵實(shí)踐?線程安全原生回調(diào)可能發(fā)生在后臺(tái)線程涉及 UI 操作時(shí)務(wù)必runOnUiThread參考setNativeTheme的寫法?異步用回調(diào)、同步返回 JSON定位、權(quán)限等耗時(shí)操作一律走回調(diào)函數(shù)同步查詢則返回 JSON 字符串跨語(yǔ)言傳輸穩(wěn)定可靠?暴露面最小化JavascriptInterface只標(biāo)注真正需要的只讀/無(wú)副作用方法配合swv.properties的插件開(kāi)關(guān)把網(wǎng)頁(yè)能觸碰到的原生能力壓到最小。六、動(dòng)手實(shí)踐5 分鐘跑通 JS Bridgegit clone https://gitcode.com/gh_mirrors/an/Android-SmartWebView用 Android Studio 打開(kāi)項(xiàng)目后重點(diǎn)閱讀以下文件即可摸清整條通信鏈路橋接核心JSInterfacePlugin.java注冊(cè)中心PluginManager.javaJS 側(cè)調(diào)用示例script.js編寫你自己的插件creating-plugins.md想擴(kuò)展自己的能力按 creating-plugins.md 的指引實(shí)現(xiàn)PluginInterface在static塊中自注冊(cè)再在swv.properties里啟用即可——新的 JS Bridge 通道也就此誕生?？偨Y(jié)Android Smart WebView 的 JS Bridge 方案可以歸納為三板斧addJavascriptInterface打通 JS→原生、evaluateJavascript 命名事件回調(diào)打通原生→JS、插件管理器統(tǒng)一注冊(cè)與按需啟用。它沒(méi)有引入額外的通信框架而是把 Android WebView 的原生能力組織得足夠清晰、安全且易擴(kuò)展是構(gòu)建混合應(yīng)用的務(wù)實(shí)之選?！久赓M(fèi)下載鏈接】Android-SmartWebViewA simple use webview integrated w/ native features plugin support for building hybrid apps.項(xiàng)目地址: https://gitcode.com/gh_mirrors/an/Android-SmartWebView創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Android Smart WebView JS Bridge深度解析：如何實(shí)現(xiàn)JavaScript與原生Android的雙向通信
Android Smart WebView JS Bridge深度解析如何實(shí)現(xiàn)JavaScript與原生Android的雙向通信【免費(fèi)下載鏈接】Android-SmartWebViewA simple use webview integrated w/ native features plugin support for building hybrid apps.項(xiàng)目地址: https://gitcode.com/gh_mirrors/an/Android-SmartWebViewAndroid Smart WebView 是一款內(nèi)置 JS Bridge 雙向通信機(jī)制的混合應(yīng)用開(kāi)發(fā)框架。它通過(guò)JSInterfacePlugin插件讓 JavaScript 代碼調(diào)用原生 Android 能力剪貼板、定位、分享、生物識(shí)別等同時(shí)支持原生側(cè)向網(wǎng)頁(yè)注入事件回調(diào)真正實(shí)現(xiàn) JavaScript 與原生 Android 的雙向通信。本文帶你完整拆解這套 JS Bridge 的實(shí)現(xiàn)原理。一、JavaScript 調(diào)用原生一行 addJavascriptInterface 完成注入JS Bridge 的起點(diǎn)只有一行代碼。在 JSInterfacePlugin.java 的initialize方法中插件把自己的接口類掛到 WebView 上webView.addJavascriptInterface(new JSBridgeInterface(), JSBridge);注冊(cè)后網(wǎng)頁(yè)里就能通過(guò)window.JSBridge訪問(wèn)所有標(biāo)注了JavascriptInterface注解的原生方法。以獲取設(shè)備信息為例見(jiàn) JSInterfacePlugin.java// 網(wǎng)頁(yè)端一行代碼拿到廠商、機(jī)型、系統(tǒng)版本 const info JSON.parse(window.JSBridge.getDeviceInfo());原生側(cè)返回 JSON 字符串JS 側(cè)解析即用——數(shù)據(jù)跨語(yǔ)言傳輸零格式轉(zhuǎn)換成本。同樣的模式在 MainActivity.java 中還注冊(cè)了AndroidInterface供主題切換等全局功能使用。關(guān)鍵點(diǎn)只有標(biāo)注JavascriptInterface的方法才會(huì)暴露給 JS這是 Android 官方的安全門檻API 17未標(biāo)注的方法網(wǎng)頁(yè)端完全不可見(jiàn)。二、原生調(diào)用 JavaScriptevaluateJavascript 事件回調(diào)通信的另一半是原生主動(dòng)喊網(wǎng)頁(yè)。Android 提供了evaluateJavascript在頁(yè)面中執(zhí)行任意 JSSmart WebView 把它封裝進(jìn)插件接口 PluginInterface.java讓每個(gè)插件都能直接觸發(fā) JS。更優(yōu)雅的是事件回調(diào)系統(tǒng)實(shí)現(xiàn)在 JSInterfacePlugin.java頁(yè)面加載完成onPageFinished時(shí)原生自動(dòng)向網(wǎng)頁(yè)注入一段輕量 JS注冊(cè)出window.JSBridge.registerCallback與triggerCallback兩個(gè)方法JS 側(cè)用registerCallback(eventName, callback)掛起監(jiān)聽(tīng)器原生側(cè)隨時(shí)調(diào)用triggerJsCallback(eventName, data)通過(guò)evaluateJavascript觸發(fā)對(duì)應(yīng)回調(diào)見(jiàn) JSInterfacePlugin.java。這套注冊(cè)監(jiān)聽(tīng) 按名觸發(fā)的設(shè)計(jì)讓異步的原生操作定位結(jié)果、權(quán)限申請(qǐng)、網(wǎng)絡(luò)變化能干凈利落地把數(shù)據(jù)送回轉(zhuǎn) JS 世界而不是靠輪詢。三、雙向通信實(shí)戰(zhàn)深色模式主題同步以項(xiàng)目?jī)?nèi)置的主題切換為例看一次完整的雙向閉環(huán)demo/script.jsJS → 原生用戶點(diǎn)擊深色模式按鈕JS 調(diào)用window.AndroidInterface.setNativeTheme(dark)原生處理MainActivity.java 中的setNativeTheme收到字符串用runOnUiThread切到主線程通過(guò)AppCompatDelegate切換夜間模式原生 → JS系統(tǒng)配置變化觸發(fā)onConfigurationChanged原生再反向執(zhí)行 JS 把新主題同步給頁(yè)面MainActivity.java網(wǎng)頁(yè) UI 與原生 UI 始終保持一致。 一次點(diǎn)擊兩個(gè)方向的通信全部打通——這就是 JS Bridge 最典型的應(yīng)用場(chǎng)景。四、插件化的 JS Bridge每個(gè)功能一個(gè) window 對(duì)象Smart WebView 把 JS Bridge 做成了插件體系 。PluginManager.java 負(fù)責(zé)統(tǒng)一注冊(cè)與初始化每個(gè)插件都自帶一個(gè)專屬的 JS 對(duì)象網(wǎng)頁(yè)端開(kāi)箱即用JS 對(duì)象原生接口能力典型調(diào)用window.JSBridgeJSBridge設(shè)備信息 / 應(yīng)用信息getDeviceInfo()window.AndroidInterfaceAndroidInterface主題同步setNativeTheme(dark)window.ClipboardClipboardInterface剪貼板讀寫copy(text)/paste(cb)window.ShareShareInterface系統(tǒng)分享面板file(uri, type, title)window.SWVLocationLocationInterfaceGPS 定位異步回調(diào)getCurrentPosition(cb)window.GeolocationCacheGeolocationCacheInterface定位緩存兜底getLastKnown(cb)window.NetworkInfoNetworkInfoInterface網(wǎng)絡(luò)狀態(tài)監(jiān)聽(tīng)getStatus(cb)window.ToastToastInterface原生輕提示show(msg)所有插件源碼集中在 app/src/main/java/mgks/os/swv/plugins/ 目錄。插件的啟用開(kāi)關(guān)在配置文件 swv.properties 的plugins.enabled列表中——不需要某項(xiàng)能力把它從列表里去掉即可實(shí)現(xiàn)按需加載、最小暴露面。以剪貼板為例網(wǎng)頁(yè)端的調(diào)用簡(jiǎn)潔到只有一行見(jiàn) script.jswindow.Clipboard.copy(text); // JS 調(diào)原生 window.Clipboard.paste(function(t) {}); // 原生異步回調(diào) JS五、寫好 JS Bridge 的三個(gè)關(guān)鍵實(shí)踐?線程安全原生回調(diào)可能發(fā)生在后臺(tái)線程涉及 UI 操作時(shí)務(wù)必runOnUiThread參考setNativeTheme的寫法?異步用回調(diào)、同步返回 JSON定位、權(quán)限等耗時(shí)操作一律走回調(diào)函數(shù)同步查詢則返回 JSON 字符串跨語(yǔ)言傳輸穩(wěn)定可靠?暴露面最小化JavascriptInterface只標(biāo)注真正需要的只讀/無(wú)副作用方法配合swv.properties的插件開(kāi)關(guān)把網(wǎng)頁(yè)能觸碰到的原生能力壓到最小。六、動(dòng)手實(shí)踐5 分鐘跑通 JS Bridgegit clone https://gitcode.com/gh_mirrors/an/Android-SmartWebView用 Android Studio 打開(kāi)項(xiàng)目后重點(diǎn)閱讀以下文件即可摸清整條通信鏈路橋接核心JSInterfacePlugin.java注冊(cè)中心PluginManager.javaJS 側(cè)調(diào)用示例script.js編寫你自己的插件creating-plugins.md想擴(kuò)展自己的能力按 creating-plugins.md 的指引實(shí)現(xiàn)PluginInterface在static塊中自注冊(cè)再在swv.properties里啟用即可——新的 JS Bridge 通道也就此誕生?？偨Y(jié)Android Smart WebView 的 JS Bridge 方案可以歸納為三板斧addJavascriptInterface打通 JS→原生、evaluateJavascript 命名事件回調(diào)打通原生→JS、插件管理器統(tǒng)一注冊(cè)與按需啟用。它沒(méi)有引入額外的通信框架而是把 Android WebView 的原生能力組織得足夠清晰、安全且易擴(kuò)展是構(gòu)建混合應(yīng)用的務(wù)實(shí)之選?！久赓M(fèi)下載鏈接】Android-SmartWebViewA simple use webview integrated w/ native features plugin support for building hybrid apps.項(xiàng)目地址: https://gitcode.com/gh_mirrors/an/Android-SmartWebView創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考