一、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与原生代码的交互的几种方式，开发者可以根据具体场景选择适合自己的方法。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/258431.html
微信扫一扫 
支付宝扫一扫 