WebView介绍-马育民老师

# 介绍

**WebView** 是通用名词：**嵌入式网页渲染组件**。
将浏览器内核（渲染引擎+JS引擎）封装为控件，嵌入原生应用窗口内，无需唤起系统独立浏览器，直接渲染 HTML/CSS/JavaScript。
它只保留浏览器核心解析、渲染、脚本执行能力；**默认没有地址栏、前进后退按钮、书签等浏览器UI**，全部行为由宿主程序控制。

> 通俗类比：
独立浏览器 = 完整电视机；
WebView = 电视主板（显示画面能力），交给别的设备自由嵌入使用。

# 通用能力

所有平台WebView共有特性

1. **资源加载**
支持远程URL网页、本地HTML文本、本地静态资源；可配置基础路径、虚拟域名。

2. **JS双向通信（JSBridge）**
- 网页 JavaScript → 调用原生应用接口（获取设备信息、读写文件、调用硬件、弹窗、支付）
- 原生应用 → 主动执行网页JS函数、向前端推送事件数据

3. **页面生命周期监听**
捕获开始加载、资源请求、DOM就绪、页面完成、加载失败、证书错误、URL跳转拦截。

4. **脚本注入**
页面加载前后注入自定义JS、CSS，修改页面DOM、拦截广告、替换页面逻辑。

5. **网络控制**
拦截/修改HTTP请求头、重定向地址、自定义返回响应；支持Cookie、HTTP缓存、LocalStorage、IndexedDB。

6. **交互能力**
网页弹窗、文件上传下载、打印、视频音频播放、手势滚动、缩放。

7. **独立存储隔离**
每个WebView实例拥有独立缓存空间：Cookie、本地存储、网站权限；支持“无痕模式”，关闭自动清空所有数据。

# 各大操作系统平台原生WebView实现

> ⚠️ **WebView2 ≠ WebView通用名称**
> WebView2 专指 **Windows平台基于Edge Chromium的WebView实现**，只是众多WebView中的一员。

### 1. Android：Android WebView
- 内核：Android 4.4起采用 **Blink（Chromium）+ V8引擎**；4.4以前老旧WebKit，现已淘汰。
- 载体：`android.webkit.WebView`
- 更新机制：独立APK「Android System WebView」，由Google Play单独升级；**不同手机系统版本内核版本参差不齐（碎片化）**。
- 进程模型：Android 8.0 之后使用独立沙箱渲染进程；8.0之前运行在App主进程，网页崩溃直接造成App闪退。
- 两套核心回调：
  - WebViewClient：页面加载、URL拦截、错误处理
  - WebChromeClient：弹窗、加载进度、标题、文件选择、JS弹窗

### 2. iOS：WKWebView（新标准）
- 旧版：UIWebView（WebKit，内存差、性能弱，苹果已废弃）
- 新版推荐：**WKWebView**
- 内核：WebKit + JavaScriptCore（与Safari完全同一套内核）
- 关键限制：**内核跟随iOS系统版本，无法独立升级**；系统版本决定网页兼容性，开发者无法自带新版本内核。
- 架构：天然多进程隔离，渲染进程独立，稳定性优于旧UIWebView；权限管控严格。
- 通信方式：推荐 ScriptMessageHandler（消息通道），不建议使用过时注入方案。

### 3. Windows 桌面端：WebView2（Microsoft Edge WebView2）

于Windows平台WebView实现：

- 内核：Edge Chromium（Blink+V8）
- 两种部署模式：常青模式（共用系统Runtime）、独立打包模式（内置完整内核）
- 面向WPF、WinForms、C++、Delphi等Windows原生桌面程序

### 4. macOS
原生使用 **WKWebView**，和iOS同源 WebKit；基于Safari内核。

### 5. 鸿蒙（HarmonyOS）ArkWeb
自研改造Chromium内核，对标Android WebView，API设计接近，提供网页嵌入能力。

# 典型应用场景
1. **混合App（Hybrid）**
App部分页面使用H5开发，热更新无需应用商店发版（活动页、帮助文档、资讯）。

2. **小程序容器底层**
微信小程序、各类小程序内核本质就是封装后的WebView。

3. **桌面软件内嵌网页界面**
Windows客户端采用WebView2，macOS使用WKWebView，用Vue/React开发客户端界面。

4. **软件内置帮助文档、交互式报表、网页表单**

5. **自动化爬虫、网页测试工具、内网管理系统客户端**

# WebView优势

1. **开发成本低**：复用前端技术栈，一套网页同时支持移动端、桌面端。
2. **支持动态更新**：网页资源放在服务器，修改页面不用打包更新App。
3. **标准兼容性强**：支持HTML5、WebGL、WebAssembly、现代JS语法。
4. **界面灵活**：复杂交互、动画、可视化更容易通过Web实现。

# WebView固有的短板

1. **性能损耗**
相比纯原生控件，存在渲染开销；复杂长列表、高频动画容易出现卡顿。

2. **兼容性碎片化痛点**
Android：不同机型WebView内核版本差异巨大；
iOS：内核锁定系统版本，低版本系统不支持新Web标准。

3. **内存占用偏高**
启动WebView会初始化完整浏览器引擎；如果不规范销毁极易造成内存泄漏、OOM。

4. **系统能力受限**
JS不能直接调用底层硬件，所有相机、蓝牙、文件访问必须由原生层开放接口。

5. **安全风险天然存在**
如果对外开放JSBridge，恶意网页可利用暴露接口访问本地资源。

4. **优先使用HTTPS，关闭不安全混合HTTP资源加载**

# 概念区分：容易混淆的同类技术
### 1. WebView（系统原生控件） vs CEF（Chromium Embedded Framework）
- WebView：操作系统自带组件，复用系统浏览器内核；Windows对应WebView2、iOS/macOS WKWebView、Android WebView。体积小、部署简单；但内核版本受系统限制。
- CEF：第三方开源框架，开发者可以把完整Chromium内核打包进程序；跨Windows/macOS/Linux；包体积巨大。

### 2. WebView vs Electron
Electron = Chromium完整内核 + Node.js；自带浏览器内核，不依赖系统WebView，体积数百MB。
而 Tauri：**优先调用操作系统原生WebView**，安装包体积极小。

### 3. WebView2 和通用WebView
WebView2 **仅Windows平台可用**，是WebView的其中一个实现；Android/iOS没有WebView2，不要把两个名词混用。

原文出处：http://malaoshi.top/show_1GW3iqkHM6oc.html