当前位置：首页 > 行业动态 > 正文

安卓和js的交互

安卓与JS交互通过WebView实现，JS调用安卓需注入接口，安卓调用JS用evaluateJavascript，双向数据传递需JSON格式，注意线程安全

安卓与 JavaScript 交互基础

核心组件：WebView

  • 作用：在 Android 中展示网页内容，并支持与 JavaScript 交互。
  • 关键配置： 
    WebView webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true); // 启用 JS

交互方式分类

交互方向 方法 适用场景
安卓 → JavaScript webView.loadUrl("javascript:functionName()") 调用网页中的 JS 函数
JavaScript → 安卓 addJavascriptInterface(Object obj, String name) JS 调用安卓方法
双向数据传输 通过 shouldOverrideUrlLoading 拦截 URL 或 evaluateJavascript 复杂数据传递（如 JSON）

安卓调用 JavaScript 方法

直接调用简单函数

// 安卓代码
webView.loadUrl("javascript:alert('Hello from Android')");

传递参数与获取返回值

// 安卓代码（带参数）
String jsCode = "javascript:calculateSum(" + num1 + "," + num2 + ")";
webView.loadUrl(jsCode);
// JS 代码（网页内）
function calculateSum(a, b) {
    return a + b;
}

使用 evaluateJavascript（API 19+）

// 安卓代码（获取 JS 返回值）
webView.evaluateJavascript("document.title", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String title) {
        Log.d("Title", title);
    }
});

JavaScript 调用安卓方法

添加 JavaScript 接口

// 安卓代码
webView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
    }
}, "Android");

JavaScript 调用安卓方法

// JS 代码（网页内）
window.Android.showToast("Hello from JS");

进阶交互：通过 URL Scheme 传递数据

拦截 URL 并处理数据

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (url.startsWith("scheme://")) {
            // 解析自定义协议数据
            handleCustomScheme(url);
            return true; // 阻止默认加载
        }
        return false;
    }
});

JavaScript 触发自定义协议

// JS 代码（网页内）
window.location.href = "scheme://android?data=test";

安全与性能优化

问题 解决方案
addJavascriptInterface 安全风险 避免使用全局对象名，接口方法添加 @JavascriptInterface 注解（API 17+）
JavaScript 文件协议限制 将网页文件放在 assets/ 目录，并通过 WebView.loadUrl("file:///android_asset/index.html") 加载
内存泄漏 在 onDestroy 中销毁 WebView：webView.destroy()

相关问题与解答

问题 1：如何传递复杂对象（如 JSON）？

解答：

安卓和js的交互 第1张

  • 安卓 → JS：将对象转为 JSON 字符串，通过 loadUrl 或 evaluateJavascript 传递。 
    JSONObject json = new JSONObject();
json.put("key", "value");
webView.evaluateJavascript("handleData(" + json.toString() + ")", null);
  • JS → 安卓：JS 将对象转为 JSON 字符串，通过自定义协议或 prompt()（配合 onJsPrompt）传递。

问题 2：如何实现异步回调（如 JS 获取安卓方法结果）？

解答：

  1. JS 调用安卓方法时传递回调 ID： 
    window.Android.getData(successCallback); // successCallback 是 JS 函数名
  2. 安卓处理后通过 loadUrl 调用回调： 
    public void getData(String callbackId) {
    String result = "{\"data\":\"value\"}";
    webView.loadUrl("javascript:" + callbackId + "(" + result + ")");
}
  3. JS 定义回调函数： 
    function successCallback(data) {
    console.log(data);
}
0

相关文章