'# Android 原生和 JS 交互实践
一、背景与问题
在混合开发场景中，Android 原生代码与 JavaScript 的交互是实现功能的核心桥梁。开发者常常需要在原生代码中调用 JS 逻辑，或从 JS 中触发原生功能。这种交互场景广泛存在于 Hybrid App、WebView 组件、跨平台框架（如 React Native）等项目中。
然而，这一技术存在诸多挑战：如何安全高效地传递数据？如何处理异步回调？如何避免内存泄漏？如何在不同 Android 版本中兼容？如何防止安全漏洞（如 XSS 攻击）？本文将深入探讨 Android 原生与 JS 交互的底层原理、实现方式、性能优化及安全考量。
二、基本原理
Android 的 WebView 组件是 JS 交互的核心载体。其底层基于 Chromium 引擎，支持通过以下机制实现原生与 JS 的双向通信：
- JavaScriptInterface：通过
addJavascriptInterface注册 Java 对象，允许 JS 调用 Java 方法。 - evaluateJavascript：从原生向 JS 注入脚本，实现单向通信。
- JS 接口调用：通过
WebView的loadUrl方法执行 JS 代码，实现原生控制 JS。 - Bundle 传输：通过
Bundle传递复杂数据结构（如 JSON、Parcelable）。
1. 原生调用 JS 的原理
通过 evaluateJavascript 向 WebView 注入 JavaScript 代码，实现原生控制 JS 的逻辑。例如：
webView.evaluateJavascript("alert('Hello from Android')", null);2. JS 调用原生的原理
通过 addJavascriptInterface 注册 Java 对象，JS 可以调用其公开方法：
webView.addJavascriptInterface(new JsBridge(), "Android");Android.showToast("Hello from JS");3. 双向通信的底层机制
WebView 通过 WebViewCore 模块与 JS 引擎通信，使用 JNI 调用 Java 代码，再通过 Chromium 的 JS 引擎执行脚本。数据传输采用 Parcel 或 String 编码，涉及 UTF-8 编码、内存管理等底层机制。
三、环境准备
1. 开发依赖
- Android SDK 21+（支持
evaluateJavascript） - 必须使用
WebView组件 - 需要配置
uses-permission允许网络访问（如需调用外部 JS 资源）
2. 项目结构
app/
├── src/main/
│ ├── java/com/example/
│ │ └── JsBridge.java
│ └── res/
│ └── raw/
│ └── js.js3. 配置 WebView
WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsBridge(), "Android");四、核心实现
1. 原生调用 JS 示例
代码示例：
webView.evaluateJavascript("document.getElementById('hello').innerText = 'Hello from Android'", null);关键点：
evaluateJavascript是 Android 4.4+ 的 API，兼容性优于loadUrl。- 传递的字符串是 JavaScript 代码，需注意转义字符（如
\"）。
2. JS 调用原生示例
Java 接口定义：
public class JsBridge {
@JavascriptInterface
public void showToast(String message) {
Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
}
}JS 调用：
Android.showToast("Hello from JS");关键点：
@JavascriptInterface注解是必须的（Android 4.2+）。- 方法参数类型需匹配，支持基本类型（String、int、boolean）。
3. 双向数据传输示例
原生传递数据给 JS：
Bundle data = new Bundle();
data.putString("key", "Hello from Android");
webView.evaluateJavascript(
"javascript:handleData(" + data.toString() + ")", null
);JS 接收数据：
function handleData(data) {
console.log("Received from Android: " + data.key);
}关键点：
- 使用
Bundle传递复杂结构时，需确保 JS 能解析。 - 传输的 JSON 数据需进行转义处理，避免语法错误。
五、完整案例
1. 混合开发登录场景
场景描述：
用户在 JS 页面输入账号密码，点击登录按钮后，JS 调用原生接口处理登录逻辑，原生返回结果给 JS 显示。
实现步骤：
1. 原生 Java 代码
public class JsBridge {
private Context mContext;
public JsBridge(Context context) {
mContext = context;
}
@JavascriptInterface
public void login(String username, String password) {
// 原生处理登录逻辑
if (validateCredentials(username, password)) {
String result = "Login successful";
webView.evaluateJavascript("javascript:handleResult('" + result + "')", null);
} else {
webView.evaluateJavascript("javascript:handleError('Invalid credentials')", null);
}
}
private boolean validateCredentials(String username, String password) {
// 模拟验证逻辑
return username.equals("admin") && password.equals("123456");
}
}2. JS 代码
function login() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
Android.login(username, password);
}
function handleResult(result) {
alert(result);
}
function handleError(error) {
alert(error);
}3. 原生 WebView 配置
WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsBridge(this), "Android");
webView.loadUrl("file:///android_asset/login.html");关键点：
- 使用
file:///android_asset/加载本地 HTML 文件。 - 需要将 HTML 文件放置在
assets目录下。 - 原生接口需处理异步回调，避免阻塞主线程。
六、源码解析
1. evaluateJavascript 的实现原理
evaluateJavascript 最终调用 WebViewCore 的 evaluateJavascript 方法，通过 JNI 调用 Java 代码，再通过 Chromium 的 JS 引擎执行。核心代码如下：
// WebViewCore.java
public void evaluateJavascript(String script, ValueCallback<String> resultCallback) {
// 调用 JNI 方法
mWebViewCore.evaluateJavascript(script, resultCallback);
}2. addJavascriptInterface 的实现原理
addJavascriptInterface 会将 Java 对象注册为 JS 可访问的接口，通过 JNI 将方法暴露给 JS 引擎。关键代码如下：
// WebViewCore.java
public void addJavascriptInterface(Object object, String name) {
// 注册 Java 对象到 JS 引擎
mWebViewCore.addJavascriptInterface(object, name);
}3. 异步回调的处理机制
JS 调用原生方法时，原生方法返回值通过 ValueCallback 异步传递回 JS。例如：
webView.evaluateJavascript("javascript:doSomething()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
// 原生处理回调值
}
});七、进阶使用
1. 复杂数据结构传输
使用 Bundle 传输复杂数据结构时，需手动序列化为 JSON：
Bundle data = new Bundle();
data.putString("name", "John");
data.putInt("age", 30);
String json = new JSONObject(data).toString();
webView.evaluateJavascript("javascript:handleData(" + json + ")", null);2. 异步任务处理
原生调用 JS 时，避免阻塞主线程：
new Handler(Looper.getMainLooper()).post(new Runnable() {
@Override
public void run() {
webView.evaluateJavascript("javascript:doSomethingAsync()", null);
}
});3. 错误处理机制
在 JS 中添加错误捕获逻辑：
try {
Android.doSomething();
} catch (e) {
console.error("JS: Error occurred", e);
}八、性能与工程实践
1. 性能优化
- 减少不必要的调用：避免频繁调用
evaluateJavascript，可使用缓存机制。 - 批量处理数据：将多个 JS 调用合并为一次请求。
- 使用
Bundle替代String：减少 JSON 序列化/反序列化开销。
2. 异常处理
原生端需处理 JS 异常，避免崩溃：
webView.setWebContentsDebuggingEnabled(true);JS 端需捕获异常：
try { Android.doSomething(); } catch (e) { console.error("JS: Error occurred", e); }
3. 安全性考虑
- 防止 XSS 攻击：对用户输入进行转义处理。
- 限制接口权限：敏感接口需通过权限校验。
- 数据加密传输：对敏感数据使用 AES 加密。
4. 内存管理
- 避免在 JS 中持有原生对象的引用，防止内存泄漏。
原生端及时移除
JavascriptInterface：webView.removeJavascriptInterface("Android");
九、常见问题与踩坑
1. 接口未注册导致调用失败
错误示例：
webView.addJavascriptInterface(new JsBridge(), "Android"); // 忘记注册解决办法： 确保 addJavascriptInterface 调用在 WebView 初始化后执行。
2. 跨域问题
错误场景： 使用 WebView 加载外部网站时，JS 调用原生接口失败。
解决办法： 配置 WebView 的 setAllowFileAccess 和 setJavaScriptEnabled。
3. 异步回调未处理
错误示例：
webView.evaluateJavascript("javascript:doSomething()", null); // 忽略回调解决办法： 使用 ValueCallback 处理异步结果。
4. Android 版本兼容性问题
错误场景： 使用 evaluateJavascript 在 Android 4.2 以下版本崩溃。
解决办法： 检查 Android 版本，使用 loadUrl 替代：
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
webView.evaluateJavascript("...", null);
} else {
webView.loadUrl("javascript:...");
}十、最佳实践
- 优先使用
evaluateJavascript：兼容性更好，支持异步回调。 - 避免暴露敏感接口：对敏感操作进行权限校验。
- 使用
Bundle传输复杂数据：减少 JSON 序列化开销。 - 定期清理
JavascriptInterface：防止内存泄漏。 - 在 JS 端添加异常捕获：避免崩溃。
- 对用户输入进行转义处理：防止 XSS 攻击。
十一、总结
Android 原生与 JS 的交互是混合开发的核心技术，涉及复杂的底层机制和安全考量。通过 evaluateJavascript 和 addJavascriptInterface 实现双向通信，但需注意兼容性、性能和安全性问题。在实际项目中，合理使用这一技术可以提升开发效率，但需避免过度依赖导致的维护成本。通过本文的深度解析，开发者能够更好地理解其原理，规避常见陷阱，并在实际场景中做出最优选择。