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与原生代码的交互的几种方式，开发者可以根据具体场景选择适合自己的方法。