Android WebView与JavaScript交互实现深度解析

本文主要探讨了在Android应用中如何实现WebView与JavaScript的相互调用，这对于构建复杂的UI界面和利用HTML5的跨平台优势非常重要。文章通过实例代码详细阐述了这一过程，适合Android开发者学习。 在Android开发中，使用HTML5（H5）可以简化UI界面的设计，并且能够方便地在不同平台上运行。尽管H5在Android上的性能可能略逊一筹，但随着硬件性能的提升，这个问题会逐渐得到改善。为了充分利用H5的优势，关键在于实现Java代码与JavaScript代码之间的通信。 首先，我们需要创建一个简单的项目作为演示。在这个例子中，我们准备了一个名为`index.html`的文件，将其放在Android工程的`assets`目录下。HTML代码包含一个表格、输入框和一个按钮，点击按钮时会调用JavaScript函数`getMessage`。 JavaScript代码则被分离到`app.js`文件中，同样存放在`assets`目录。`getMessage`函数获取输入框的值并准备传递给Java代码。 为了使WebView能够执行JavaScript代码，我们需要在Java代码中设置WebView的一些属性。首先，确保`JavaScript`是启用的： ```java WebView webView = findViewById(R.id.webView); webView.getSettings().setJavaScriptEnabled(true); ``` 接着，我们需要添加一个WebViewClient，以便在页面加载完成后执行JavaScript代码： ```java webView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); webView.loadUrl("javascript:getMessage()"); } }); ``` 在Java代码中，我们可以使用`addJavascriptInterface`方法暴露一个Java对象给JavaScript，以便JavaScript可以调用Java的方法： ```java webView.addJavascriptInterface(new Object() { @JavascriptInterface @android.webkit.JavascriptInterface public void showToast(String message) { Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show(); } }, "Android"); ``` 这里创建了一个匿名内部类，定义了一个名为`showToast`的方法，这个方法会被JavaScript调用并显示一个Toast。JavaScript接口名称为`Android`，JavaScript可以通过`window.Android.showToast`来调用。 现在，当用户点击“js传值给Toast”按钮时，JavaScript会调用`getMessage`函数，获取输入框的值，并通过`Android.showToast`调用Java的`showToast`方法，从而在Android设备上显示一个Toast。 通过这种方式，Android应用可以与网页内容进行交互，使得H5界面可以充分利用Android原生功能，同时也允许Java代码控制网页的行为。这种交互方式对于混合开发应用特别有用，能够结合H5的便利性和Android的丰富功能。