如何在安卓应用中实现调用JavaScript方法的示例？
Android调用JS方法Demo
一、简介
在现代移动应用开发中，Android和JavaScript的交互变得非常常见，通过WebView组件，Android应用可以加载网页内容并实现与网页的交互，本文将详细介绍如何在Android中调用JavaScript方法，并提供具体的代码示例和步骤说明。
二、准备工作
1. 创建Android项目
创建一个Android项目并在res/layout文件夹下创建一个布局文件activity_main.xml，包含一个WebView和一个按钮。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="调用JS方法"/>
</LinearLayout>2. 添加本地HTML文件
在app/src/main/assets目录下创建一个名为show.html的HTML文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
function test() {
document.getElementById("p").innerHTML += " 你好！";
}
</script>
</head>
<body>
<p id='p'>hello world</p>
<button onclick="justTest.hello('js调用安卓方法！')">调用安卓方法</button>
</body>
</html>三、实现步骤
1. 初始化WebView并加载本地HTML文件
在MainActivity中初始化WebView并加载本地HTML文件：
import android.os.Bundle;
import android.webkit.WebView;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
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);
webView.getSettings().setJavaScriptEnabled(true); // 启用JavaScript支持
webView.loadUrl("file:///android_asset/show.html"); // 加载本地HTML文件
}
}2. 定义按钮点击事件以调用JavaScript方法
在MainActivity中定义按钮点击事件，通过evaluateJavascript方法调用JavaScript方法：
Button btn = findViewById(R.id.btn);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
callJs();
}
});在MainActivity中实现callJs方法：
@SuppressLint("SetJavaScriptEnabled")
public void callJs() {
webView.evaluateJavascript("test()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
// 处理返回值（如果有）
}
});
}3. JavaScript调用Android方法
在MainActivity中定义一个被JavaScript调用的方法，并使用@JavascriptInterface注解：
@JavascriptInterface
public void hello(String msg) {
Toast.makeText(this, msg, Toast.LENGTH_SHOR).show();
}在MainActivity中绑定JavaScript接口对象：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true); // 启用JavaScript支持
webView.addJavascriptInterface(this, "justTest"); // 绑定JavaScript接口对象
webView.loadUrl("file:///android_asset/show.html"); // 加载本地HTML文件
}这样，当在HTML文件中点击按钮时，会调用Android中的hello方法并显示Toast消息。
1. 归纳
通过以上步骤，我们实现了在Android中调用JavaScript方法以及在JavaScript中调用Android方法的功能，这主要依赖于WebView组件和JavaScript接口的相互绑定，在实际开发中，可以根据需求传递参数并进行更复杂的交互操作。
2. 注意事项
安全性：在使用addJavascriptInterface时要注意安全性问题，避免暴露敏感接口给网页。
跨域问题：如果加载远程网页，需要注意处理跨域访问的问题。
兼容性：不同版本的Android系统对WebView的支持可能有所不同，需要进行充分测试。
五、相关问题与解答栏目
问题1：如何在Android中调用带有参数的JavaScript方法？
答：可以通过evaluateJavascript方法传递参数，要调用sum(6, 11)，可以这样做：
webView.evaluateJavascript("sum(6, 11)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Toast.makeText(MainActivity.this, "返回值：" + value, Toast.LENGTH_SHORT).show();
}
});对应的JavaScript方法如下：
function sum(a, b) {
return a + b;
}问题2：如何在JavaScript中调用带有参数的Android方法？
答：可以在HTML中通过JavaScript接口对象调用Android方法并传递参数，定义以下Android方法：
@JavascriptInterface
public void showToastWithParam(String message) {
Toast.makeText(this, message, Toast.LENGTH_SHOR).show();
}然后在HTML中这样调用：
<button onclick="justTest.showToastWithParam('Hello from JS with parameter')">调用带参安卓方法</button>各位小伙伴们，我刚刚为大家分享了有关“安卓调用js方法demo”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！