Android与H5交互传参

在移动应用开发中，Android与H5（即Web页面）之间的交互是一种常见的需求。Android应用与H5页面之间的交互可以通过JSBridge来实现，而参数的传递是其中一个重要的功能。本文将介绍如何在Android应用与H5页面之间进行参数传递，并提供相应的代码示例。

1. Android调用H5传递参数

Android应用可以通过WebView加载一个H5页面，并在加载过程中传递参数给H5页面。以下是一个简单的示例：

WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/index.html?param1=value1&param2=value2");

在上面的代码中，我们通过WebView加载了一个名为index.html的H5页面，并传递了两个参数param1和param2。在H5页面中可以通过JavaScript获取这些参数：

var params = {};
window.location.search.substr(1).split('&').forEach(function(item) {
    var parts = item.split('=');
    params[parts[0]] = parts[1];
});

console.log(params.param1); // 输出'value1'
console.log(params.param2); // 输出'value2'

通过上述代码，Android应用成功将参数传递给了H5页面，并且H5页面成功获取了这些参数。

2. H5调用Android传递参数

与Android调用H5不同，H5页面要调用Android并传递参数需要通过JSBridge机制来实现。以下是一个示例：

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

在Android应用中，我们定义了一个名为showToast的方法，用于显示一个Toast消息。接下来，在H5页面中调用这个方法并传递参数：

window.android.showToast("Hello from H5!");

通过上述代码，H5页面成功调用了Android中的showToast方法，并传递了参数"Hello from H5!"。

3. 完整示例

下面我们将完整地展示一个Android应用与H5页面之间参数传递的示例。在Android应用中，我们将创建一个简单的WebView，加载一个H5页面，并实现一个显示Toast消息的方法。在H5页面中，我们将调用Android的方法并传递一个参数。

Android端代码

public class MainActivity extends AppCompatActivity {

    private WebView webView;

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

        webView = findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(this, "android");

        webView.loadUrl("file:///android_asset/index.html");
    }

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

H5页面代码

<!DOCTYPE html>
<html>
<head>
    <title>Android与H5交互示例</title>
</head>
<body>
    <button onclick="showToast()">点击我显示Toast</button>
    
    <script>
        function showToast() {
            window.android.showToast("Hello from H5!");
        }
    </script>
</body>
</html>

在上述示例中，我们创建了一个Android应用，在其中加载了一个H5页面。在H5页面中点击按钮可以调用Android中的showToast方法，并传递参数"Hello from H5!"，最终显示一个Toast消息。

结语

通过本文的介绍，我们了解了Android与H5页面之间参数传递的方法，并通过代码示例演示了其实现过程。参数的传递是Android与H5交互的一个重要功能，对于开发移动应用具有重要意义。希望本文对您有所帮助，谢谢阅读！