一、Android 原生代码（Java/Kotlin）
// MainActivity.java
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); // 启用JS支持 [3,5](@ref)
webSettings.setDomStorageEnabled(true); // 启用DOM存储
// 注册JS接口（安全关键：限制暴露方法）
webView.addJavascriptInterface(new JsBridge(this), "AndroidBridge"); // "AndroidBridge" 是JS中调用的对象名 [1,4](@ref)
// 设置WebViewClient监听页面加载
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// 页面加载完成后调用JS函数
callJavaScriptFunction("onNativeReady()");
}
});
// 加载本地HTML（位于assets目录）
webView.loadUrl("file:///android_asset/index.html");
}
// 原生调用JS方法（兼容Android 4.4+）
private void callJavaScriptFunction(String jsCode) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
webView.evaluateJavascript(jsCode, null); // 高效无返回值调用 [6](@ref)
} else {
webView.loadUrl("javascript:" + jsCode); // 低版本兼容 [5](@ref)
}
}
// 自定义JS桥接类（必须用@JavascriptInterface标记暴露的方法）
public static class JsBridge {
private Context context;
public JsBridge(Context context) {
this.context = context;
}
@JavascriptInterface
public void showToast(String message) {
// 原生功能：显示Toast
Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
}
@JavascriptInterface
public String getDeviceModel() {
// 返回设备型号给JS
return Build.MODEL;
}
}
// 避免内存泄漏
@Override
protected void onDestroy() {
webView.destroy();
super.onDestroy();
}
}二、HTML/JavaScript 代码（assets/index.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebView交互示例</title>
<script>
// 供原生调用的JS函数
function onNativeReady() {
document.getElementById("status").innerText = "页面加载完成！";
}
// JS调用原生方法（显示Toast）
function callNativeToast() {
AndroidBridge.showToast("Hello from JavaScript!"); // 通过AndroidBridge对象调用 [4](@ref)
}
// JS获取原生数据
function getDeviceInfo() {
const model = AndroidBridge.getDeviceModel();
document.getElementById("deviceInfo").innerText = `设备型号: ${model}`;
}
</script>
</head>
<body>
<h1>WebView交互演示</h1>
<p id="status">加载中...</p>
<button onclick="callNativeToast()">调用原生Toast</button>
<button onclick="getDeviceInfo()">获取设备信息</button>
<p id="deviceInfo"></p>
</body>
</html>所有暴露给 JS 的方法必须添加 @JavascriptInterface 注解，防止未授权访问