开发者视角:宿主应用里的 WebView 怎么渲染页面
最小使用示例
WebView webView = new WebView(this);
webView.setWebViewClient(new WebViewClient());
webView.loadUrl("https://example.com");
setContentView(webView);
四行代码完成嵌入:创建实例 → 指定客户端(让 URL 在 WebView 内打开而非跳浏览器)→ 加载 URL → 放到界面上。
渲染流程拆解
① App 调用 loadUrl("https://example.com")
↓
② android.webkit.WebView 类(Framework 层)
把请求通过 IPC 发给 WebView APK 的 Browser 进程
↓
③ Browser 进程创建 Render 进程(独立于 App)
↓
④ Render 进程:Blink 解析 HTML/CSS → V8 执行 JS → 布局 → 绘制
↓
⑤ GPU 进程合成画面 → 通过 SurfaceFlinger 回到 App 的 View 树
整个过程对 App 开发者透明——你拿到的是一个普通 View,可以像放 Button 一样放到布局里。
WebSettings 可配置的维度
宿主 App 能通过 WebSettings 控制 WebView 的行为,常用项:
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true); // 开启 JS(默认关闭!)
settings.setDomStorageEnabled(true); // LocalStorage / SessionStorage
settings.setLoadWithOverviewMode(true); // 按 WebView 宽度缩放
settings.setUseWideViewPort(true); // 尊重 viewport meta
settings.setAllowFileAccess(false); // 禁止 file:// 访问(安全)
settings.setMixedContentMode(...); // HTTP/HTTPS 混合内容策略
注意:这些设置不影响 Chrome,只影响当前 WebView 实例。不同 App 可以各自配置各自的 WebView 行为。
与独立浏览器的区别(开发者关心的)
| 能力 | WebView | Chrome for Android |
|---|---|---|
| 地址栏 / 前进后退按钮 | 无(App 自己实现) | 有 |
| Cookie / 历史记录 | App 调用 API 控制 | 用户直接管理 |
| 新窗口打开 | 默认跳浏览器,可拦截 | 标签页 |
| 权限请求(相机、麦克风) | App 自行实现 onPermissionRequest | 浏览器自己处理 |
| Google Sync | 不可用 | 完整支持 |
| 远程调试 | chrome://inspect 连接 | 同左 |
JS 桥接
WebView 最强大的特性之一——JS 和 Java/Kotlin 互相调用:
// Java 暴露给 JS
webView.addJavascriptInterface(new Bridge(), "AndroidBridge");
// JS 里调用
// window.AndroidBridge.sendToApp("hello from webview")
反向调用:
webView.evaluateJavascript("document.title", value -> {
Log.d("WebView", "网页标题:" + value);
});
这套桥接是微信小程序、支付宝 H5 页面、游戏内商店等场景的底层基础。
→ 继续阅读:WebView 不是浏览器的具体表现