7步掌握AgentWeb与JS交互：从调用到安全实战
项目地址: https://gitcode.com/gh_mirrors/ag/AgentWeb 开篇痛点与解决方案
还在为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!"); // 调用原生方法
}
}
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
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
