Skip to main content

question/q1

· 4 min read

在 Android 开发中，从 WebView 的 H5 页面返回到原生页面，通常需要在 H5 页面中调用 Android 原生代码来实现。这需要结合 WebView 的 addJavascriptInterface 方法和 Android 原生代码进行桥接。

下面是详细的实现步骤：

1. 编写 Android 原生代码​

首先，你需要创建一个 Java 或 Kotlin 类，用于提供 H5 页面可以调用的方法。这个类将作为 H5 和原生之间的桥梁。

MyJavaScriptInterface.kt (Kotlin)

class MyJavaScriptInterface(private val activity: Activity) {

    @JavascriptInterface
    fun goBackToNative() {
        activity.runOnUiThread {
            activity.finish() // 结束当前的 Activity，回到上一个原生页面
        }
    }
}

@JavascriptInterface 注解非常重要，它确保该方法可以被 JavaScript 访问。

2. 在 WebView 中设置接口​

接下来，在你的 Activity 或 Fragment 中，加载 WebView 并将刚才创建的接口类添加到 WebView 中。

YourActivity.kt (Kotlin)

import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class YourActivity : AppCompatActivity() {

    private lateinit var webView: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_your)

        webView = findViewById(R.id.webView)

        // 配置 WebView
        webView.settings.javaScriptEnabled = true
        webView.webViewClient = WebViewClient()

        // 将原生接口注入到 WebView 中，"AndroidInterface" 是 H5 页面中用于调用的对象名
        webView.addJavascriptInterface(MyJavaScriptInterface(this), "AndroidInterface")

        // 加载 H5 页面
        webView.loadUrl("file:///android_asset/your_h5_page.html")
        // 或者 webView.loadUrl("https://your-website.com")
    }
}

这里的 "AndroidInterface" 就是 H5 页面中用来调用原生方法的对象名。你可以根据需要自定义这个名称。

3. 在 H5 页面中调用原生方法​

最后，在你的 H5 页面中，通过 JavaScript 来调用我们之前定义的 goBackToNative 方法。

your_h5_page.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>H5 页面</title>
</head>
<body>

    <h1>欢迎来到 H5 页面</h1>
    <p>点击下方按钮返回原生应用</p>

    <button onclick="goBack()">返回原生</button>

    <script>
        function goBack() {
            // 检查 AndroidInterface 对象是否存在，以避免在非 Android 环境下报错
            if (typeof AndroidInterface !== 'undefined' && AndroidInterface.goBackToNative) {
                AndroidInterface.goBackToNative(); // 调用原生方法
            } else {
                console.log("AndroidInterface 不存在或 goBackToNative 方法不可用");
                // 可以在这里添加其他处理，比如关闭当前网页
                window.close();
            }
        }
    </script>

</body>
</html>

当用户在 H5 页面中点击 "返回原生" 按钮时，会执行 goBack() JavaScript 函数，然后调用 AndroidInterface.goBackToNative() 方法。这个调用会触发 Android 原生代码中的 activity.finish()，从而关闭当前的 WebView Activity，返回到上一个原生页面。

总结​

整个流程可以概括为：

  1. Android 端：创建一个类，使用 @JavascriptInterface 注解暴露原生方法（例如 finish()）。
  2. Android 端：通过 addJavascriptInterface 方法将这个类注入到 WebView 中，并指定一个名称（例如 AndroidInterface）。
  3. H5 端：在 JavaScript 中，使用这个指定的名称（AndroidInterface）来调用原生方法（例如 AndroidInterface.goBackToNative()）。