详解 Android 与 HTML 混合开发总结

介绍

本文主要介绍 Android 和 HTML 混合开发的方法和技巧。Android 和 HTML 的混合开发可以将 Web 和 Native 的优势融合在一起，实现复杂的交互操作，同时保证了应用的性能和稳定性。下面详细介绍如何实现 Android 和 HTML 的混合开发。

WebView 构建基础

WebView 是 Android 系统提供的一个用于展示 Web 内容的控件，基于 Android 的 WebView，开发人员可以将 Web 应用嵌入到 Android 应用中，为用户提供原生的使用体验。WebView 很容易使用，可以通过 XML 布局文件定义 WebView，然后在 Java 代码中进行相关初始化即可。

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</RelativeLayout>

Java 代码

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

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

        mWebView = findViewById(R.id.web_view);

        mWebView.loadUrl("https://www.example.com");
    }
}

上述代码中，通过 findViewById() 方法获取布局文件中的 WebView，然后通过 loadUrl() 方法加载网页。

Android 与 HTML 交互方法

JavaScript 与 Native 交互

在 WebView 中，可以通过 JavaScript 和 Native 之间相互调用，实现交互操作。

Native 调用 JavaScript：

mWebView.loadUrl("javascript:functionName('参数1', '参数2', ...)");

JavaScript 调用 Native：

首先，在 Android 中通过 WebView 的 addJavascriptInterface() 方法注册一个 Java 对象：

class JsInterface {
    @JavascriptInterface
    public void showToast(String msg) {
        Log.d(TAG, "showToast: " + msg);

        Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
    }
}

mWebView.addJavascriptInterface(new JsInterface(), "Android");

然后，在 JavaScript 中，通过 window.Android 调用该 Java 对象：

window.Android.showToast("Hello, World!");

Web 与 Native 交互

可以通过 WebView 的 WebViewClient 和 WebChromeClient 方法实现 Web 与 Native 的交互。

mWebView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);

        mWebView.loadUrl("javascript:functionName('参数1', '参数2', ...)");
    }
});

mWebView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("提示");
        builder.setMessage(message);
        builder.setPositiveButton("确定", null);
        builder.show();

        return true;
    }
});

上述代码中通过 WebViewClient 和 WebChromeClient 的相关方法实现 Web 与 Native 的交互。

示例说明

以下两个示例说明 Web 和 Native 的交互。

示例一

在 HTML 页面中，有一个按钮，点击按钮时通过 JavaScript 调用 Native 中的 showToast() 方法，弹出一个 Toast 提示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例一</title>
    <script>
        function showToast() {
            window.Android.showToast("Hello, World!");
        }
    </script>
</head>
<body>
    <button onclick="showToast()">显示 Toast</button>
</body>
</html>

在 Android 中注册一个名为 JsInterface 的 Java 对象，通过 addJavascriptInterface() 方法，将这个 Java 对象注入到 WebView 中。然后通过 showToast() 方法弹出一个 Toast 提示：

class JsInterface {
    @JavascriptInterface
    public void showToast(String msg) {
        Log.d(TAG, "showToast: " + msg);

        Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
    }
}

mWebView.addJavascriptInterface(new JsInterface(), "Android");

示例二

在 HTML 页面中，有一个输入框和一个按钮，输入框用于输入用户姓名，按钮点击后将用户姓名传递给 Native 中的 showName() 方法，并弹出一个 Alert 提示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例二</title>
    <script>
        function showName() {
            var name = document.getElementById("name").value;
            window.Android.showName(name);
        }
    </script>
</head>
<body>
    <input type="text" id="name" />
    <button onclick="showName()">显示姓名</button>
</body>
</html>

在 Android 中注册一个名为 JsInterface 的 Java 对象，通过 addJavascriptInterface() 方法，将这个 Java 对象注入到 WebView 中。然后通过 showName() 方法弹出一个 Alert 提示：

class JsInterface {
    @JavascriptInterface
    public void showName(String name) {
        Log.d(TAG, "showName: " + name);

        new AlertDialog.Builder(MainActivity.this)
                .setTitle("姓名")
                .setMessage(name)
                .setPositiveButton("确定", null)
                .show();
    }
}

mWebView.addJavascriptInterface(new JsInterface(), "Android");