当前位置：首页 > 行业动态 > 正文

Android JS互传参数的方法与技巧？

在Android中，通过Intent传递参数可以使用 putExtra()方法，在JS中通过 getIntent().getXXXExtra()获取。

1、实现步骤

创建Android项目并配置WebView：在Android Studio中创建新项目，并在AndroidManifest.xml文件中添加网络权限，在activity_main.xml文件中添加WebView组件。

加载HTML文件：在assets文件夹中创建index.html文件，包含基本的HTML结构和JavaScript函数，用于接收和展示从Android传递过来的参数。

在MainActivity中实现参数传递：在MainActivity.java文件中配置WebView以启用JavaScript，并使用evaluateJavascript方法调用JavaScript中的函数并传递参数。

运行应用：在Android模拟器或真实设备上运行应用，查看页面上是否成功显示从Android传递过来的参数。

Android JS互传参数的方法与技巧？

2、示例代码

HTML文件（index.html）

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Android to JS</title>
     </head>
     <body>
         Android to JavaScript Communication
         <div id="dataDisplay"></div>
         <script>
             function displayData(data) {
                 document.getElementById('dataDisplay').innerText = data;
             }
         </script>
     </body>
     </html>

MainActivity.java

Android JS互传参数的方法与技巧？

     import android.os.Bundle;
     import android.webkit.WebSettings;
     import android.webkit.WebView;
     import android.webkit.WebViewClient;
     import androidx.appcompat.app.AppCompatActivity;
     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);
             WebSettings webSettings = webView.getSettings();
             webSettings.setJavaScriptEnabled(true);
             webView.setWebViewClient(new WebViewClient());
             // 加载本地 HTML 文件
             webView.loadUrl("file:///android_asset/index.html");
             // 传递数据到 JavaScript
             String data = "Hello from Android!";
             webView.post(new Runnable() {
                 @Override
                 public void run() {
                     // 调用 JavaScript 函数并传递参数
                     webView.evaluateJavascript("displayData('" + data + "');", null);
                 }
             });
         }
     }

3、单元表格

步骤 描述 代码示例
1 创建Android项目并配置WebView 在AndroidManifest.xml中添加网络权限；在activity_main.xml中添加WebView组件
2 加载HTML文件 在assets文件夹中创建index.html文件，包含基本的HTML结构和JavaScript函数
3 在MainActivity中实现参数传递 在MainActivity.java中配置WebView以启用JavaScript，并使用evaluateJavascript方法调用JavaScript中的函数并传递参数
4 运行应用 在Android模拟器或真实设备上运行应用，查看页面上是否成功显示从Android传递过来的参数

4、相关问题与解答

问题1：如何在Android中调用JavaScript中的多个参数函数？

Android JS互传参数的方法与技巧？

解答：可以使用evaluateJavascript方法或loadUrl方法，并通过逗号分隔参数来调用JavaScript中的多个参数函数。webView.evaluateJavascript("javascript:functionName('param1', 'param2', 'param3');", null);。

问题2：如何在JavaScript中调用Android中的方法并传递参数？

解答：可以通过定义一个Java类并使用@JavascriptInterface注解来暴露给JavaScript调用，然后在JavaScript中通过接口名称调用该方法并传递参数，定义一个名为MyJavaScriptInterface的Java类，并使用@JavascriptInterface注解将functionName方法暴露给JavaScript调用，然后在JavaScript中通过Android.functionName('param1', 'param2');来调用该方法并传递参数。

androidjavascript参数传递

相关文章