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(…) 函數
? 如果需要,還可以返回執行結果字符串(通常我們只注入,不等返回)