Android原生与HTML5交互传递值的完整示例

资源摘要信息:"在Android开发中，原生代码调用HTML5页面并进行数据传递是一种常见需求。这通常涉及到Android的WebView组件，它允许开发者在Android应用中嵌入一个完整的浏览器界面，用于加载和显示网页。本文将详细探讨如何实现Android原生代码与HTML5页面之间的交互，并通过一个简单的Demo来演示如何将数据从Android传递到HTML页面中。 首先，要实现在Android中调用HTML5页面，我们需要在Android项目中嵌入一个WebView组件。WebView是Android提供的一个系统组件，用于显示网页。开发者可以通过WebView加载本地的HTML文件或者远程的网页地址。 在Demo项目中，我们通常会看到一个Activity，这个Activity通过布局文件来包含一个WebView组件。在Activity的代码中，我们会使用findViewById方法找到这个WebView组件，并通过setContentView方法将它展示出来。接着，我们会调用WebView的loadUrl方法，将网页地址（可以是本地的assets目录下的HTML文件，也可以是在线的网址）传递给它，从而在WebView中加载页面。 当我们需要从Android原生代码向HTML页面传递数据时，可以使用WebView提供的JavaScript接口功能。首先，我们需要定义一个Java类，并在该类中定义需要暴露给JavaScript的方法。这个类需要使用@JavascriptInterface注解进行标记，以确保方法能够被JavaScript访问。然后，我们需要将这个接口对象添加到WebView中，使用addJavascriptInterface方法，其中第一个参数是我们创建的接口对象，第二个参数是当JavaScript执行时用于引用这个接口的名称。 在HTML页面中，我们可以通过调用window.java对象的方法来接收从Android传递过来的数据。这个对象就是我们在Java代码中通过addJavascriptInterface方法设置的接口对象的JavaScript名称。 例如，在Java代码中定义接口如下： ```java class WebAppInterface { Context mContext; WebAppInterface(Context c) { mContext = c; } @JavascriptInterface public void showToast(String toast) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); } } ``` 然后，我们将这个接口对象添加到WebView中： ```java webView.addJavascriptInterface(new WebAppInterface(this), "Android"); ``` 在HTML页面中，我们可以通过如下JavaScript代码来调用这个接口： ```html <script type="text/javascript"> function showToastFromNativeApp() { Android.showToast('Hello from Android!'); } </script> ``` 此外，我们还可以使用WebView的evaluateJavascript方法执行JavaScript代码，这是一种更为直接的数据交互方式。它允许我们在Android代码中直接运行JavaScript代码块，并获取执行结果。 最后，为了保证WebView的安全性和性能，我们通常会对其进行一些配置，比如启用JavaScript，设置缓存模式，以及处理各种网页加载事件等。 通过以上步骤，我们可以在Android应用中实现原生代码与HTML5页面的交互，实现数据的双向传递。这种技术在开发混合应用时非常有用，能够将Web技术的强大功能与Android平台的强大性能结合起来，创造出功能丰富、用户体验良好的应用。"