Android Js与后台代码交互，实现HTML做安卓页面布局

准备工作

1.使用AS创建安卓Empty
2.使用Hbuilder创建HTML项目

ps:项目工程目录com.xxx.xxx用*.*.*代替，

AS中添加assets目录

选中项目模块如下如创建

ps: 创建出来的目录是assets;引用时是asset
格式规定为:file:///android_asset/mainWindow/index.html(最好添加二级目录，否则部分设备会出现读取失败)]

将HTML项目放入Assets目录下并按照上述格式获取路径
在AS的activity_main.xml中放入WebView

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <WebView
        android:id="@+id/wv_mainWindow"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

创建工具类

创建全屏程序工具类

import android.app.Activity;
import android.view.View;
import android.view.Window;

import kotlin.jvm.internal.Intrinsics;

public class Tools {
    public static void FullScreen(Activity activity) {
        Window var10000 = activity.getWindow();
        Intrinsics.checkNotNullExpressionValue(var10000, "window");
        View var1 = var10000.getDecorView();
        Intrinsics.checkNotNullExpressionValue(var1, "window.decorView");
        var1.setSystemUiVisibility(4102);
    }
}

创建Js和Android交互类

import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

public class AsJsInteraction {
    Context context;

    public AsJsInteraction(Context c) {
        context = c;
    }

    /**
     * 与js交互时用到的方法，在js里直接调用的
     */
    @JavascriptInterface
    public void click(String str) {
        Toast.makeText(context, str, Toast.LENGTH_LONG).show();
    }
}

在HTML中使用如下标记调用

<button type="button" class="btn" id="btn1" onclick="window.android.click('button1')">button1</button>

与下文webView.addJavascriptInterface(new AsJsInteraction(context), “android”); // 添加Js交互借口
对应

创建WebView初始化类

未使用拦截弹窗方法，写出来方便日后使用
本次交互用到的是webView.addJavascriptInterface(new AsJsInteraction(context), “android”); // 添加Js交互借口
参考链接：https://blog.csdn.net/carson_ho/article/details/64904691

import android.annotation.SuppressLint;
import android.content.Context;
import android.net.Uri;
import android.view.View;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

import java.util.HashMap;
import java.util.Set;

import *.*.*.AsJsInteraction.AsJsInteraction;

public class WebViewInit {

    @SuppressLint("SetJavaScriptEnabled")   // 忽略WebView中启用JavaScript的警告
    public static void SetWebView(Context context, WebView webView, String str){
        webView.addJavascriptInterface(new AsJsInteraction(context), "android");    // 添加Js交互借口
        webView.getSettings().setJavaScriptEnabled(true);   // 设置与Js交互
        webView.getSettings().setDomStorageEnabled(true);   // 开启DomStorage缓存
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);   // 设置允许Js弹窗
        webView.getSettings().setBlockNetworkImage(true);   // 不加载网络上的图片资源
//        webView.loadUrl("file:///android_asset/JsMainWindow\\index.html");  // 格式规定为:file:///android_asset/文件名.html
        webView.loadUrl(str);  // 格式规定为:file:///android_asset/文件名.html
        webView.setOnLongClickListener(new View.OnLongClickListener() { // 禁止长按事件
            @Override
            public boolean onLongClick(View v) {
                return true;    // 默认为false
            }
        });
        webView.setWebChromeClient(new MyWebChromeClient());
    }

    private static class MyWebChromeClient extends WebChromeClient {
        /**
         * 拦截Alert
         * @param view
         * @param url
         * @param message
         * @param result
         * @return
         */
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            return super.onJsAlert(view, url, message, result);
        }

        /**
         * 拦截Confirm
         * @param view
         * @param url
         * @param message
         * @param result
         * @return
         */
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            return super.onJsConfirm(view, url, message, result);
        }

        /**
         * 拦截输入框(原理同方式2)
         * @param view .
         * @param url .
         * @param message   参数message:代表promt（）的内容（不是url）
         * @param defaultValue .
         * @param result    参数result:代表输入框的返回值
         * @return .
         */
        @Override
        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
            return super.onJsPrompt(view, url, message, defaultValue, result);
        }
    }
}

使用上述创建类 完成Android与Js交互

MainActivity.kt

使用了viewBinding 参考链接：https://blog.csdn.net/shulianghan/article/details/105044345/

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import *.*.*.Tools.Tools
import *.*.*.Tools.WebViewInit
import *.*.*.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
//        setContentView(R.layout.activity_main)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        Tools.FullScreen(this)
        WebViewInit.SetWebView(this, binding.wvMainWindow, "file:///android_asset/JsMainWindow/index.html")
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <WebView
        android:id="@+id/wv_mainWindow"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>