Android与JS交互的实现
一、整体流程
下面是Android与JS交互的整个流程：
| 步骤 | 描述 |
|---|---|
| 1 | Android加载WebView控件 |
| 2 | JS调用Android方法 |
| 3 | Android调用JS方法 |
| 4 | JS获取Android数据 |
二、步骤及代码实现
1. Android加载WebView控件
首先，在Android的Activity或Fragment中加载WebView控件，并设置WebView的相关参数。在XML布局文件中添加一个WebView控件：
WebView webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true); // 启用JavaScript
webView.setWebViewClient(new WebViewClient()); // 设置WebView客户端
webView.loadUrl("file:///android_asset/index.html"); // 加载本地HTML文件或远程URL
2. JS调用Android方法
在JS中调用Android方法，需要通过WebView的addJavascriptInterface方法将Android对象注入到JS中。首先，创建一个Java类作为Android与JS交互的接口：
public class JsInterface {
@JavascriptInterface
public void showToast(String message) {
Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show();
}
}
然后，将该对象注入到WebView中：
webView.addJavascriptInterface(new JsInterface(), "Android");
在JS中，可以通过Android.showToast("Hello")来调用Android的showToast方法。
3. Android调用JS方法
在Android中调用JS方法，需要通过WebView的loadUrl方法执行JS代码。先定义一个JS方法：
<script>
function showAlert(message) {
alert(message);
}
</script>
然后，在Android代码中调用该JS方法：
webView.loadUrl("javascript:showAlert('Hello')");
上述代码会在WebView中执行JS方法showAlert，并传入参数"Hello"。
4. JS获取Android数据
要在JS中获取Android数据，可以通过WebView的evaluateJavascript方法执行JS代码，并通过回调函数返回结果。先定义一个JS函数：
<script>
function showAndroidData(data) {
document.getElementById("dataContainer").innerHTML = data;
}
</script>
然后，在Android代码中调用该JS函数：
webView.evaluateJavascript("javascript:showAndroidData('Hello from Android')",
new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
// value为JS函数的返回值
}
});
上述代码会在WebView中执行JS函数showAndroidData，并传入参数"Hello from Android"，最后通过回调函数获取JS函数的返回值。
结论
通过上述步骤，我们可以实现Android和JS之间的交互。在Android中，我们可以通过addJavascriptInterface方法将Android对象注入到JS中，然后在JS中调用该对象的方法。同样地，我们也可以在Android中调用JS的方法。此外，我们还可以在JS中获取Android的数据，并在Android中获取JS方法的返回值。这样，我们就能实现一个完整的Android与JS交互的功能。
希望以上内容能够帮助你理解并实现Android与JS交互的过程。如有疑问，请随时提问。
