WebView中JS调用Java方法的完整教程-嘻道妙招

你是不是正在开发一个安卓App，里面嵌入了H5页面，然后发现??H5里的JS代码需要调用安卓原生的功能??？比如调个相机、弹个Toast，或者读取本地文件？别急，今天咱们就彻底搞懂??WebView里JS怎么调Java方法??，保证让你看完就能上手！

一、为什么要在WebView里让JS调Java？

先搞清楚需求！??WebView??就是个“浏览器控件”，可以加载网页。但有时候，H5页面需要：
? ??调用手机硬件??（比如相机、GPS）
? ??使用原生功能??（比如安卓的Toast提示）
? ??读取本地数据??（比如SharedPreferences）

??问题来了??：JS在浏览器环境里跑，Java在安卓原生环境跑，??它俩咋通信？??

答案就是——??JSBridge??！

二、最基础的JS调Java方法（@JavascriptInterface）

1. Java端：暴露方法给JS

首先，你得在安卓端写个类，把方法暴露给JS：

java复制// 这个类专门用来和JS通信
public class JSBridge {
    private Context context;

    public JSBridge(Context context) {
        this.context = context;
    }

    // 关键注解！没这个JS调不了
    @JavascriptInterface  
    public void showToast(String message) {
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
    }

    // 再写个复杂点的，带返回值
    @JavascriptInterface
    public String getDeviceInfo() {
        return "手机型号：" + Build.MODEL;
    }
}

2. WebView设置：绑定JSBridge

然后，在WebView里把这个类绑定到JS环境：

java复制WebView webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true); // 必须开JS支持！

// 把JSBridge对象绑定到window.androidBridge
webView.addJavascriptInterface(new JSBridge(this), "androidBridge");

// 加载你的H5页面
webView.loadUrl("file:///android_asset/index.html");

3. JS端：直接调用Java方法

最后，在H5的JS代码里就能这么调：

javascript复制// 调用showToast方法
window.androidBridge.showToast("我是JS，我在调安卓原生方法！");

// 调用getDeviceInfo，还能拿到返回值
const deviceInfo = window.androidBridge.getDeviceInfo();
console.log(deviceInfo);

??搞定！?? 就这么简单~

三、进阶技巧：参数传递和回调处理

1. 传复杂参数（JSON）

Java方法支持接收String，那如果JS想传个对象怎么办？??转JSON字符串呗！??

javascript复制// JS端：传对象
const user = { name: "张三", age: 18 };
window.androidBridge.handleUserData(JSON.stringify(user));

java复制// Java端：解析JSON
@JavascriptInterface
public void handleUserData(String userJson) {
    JSONObject json = new JSONObject(userJson);
    String name = json.getString("name");
    int age = json.getInt("age");
    // 处理逻辑...
}

2. Java回调JS（evaluateJavascript）

有时候Java处理完还得通知JS，咋办？用webView.evaluateJavascript：

java复制// Java端：执行JS代码
webView.evaluateJavascript("javascript:jsCallback('处理完成')", null);

javascript复制// JS端：提前定义好回调函数
function jsCallback(result) {
    alert("Java说：" + result);
}

四、安全性问题（必看！）

??? 警告??：随便让JS调Java方法可能会被黑客利用！比如：

? 错误示范：暴露删除文件的方法

java复制@JavascriptInterface
public void deleteFile(String path) {
    new File(path).delete(); // 危险！JS可以任意删文件
}

??? 正确做法??：

??限制方法权限??（比如只读操作）
??校验参数??（防止恶意路径）
??不要暴露敏感操作??（比如支付、删库）

五、实际案例：JS调安卓相机

假设H5页面有个按钮，点击后调用安卓相机拍照：

1. Java端代码

java复制@JavascriptInterface
public void openCamera() {
    Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
    ((Activity)context).startActivityForResult(intent, 100);
}

2. JS端代码

javascript复制document.getElementById("cameraBtn").onclick = function() {
    window.androidBridge.openCamera();
};

??效果??：点击H5按钮 → 直接打开安卓相机！

六、常见坑点排查

问题现象	可能原因	解决方案
??JS调用没反应??	没加`@JavascriptInterface`注解	检查Java方法是否有注解
??报错：undefined??	WebView未绑定JSBridge对象	检查`addJavascriptInterface`
??安卓4.2以下崩溃??	漏洞防护机制触发	方法名不要带"alert"等关键词
??参数传递失败??	没转JSON或格式错误	JS用`JSON.stringify`处理

个人观点

其实WebView的JSBridge就像??两个语言之间的翻译官??：

??JS说??：“帮我弹个Toast！”
??Java听懂了??：“好嘞，马上办！”

刚开始可能觉得配置麻烦，但用顺手后你会发现——??混合开发真香！?? 既能用H5快速迭代，又能享受原生功能，妥妥的“双赢”~

最后记住：??安全第一！?? 别让JS随便调敏感方法，不然你的App可能分分钟变“肉鸡”。好了，快去试试吧！

本文由嘻道妙招独家原创，未经允许，严禁转载

WebView中JS调用Java方法的完整教程