1.创建一个空项目

用Android studio创建一个空项目
在这里插入图片描述

2. 初始化项目

将项目设置成project视图
在这里插入图片描述
点击src，选择new，新建一个文件夹

选择main\assets

将html文件放在该目录下（css、js等也都一起放过来）

3.编写代码

完整代码在后边，看第5部分。这里的只是为了便于划分代码功能

3.1 java调用js

java代码

button.setOnClickListener(view -> {
    webView.loadUrl("javascript:responseJava('java调用js')");
});

JavaScript代码

function responseJava(str) {
	$("#show").html(str)
}

3.2 js调用java

javascript代码

// 从js调用java方法
function requestJava(){
	// 调用Java方法
	window.AndroidToast.show(info)
}

java代码

public class AndroidToast {
    /**
     * 展示弹窗
     * @param str html页面返回的输入的文本数据
     */
    @JavascriptInterface
    public void show(String str) {
        Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
    }
}

4.运行

4.1 java调用js

点击调用js按钮，可以看到网页上的文本发生了变化
在这里插入图片描述

4.2 js调用java

点击调用java按钮后可以看到安卓弹出消息条显示文本框内容
在这里插入图片描述

5. 整体代码

html代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<script src="jquery-1.8.3.js"></script>
<script>
		// 从js调用java方法
		function requestJava(){
			info = $("#input_info").val()
			$("#input_info").val(info + 1)
			info = $("#input_info").val()

			// 调用java代码
			window.AndroidToast.show(info)
		}
		// 从java调用js方法
		function responseJava(str) {
			$("#show").html(str)
		}
	</script>
<body>
<input id="input_info" />
<button id="html_btn" onclick="requestJava()">调用java</button>
<p id="show">暂无调用</p>
</body>
</html>

效果如下图：
在这里插入图片描述

主页面布局文件

<?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/web_view"
        android:layout_width="match_parent"
        android:layout_height="500dp" />

    <Button
        android:id="@+id/call_js"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="调用js" />
</LinearLayout>

效果如下图：
在这里插入图片描述

主活动java代码

package priv.happy.java_js_eachother;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
		
        WebView webView = findViewById(R.id.web_view);
        // 加载网页
        webView.loadUrl("file:///android_asset/index.html");
       // 初始化
        WebSettings webSettings = webView.getSettings();
        // 允许js
        webSettings.setJavaScriptEnabled(true);
        // 设置默认字符编码
        webSettings.setDefaultTextEncodingName("UTF-8");
        // 添加js接口
        webView.addJavascriptInterface(new AndroidToast(), "AndroidToast");

        Button button = findViewById(R.id.call_js);
        button.setOnClickListener(view -> {
            webView.loadUrl("javascript:responseJava('java调用js')");
        });
    }
    // 自定义的消息提示类
    //  @JavascriptInterface：作用是把AndroidToast类映射为Javascript中的AndroidToast对象
    public class AndroidToast {
        /**
         * 展示弹窗
         * @param str html页面返回的输入的文本数据
         */
        @JavascriptInterface
        public void show(String str) {
            Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
        }
    }
}