一、基本使用

1、使用WebView标签

布局文件代码修改如下activity_main.xml

<WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

2、修改入口函数

找到入口函数文件MainActivity.java

    protected WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.webview);
        webView.loadUrl("https://www.baidu.com/");//加载url
        webView.setWebViewClient(new WebViewClient());// 防止调用外部浏览器
        webView.setWebChromeClient(new WebChromeClient());// alert弹窗需要
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);//设置js可以直接打开窗口，如window.open()，默认为false
        webView.getSettings().setJavaScriptEnabled(true);//是否允许执行js，默认为false。设置true时，会提醒可能造成XSS漏洞
        webView.getSettings().setSupportZoom(true);//是否可以缩放，默认true
        webView.getSettings().setBuiltInZoomControls(true);//是否显示缩放按钮，默认false
        webView.getSettings().setUseWideViewPort(true);//设置此属性，可任意比例缩放。大视图模式
        webView.getSettings().setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一起解决网页自适应问题
        webView.getSettings().setAppCacheEnabled(true);//是否使用缓存
        webView.getSettings().setDomStorageEnabled(true);//DOM Storage
    }

3、添加网络访问权限

找到安卓项目配置文件，添加加网络访问权限 AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.dshvv.myapplication">
    <uses-permission android:name="android.permission.INTERNET" /><!-- 增加这一行: 允许app访问网络-->
  <application
        android:usesCleartextTraffic="true" <!-- 增加这一行: 允许明文请求,即http-->
  ...

最后重新编译，运行，就可以啦

二、js访问andriod方法

1、向前端window中注入全局变量

webView.addJavascriptInterface(new WebAppInterface(this), "demoApp");

第一个参数是与web通讯的自定义类，第二个参数是注入前端页面的变量名字

2、创建与web通讯的自定义类

/**
 * 向浏览器window中注入的全局变量类（前端接收到的是个对象）
 */
public class WebAppInterface {
    private MainActivity app;
    public WebAppInterface(MainActivity app) {
        this.app = app;
    }
    /**
     *对象中的成员
     */
    @JavascriptInterface
    public void method(String param) {
        Toast.makeText(app.getApplicationContext(), "默认的Toast", Toast.LENGTH_SHORT).show();
    }
}

3、前端调用

<script>
        demoApp.method('你好，世界')
</script>

三、andriod访问js方法

1、安卓页面中定一个按钮，及其按钮事件

<Button
        android:id="@+id/button"
        android:onClick="btnClick"
        android:layout_width="200dp"
        android:text="我是安卓原生按钮"
        android:layout_height="50dp"/>

public void btnClick(View view){
        webView.post(new Runnable() {
            @Override
            public void run() {
                // 调用javascript的callJS()方法
                webView.loadUrl("javascript:test('你好，世界')");
            }
        });
}

2、web前端定义此方法

 <script>
        const test = (params)=>{
            alert(params)
        }
</script>

四、web前端和原生前端的交互
总的来说比较方便，cordova等jsBirdge方式，也能够让两种开发者更好的沟通。
aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzk0NDM2NS0yOWM2YTQ2YzgxMzA0ZjRmLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwJTdDaW1hZ2VWaWV3Mi8yL3cvMTI0MA.png

五、chrome调试webview

1、放开调试

首先安卓代码的onCreate要增加如下代码，放开调试

 if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
     WebView.setWebContentsDebuggingEnabled(true);
 }

2、前端访问

浏览器输入 chrome://inspect/#devices

注意：如果出现HTTP/1.1 404 Not Found。科学上网访问再刷新就好了

参考：https://blog.csdn.net/carson_ho/article/details/64904691/

四、嵌套网页