在移动应用开发中，手机网页应用（也称为Hybrid应用）结合了Web和原生应用的优点。其中，Android WebView组件允许在Android应用中嵌入网页内容。为了实现JavaScript与Android WebView的无缝互动，我们需要掌握一系列的技术和方法。以下是一份详细的指南，帮助你实现这一目标。

1. WebView的基本配置

首先，确保你的Android项目中已经添加了WebView组件。在你的build.gradle文件中，添加以下依赖：

dependencies {
    implementation 'androidx.webkit:webkit:1.4.0'
}

接下来，在Activity或Fragment中初始化WebView：

WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://www.example.com");

2. JavaScript与WebView的交互

2.1 从JavaScript调用Java方法

为了从JavaScript中调用Java方法，你需要使用addJavascriptInterface方法将一个Java对象暴露给JavaScript：

webView.addJavascriptInterface(new WebAppInterface(), "Android");

创建WebAppInterface类：

public class WebAppInterface {
    @JavascriptInterface
    public void showalert(String message) {
        Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show();
    }
}

在JavaScript中调用此方法：

Android.showalert('Hello from JavaScript!');

2.2 从Java调用JavaScript方法

要调用JavaScript中的方法，你可以使用evaluateJavascript方法：

webView.evaluateJavascript("javascript:showAlert()", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        // 处理返回值
    }
});

// 定义JavaScript方法
webView.loadUrl("javascript:(function() { function showAlert() { alert('Hello from Java!'); } window.showAlert(); })();");

2.3 传递数据

你可以使用JSON对象在JavaScript和Java之间传递复杂数据：

webView.evaluateJavascript("javascript:handleData(" + json.toString() + ")", null);

在JavaScript中处理数据：

function handleData(data) {
    // 处理传入的数据
}

3. 处理跨域请求

如果JavaScript需要与服务器进行跨域请求，你需要确保你的服务器支持CORS（跨源资源共享）。在服务器响应头中添加以下字段：

Access-Control-Allow-Origin: *

或者指定特定的域名：

Access-Control-Allow-Origin: https://www.example.com

4. 性能优化

  • 开启JavaScript的缓存机制，避免重复加载相同资源。
  • 使用Web Workers进行耗时的JavaScript计算，避免阻塞UI线程。
  • 优化JavaScript代码，减少DOM操作和循环。

5. 安全注意事项

  • 不要随意将敏感信息通过JavaScript暴露给WebView。
  • 对所有从WebView传入的数据进行验证和清洗，防止XSS攻击。
  • 使用Content Security Policy（CSP）限制资源加载，提高安全性。

通过以上步骤，你可以实现JavaScript与Android WebView的无缝互动，为用户提供更加丰富和流畅的移动网页应用体验。