Android開發中JS調用原生方法的實現

一、WebView中JavaScript與原生的交互方式

在Android開發中，我們常常需要在WebView中展示HTML頁面，而HTML頁面中經常需要與Native代碼進行交互，例如獲取本地存儲、啟動其他應用等操作。WebView支持使用JavaScript與原生進行交互，具體有兩種方式：

1、通過addJavascriptInterface()將Java對象註冊到JavaScript對象中。

// Java 代碼
public class JsInterface {
    private Context mContext;
    
    public JsInterface(Context context) {
        mContext = context;
    }
    
    @JavascriptInterface
    public void showToast(String msg) {
        Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
    }
}

// 將Java對象註冊到JavaScript對象中
webView.addJavascriptInterface(new JsInterface(this), "android");

這樣，在JavaScript中就可以通過android.showToast()方法調用原生的彈窗操作。

2、通過WebViewClient重寫shouldOverrideUrlLoading()方法，在URL中添加協議，使WebView能夠識別到執行原生代碼的操作。

// Java 代碼
webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (url.startsWith("jsbridge:")) {
            // 解析執行的方法，並調用Native方法
            return true;
        }
        return super.shouldOverrideUrlLoading(view, url);
    }
});

// JavaScript 代碼
window.location.href = "jsbridge://showToast?msg='Hello World'";

這樣，WebView就能夠解析出協議中的方法名和參數，執行原生代碼。

二、使用第三方庫BridgeWebView實現JavaScript與原生的交互

除了原生提供的交互方式外，我們還可以使用第三方庫BridgeWebView來簡化這個過程。

BridgeWebView實現了JavaScript與原生代碼的自動註冊及執行，並提供了更簡單的API讓開發者調用。

// Java 代碼
webView = findViewById(R.id.bridgeWebView);
webView.setDefaultHandler(new DefaultHandler()); // 設置默認的JS處理器

// 註冊原生方法並處理調用
webView.registerHandler("showToast", new BridgeHandler() {
    @Override
    public void handler(String data, CallBackFunction function) {
        Toast.makeText(MainActivity.this, data, Toast.LENGTH_SHORT).show();
    }
});

// JavaScript 代碼
bridge.callHandler("showToast", "Hello World", function(response) {
    // 處理回調
});

這樣，在JavaScript中就可以通過bridge.callHandler()方法調用原生方法，並且可以處理回調。

三、使用React Native WebView進行原生與JS的交互

在React Native中，WebView提供了與原生代碼進行交互的方式。首先在JavaScript中可以創建WebView的onMessage屬性，用於監聽原生代碼發送過來的消息。

// JavaScript 代碼
 {
        // 處理原生髮送的消息
    }}
/>

然後，在原生代碼中通過WebView的postMessage方法發送消息給JavaScript。

// Java 代碼
webView.postWebMessage(new WebMessage("Hello World"));

React Native WebView還提供了更方便的API來實現JavaScript與原生的交互，例如調用相機、音頻、位置等系統服務，並處理設備硬件事件，如按鍵事件、陀螺儀事件等。

四、總結

以上是Android開發中實現JavaScript與原生代碼的交互的幾種方式，開發者可以根據具體場景選擇適合自己的方法。