图解WebView -- (1) WebView概述

r囧r小猫 2024-03-26 22:09 71阅读 0赞

##### 前言 #####

目前各移动应用或多或少都内嵌了**Web网页**，在Android开发中，就不可避免的使用本系列的主角——**WebView**。

#### 一、WebView 是什么？ ####

![webapps示意图.png][webapps_.png]

*  **WebView**是Android **展示Web网页的控件**，类似于应用提供一个**内置的浏览器**，在应用内实现和浏览器一致的网页展示效果(如上图所示)。
 *  **WebView**基于开源的 `webkit` 引擎实现。
 *  从**Android 4.4**开始基于`Chromium`引擎实现（渲染性能提升）。

#### 二、 WebView 有什么用？ ####

*  除了具备一般View的特性外，`WebView`还可完成url请求、Web页面加载、渲染、页面交互等。
 *  直接加载html文件（网络上或本地assets中）作为页面布局。
 *  提供了`Android`应用和`JavaScript`通信交互的通道（**实现混合开发的基础**）。

#### 三、WebView的基本使用 ####

##### 3.1 应用权限配置 #####

*  访问网络数据，需要在`AndroidManifest`添加网络权限。

<uses-permission android:name="android.permission.INTERNET" />

##### 3.2 在布局文件中添加WebView控件 #####

##### 3.3 WebView网页加载 #####

*  以下例子为打开百度页面。
 *  由于网页中使用了`Javascript`，所以需要设置支持`Javascript`。

public final class Demo1Activity extends AppCompatActivity {
    
        private ActivityDemo1Binding binding;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            binding = ActivityDemo1Binding.inflate(getLayoutInflater());
            setContentView(binding.getRoot());
            //获取WebView设置对象
            WebSettings settings = binding.webview.getSettings();
            //设置支持JavaScript
            settings.setJavaScriptEnabled(true);
            binding.webview.loadUrl("https://www.baidu.com");
        }
    }

*  使用了`ViewBinding`，需要在`build.gradle`中加上以下配置

viewBinding {
            enabled = true
        }

#### 四、 WebView核心知识体系 ####

整个WebView应用开发核心知识体系，主要包含以下几大块：  
![WebView核心体系.png][WebView_.png]

##### 4.1 WebView提供的API #####

`WebView` 作为核心控件，其自身功能十分强大，提供了许多API，供开发调用。

##### 4.2 WebSettings #####

*  `WebSettings`是专门 对`WebView`控件配置和管理的类。

##### 4.3 WebViewClient #####

`WebViewClient`是**辅助`WebView`控件处理各种通知与请求事件的一个类**。

##### 4.4 WebChromeClient #####

`WebChromeClient`是**辅助`WebView`处理`Javascript`的对话框、网站图标、网站title、加载进度等的类**。

##### 4.5 Android与JS通信交互 #####

*  **实现混合开发的基础**，Web网页通过JS调用Android原生接口实现混合开发业务。

#### 参考资料 ####

*  [WebView(网页视图)基本用法][WebView]
 *  [Carson带你学Android：最全面、易懂的Webview使用教程][Carson_Android_Webview]
 *  [WebView Android 官方开发者指南][WebView Android]

[webapps_.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/76bfe5afb43f4a9e9292144076d0ccb6.png
[WebView_.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ba5a52567fc941c5a6de235c55e411f7.png
[WebView]: https://www.runoob.com/w3cnote/android-tutorial-webview.html
[Carson_Android_Webview]: https://www.jianshu.com/p/3c94ae673e2a
[WebView Android]: https://developer.android.google.cn/guide/webapps