Android 调用 JavaScript 技术解析与示例

在移动应用开发中，Android 与 Web 技术的结合越来越紧密。Android 调用 JavaScript 代码，可以利用 Web 技术的强大功能，实现一些复杂的交互效果。本文将详细介绍 Android 调用 JavaScript 的技术原理、实现方式，并提供代码示例。

技术原理

Android 调用 JavaScript 主要通过 WebView 控件实现。WebView 是 Android 系统中用于显示网页内容的组件，它提供了丰富的接口，允许开发者在 Android 应用中嵌入网页，并与 JavaScript 代码进行交互。

WebView 简介

WebView 是 Android SDK 中的一个类，它继承自 Android 的 View 组件。WebView 可以加载 HTML、CSS 和 JavaScript 代码，实现网页的显示和交互。

JavaScriptInterface 类

为了实现 Android 与 JavaScript 的交互，Android SDK 提供了一个名为 JavaScriptInterface 的类。通过这个类，我们可以在 JavaScript 代码中调用 Android 的方法。

实现方式

步骤一：添加 WebView 控件

首先，在布局文件中添加 WebView 控件。

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

步骤二：在 Activity 中使用 WebView

在 Activity 中，我们需要初始化 WebView，并加载网页。

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true); // 启用 JavaScript
        webView.loadUrl("file:///android_asset/index.html"); // 加载本地 HTML 文件
    }
}

步骤三：添加 JavaScriptInterface

创建一个继承自 JavaScriptInterface 的类，并添加需要被 JavaScript 调用的方法。

public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

步骤四：将 JavaScriptInterface 添加到 WebView

在 Activity 中，将 JavaScriptInterface 的实例添加到 WebView。

webView.addJavascriptInterface(new WebAppInterface(this), "Android");

步骤五：在 HTML 中调用 Android 方法

在 HTML 文件中，通过 JavaScript 调用 Android 的方法。

<!DOCTYPE html>
<html>
<head>
    <title>Android 调用 JavaScript 示例</title>
    <script type="text/javascript">
        function showAndroidToast() {
            Android.showToast("Hello, Android!");
        }
    </script>
</head>
<body>
    <button onclick="showAndroidToast()">显示 Toast</button>
</body>
</html>

代码示例

以下是完整的代码示例，包括 Android 端和 Web 端的代码。

// MainActivity.java
public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/index.html");
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");
    }
}

// WebAppInterface.java
public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

<!-- activity_main.xml -->
<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Android 调用 JavaScript 示例</title>
    <script type="text/javascript">
        function showAndroidToast() {
            Android.showToast("Hello, Android!");
        }
    </script>
</head>
<body>
    <button onclick="showAndroidToast()">显示 Toast</button>
</body>
</html>

序列图

以下是 Android 调用 JavaScript 的序列图。

sequenceDiagram
    participant A as Android
    participant B as WebView
    participant C as JavaScript

    Android->>WebView: 初始化 WebView
    WebView->>JavaScript: 加载 HTML
    JavaScript->>Android: 调用 showToast 方法
    Android->>Android: 显示 Toast

表格

以下是 Android 调用 JavaScript 的关键步骤表格