Android JSBridge實現原理和使用方法

一、什麼是Android JSBridge

Android JSBridge是一種可以實現Android應用與H5頁面之間相互通信的橋樑技術。通過JSBridge，H5頁面可以調用Android應用中的Native代碼，同時Android應用中的Native代碼也可以調用H5頁面中的JavaScript代碼，實現相互調用和數據交換。

二、Android JSBridge實現原理

在Android應用中，通常會使用WebView來加載顯示H5頁面。WebView是一種可以直接集成到應用中的瀏覽器控件，可以方便地加載H5頁面。而JSBridge的實現原理也是基於WebView來實現的。

在WebView加載頁面時，會使用WebChromeClient的onJsPrompt()方法來攔截H5頁面中的JavaScript代碼。當H5頁面中調用JSBridge的接口時，JavaScript會調用onJsPrompt()方法，將JSBridge接口名稱和參數傳遞給Native代碼。

Native代碼通過解析接口名稱和參數，來進行相應的操作，並且通過WebView的loadUrl()方法，將結果返回給H5頁面。H5頁面中的JavaScript代碼通過設置回調函數，實現對Native代碼的異步調用和結果處理。

三、Android JSBridge使用方法

接下來，我們將使用一些示例代碼來演示如何在Android應用中實現JSBridge的使用。

1. 聲明JSBridge接口

public interface JSBridgeInterface {
    /**
     * Native調用JavaScript的接口
     *
     * @param functionName    JavaScript函數名稱
     * @param parameterString JavaScript參數
     * @param callback        Native調用完後的回調
     */
    void callJSFunction(String functionName, String parameterString, Callback callback);

    /**
     * Native註冊供JavaScript調用的接口
     *
     * @param functionName JavaScript函數名稱
     * @param bridgeMethod 對應Native中的方法
     */
    void registerJSBridgeMethod(String functionName, BridgeMethod bridgeMethod);
}

在這個接口中，我們定義了兩個方法，一個是供Native調用JavaScript的接口，另一個是註冊供JavaScript調用的接口。

2. JSBridge實現類

public class JSBridgeImpl implements JSBridgeInterface {

    private final WebView webView;
    private final Handler handler;

    public JSBridgeImpl(WebView webView) {
        this.webView = webView;
        this.handler = new Handler(Looper.getMainLooper());
    }

    @Override
    public void callJSFunction(String functionName, String parameterString, Callback callback) {
        final String script = "javascript:" + functionName + "(" + parameterString + ")";
        handler.post(new Runnable() {
            @Override
            public void run() {
                webView.loadUrl(script);
            }
        });

        // 這裡可以實現回調函數
        if (callback != null) {
            callback.onResult(null);
        }
    }

    @Override
    public void registerJSBridgeMethod(String functionName, BridgeMethod bridgeMethod) {
        // 實現註冊接口的方法
    }
}

在這個實現類中，我們實現了之前聲明的接口，並且通過WebView的loadUrl()方法來實現調用H5頁面中的JavaScript方法。同時還可以通過handler實現回到主線程進行UI操作。

3. 註冊JSBridge接口

JSBridgeInterface jsBridge = new JSBridgeImpl(webView);
webView.addJavascriptInterface(jsBridge, "jsbridge");

我們在WebView中註冊了一個名為”jsbridge”的對象，來實現將Native代碼註冊到H5頁面中進行調用。

4. H5頁面中使用JSBridge

    function nativeCallJS(result) {
        alert(result);
    }
    function testCallNative() {
        window.jsbridge.callNativeFunction("testNativeMethod", {'name': 'Android JSBridge'}, nativeCallJS);
    }

在H5頁面中，我們通過window對象來獲取之前註冊的”jsbridge”對象，並且調用其中的callNativeFunction()方法。同時還可以設置回調函數來處理結果。

四、總結

通過以上的示例代碼，我們可以看到Android JSBridge的實現原理和使用方法。通過JSBridge，我們可以方便地實現Android應用與H5頁面之間的通信，讓應用具有更好的交互性和用戶體驗。同時，我們也需要注意安全問題，避免JavaScript注入等安全漏洞。