7步掌握AgentWeb与JS交互：从调用到安全实战

开篇痛点与解决方案

还在为Android WebView与JavaScript交互的兼容性问题头疼？数据格式错乱、回调丢失、安全漏洞等问题是否让你束手无策？本文基于AgentWeb v5.1.1版本，从基础调用到安全防护，7步带你全面掌握Android端与JS的无缝通信技术。

读完本文你将获得：
✅ 3种基础交互模式（JS调原生/原生调JS/双向回调）
✅ 复杂参数传递（JSON对象/数组/多类型参数）
✅ 安全防护方案（接口验证/参数过滤）
✅ 实战案例（登录认证/文件上传交互）

1. 环境准备与核心类解析

AgentWeb作为增强型WebView库，通过封装JsAccessEntrace、QuickCallJs等核心类简化交互流程。

1.1 引入依赖

implementation 'io.github.justson:agentweb-core:v5.1.1-androidx'

完整依赖配置见README.md

1.2 核心交互类

类名	功能	路径
JsAccessEntrace	JS接口注册入口	agentweb-core/src/main/java/com/just/agentweb/JsAccessEntrace.java
QuickCallJs	原生调用JS工具类	agentweb-core/src/main/java/com/just/agentweb/QuickCallJs.java
WebSecurityController	交互安全控制器	agentweb-core/src/main/java/com/just/agentweb/WebSecurityController.java

2. 基础交互：JS调用原生方法

2.1 注册JS接口

通过addJavascriptInterface将Java对象暴露给JS：

AgentWeb.with(this)
    .addJavascriptInterface("android", new AndroidInterface(agentWeb, this))
    .createAgentWeb()
    .ready()
    .go("file:///android_asset/js_interaction/hello.html");

示例代码来源：sample/src/main/java/com/just/agentweb/sample/common/AndroidInterface.java

2.2 JS调用示例

在HTML中通过window.android调用原生方法：

function sendHelloToAndroid() {
  if(window.android) {
    window.android.callAndroid("你好，Android!"); // 调用原生方法
  }
}

完整HTML示例：sample/src/main/assets/js_interaction/hello.html

2.3 原生处理实现

public class AndroidInterface {
  @JavascriptInterface
  public void callAndroid(final String msg) {
    runOnUiThread(() -> Toast.makeText(context, msg, Toast.LENGTH_LONG).show());
  }
}

注意：@JavascriptInterface注解不可省略，且方法需在主线程执行

3. 中级交互：原生调用JS方法

3.1 无参数调用

agentWeb.getJsAccessEntrace().quickCallJs("callByAndroid");

对应JS方法：

function callByAndroid() {
  alert("Js收到无参调用");
}

3.2 多参数与回调

使用QuickCallJs实现带回调的复杂调用：

agentWeb.getQuickCallJs().quickCallJs("callByAndroidMoreParams", 
  new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
      Log.d("JS返回值", value); // 接收JS返回的"ok"
    }
  }, 
  new Gson().toJson(new User("张三", 20)), // JSON对象参数
  "附加消息", 123); // 多类型参数

JS端接收：

function callByAndroidMoreParams(objs, msg2, msg3) {
  alert(`id:${objs.id} name:${objs.name} age:${objs.age}`);
  return "ok"; // 返回值将被ValueCallback接收
}

4. 高级交互：JSBridge通信模式

对于复杂场景，推荐使用JSBridge实现双向通信，示例见sample/src/main/assets/jsbridge/demo.html。

4.1 初始化Bridge

connectWebViewJavascriptBridge(function(bridge) {
  bridge.init(function(message, responseCallback) {
    var data = {'Javascript Responds': '已收到'};
    responseCallback(data);
  });
});

4.2 发送消息给原生

bridge.send({'action': 'login', 'username': 'test'}, function(response) {
  console.log('原生返回：' + response);
});

5. 安全防护实践

5.1 接口白名单验证

通过WebSecurityController实现接口权限控制：

webSecurityController.check(new WebSecurityCheckLogic() {
  @Override
  public boolean intercept(String url, String method) {
    return !WHITELIST_METHODS.contains(method); // 验证方法是否在白名单
  }
});

5.2 参数过滤

对JS传入的JSON参数进行类型与格式校验：

try {
  JSONObject param = new JSONObject(jsParam);
  if(!param.has("token")) throw new Exception("缺少token");
} catch (Exception e) {
  throw new JsInterfaceObjectException("参数非法");
}

6. 实战案例：文件上传交互

结合agentweb-filechooser模块实现上传交互：

// HTML触发文件选择
<input type="file" onchange="uploadFile(this.files)">

function uploadFile(files) {
  window.android.uploadFile(files[0].name, files[0].size);
}

原生处理文件选择：agentweb-filechooser/src/main/java/com/just/agentweb/filechooser/FileChooser.java

7. 常见问题与调试技巧

7.1 方法找不到异常

• 确保JS接口对象名与addJavascriptInterface参数一致
• 检查混淆配置，保留接口类：

-keep class com.just.agentweb.sample.common.AndroidInterface {
  public *;
}

7.2 线程问题

JS调用原生方法在非UI线程执行，更新UI需切换：

@JavascriptInterface
public void updateUI(String msg) {
  runOnUiThread(() -> textView.setText(msg));
}

总结与扩展

本文覆盖了从基础调用到安全防护的全流程，关键文件路径汇总：

• 基础交互示例：sample/src/main/assets/js_interaction/hello.html
• 安全控制类：WebSecurityController.java
• 文件上传模块：agentweb-filechooser

建议结合Sample工程实际运行调试，下一篇将讲解"AgentWeb性能优化与资源缓存策略"。

项目完整地址：https://gitcode.com/gh_mirrors/ag/AgentWeb