安卓将数据传给js

安卓向JS传递数据的实现方式

核心原理

Android通过WebView组件加载HTML页面，利用JavaScript接口或evaluateJavascript方法实现原生与JS的双向通信。

实现步骤

代码实现

Android端配置

// 初始化WebView
WebView webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true); // 启用JS
// 方式1：通过evaluateJavascript直接调用
webView.evaluateJavascript("javascript: receiveData('Hello from Android')", null);
// 方式2：添加JS接口
webView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void sendMessage(String data) {
        Log.d("JS->Android", data);
    }
}, "Android");

JS端接收

<script>
  // 方式1：直接定义函数
  function receiveData(data) {
    console.log("Received from Android: " + data);
    // 调用Android方法返回数据
    Android.sendMessage("Processed: " + data);
  }
</script>

关键注意事项

1. 数据格式：建议使用JSON字符串传递复杂对象

   String json = new Gson().toJson(myObject);
   webView.evaluateJavascript("handleData(" + json + ")", null);

2. 安全限制：

   • addJavascriptInterface需标注@JavascriptInterface
   • 避免暴露敏感API，建议使用evaluateJavascript

3. 线程处理：JS执行在WebView主线程，耗时操作需开异步线程

   

完整流程示例

Android端触发流程

// 准备数据
Map<String, Object> params = new HashMap<>();
params.put("type", "user");
params.put("name", "John Doe");
String json = new Gson().toJson(params);
// 调用JS方法
webView.evaluateJavascript("processUserData(" + json + ")", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String result) {
        // 处理JS返回结果
        Log.d("JS Response", result);
    }
});

JS端处理逻辑

<script>
function processUserData(data) {
    const obj = JSON.parse(data);
    console.log("User Type: " + obj.type);
    console.log("User Name: " + obj.name);
    // 返回处理结果
    return "Processed user: " + obj.name;
}
</script>

常见问题与解答

Q1：如何实现JS主动调用Android方法？

A：通过addJavascriptInterface注入对象,JS直接调用接口方法：

// Android端注入接口
webView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void logMessage(String msg) {
        Log.d("JS-LOG", msg);
    }
}, "NativeLogger");
// JS端调用
<script>
  NativeLogger.logMessage("This is a log message");
</script>

Q2：传递大数据量时出现性能问题怎么办？

A：优化方案：

1. 使用分片传输：将大对象拆分为多个小JSON包
2. 压缩数据：使用gzip压缩后传输（需base64编码）
3. 异步处理：JS端使用setTimeout分段处理数据
4. 示例：

   // Android端发送压缩数据
   String compressed = compressData(json); // 自定义压缩方法
   webView.evaluateJavascript("receiveCompressedData('" + compressed + "')", null);