Android JS交互参数传递详解，如何高效实现交互传参？

Android与JS交互传参详解

在移动应用开发中，Android与JavaScript（JS）的交互是实现混合开发的关键，特别是当需要在两者之间传递参数时，正确的方法选择和实现尤为重要，下面将详细介绍Android与JS之间的交互传参方式。

一、Android调用JS并传递参数

1、使用WebView的loadUrl方法

基本原理：通过WebView的loadUrl方法，可以直接加载并执行一段JavaScript代码，这种方法适用于简单的参数传递场景。

示例代码：

 WebView webView = findViewById(R.id.webview);
     String jsCode = "javascript:methodName('参数')";
     webView.loadUrl(jsCode);

methodName是JS中定义的方法名，'参数'是要传递的具体参数值。

2、使用WebView的evaluateJavascript方法

基本原理：evaluateJavascript方法不仅可以执行JS代码，还可以获取到JS代码的执行结果，这提供了更高的灵活性和控制力。

示例代码：

 WebView webView = findViewById(R.id.webview);
     String jsCode = "methodName('参数')";
     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
         webView.evaluateJavascript(jsCode, null);
     } else {
         webView.loadUrl("javascript:" + jsCode);
     }

同样地，methodName是JS中定义的方法名，'参数'是要传递的具体参数值。

3、传递多个参数

当需要传递多个参数时，可以在JS代码中直接拼接这些参数。

 String param1 = "Hello";
     int param2 = 123;
     boolean param3 = true;
     String jsCode = "javascript:myFunction('" + param1 + "', " + param2 + ", " + param3 + ")";
     webView.loadUrl(jsCode);

在JS端，可以定义相应的函数来接收这些参数：

 function myFunction(param1, param2, param3) {
         console.log("Received parameters:");
         console.log("param1: " + param1);
         console.log("param2: " + param2);
         console.log("param3: " + param3);
     }

二、JS调用Android并传递参数

1、通过WebView的addJavascriptInterface方法

基本原理：addJavascriptInterface方法允许Android端暴露一个对象给JS，JS可以通过这个对象调用Android的方法，并传递参数。

示例代码：

 WebView webView = findViewById(R.id.webview);
     webView.addJavascriptInterface(new Object() {
         @SuppressLint("JavascriptInterface")
         public void testMethod(final String str1, final String str2) {
             // 处理传入的参数
         }
     }, "demo");

在JS端，可以通过以下方式调用这个方法：

 var demoObject = document.getElementById("demo");
     demoObject.testMethod("Hello", "World");

2、通过WebViewClient的shouldOverrideUrlLoading方法

基本原理：通过拦截JS中的URL加载请求，可以在Android端处理这些请求，并从中提取参数。

示例代码：

 webView.setWebViewClient(new WebViewClient() {
         @Override
         public boolean shouldOverrideUrlLoading(WebView view, String url) {
             Uri uri = Uri.parse(url);
             String arg1 = uri.getQueryParameter("arg1");
             String arg2 = uri.getQueryParameter("arg2");
             // 处理传入的参数
             return true;
         }
     });

在JS端，可以通过修改URL来传递参数：

 window.location.href = "js://webview?arg1=value1&arg2=value2";

3、通过WebChromeClient的onJsAlert、onJsConfirm、onJsPrompt方法

基本原理：通过拦截JS中的对话框（如alert、confirm、prompt），可以在Android端处理这些对话框事件，并从中提取参数。

示例代码：

 webView.setWebChromeClient(new WebChromeClient() {
         @Override
         public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
             // 处理传入的参数
             return super.onJsAlert(view, url, message, result);
         }
     });

在JS端，可以通过触发这些对话框来传递参数：

 alert("This is an alert with parameter: " + parameter);

四、相关问题与解答

1、问：如何在Android中调用JS的无参方法和有参方法？

答：在Android中调用JS的无参方法时，可以直接使用webView.loadUrl("javascript:methodName()")；调用有参方法时，则可以使用webView.loadUrl("javascript:methodName('参数')")或webView.evaluateJavascript("methodName('参数')", null)，根据需要选择合适的方式。

2、问：如何在JS中接收Android传递的多个参数？

答：在JS中，可以通过定义一个接收多个参数的函数来接收Android传递的参数。function myFunction(param1, param2, param3) { ... }，在Android端调用该函数时，将参数按照函数定义的顺序传递给它即可。