study_WebView介绍
文章目录
- 前言
- 01.学习概述
- 1.1 学习目标
- 1.2 前置知识
- 02.核心概念
- 2.1 是什么?
- 2.2 解决什么问题?
- 2.3 基本特性
- 03.原理机制
- 3.1 进一步思考
- 3.2 进一步思考
- 3.3 进一步思考
- 3.4 进一步思考
- 04.底层原理
- 05.深度思考
- 5.1 关键问题探究
- 5.2 设计对比
- 06.实践验证
- 6.1 行为验证代码
- 6.2 性能测试
- 07.应用场景
- 7.1 最佳实践
- 7.2 使用禁忌
- 08.总结提炼
- 8.1 核心收获
- 8.2 知识图谱
- 8.3 延伸思考
- 09.参考资料
- 其他介绍
- 01.关于我的博客
前言
学习要符合如下的标准化链条:了解概念->探究原理->深入思考->总结提炼->底层实现->延伸应用"
01.学习概述
- 学习主题:WebView
- 知识类型:
- 知识类型:
- ✅Android/
- ✅01.基础组件
- ✅02.IPC机制
- ✅03.消息机制
- ✅04.View原理
- ✅05.事件分发机制
- ✅06.Window
- ✅07.复杂控件
- ✅08.性能优化
- ✅09.流行框架
- ✅10.数据处理
- ✅11.动画
- ✅12.Groovy
- ✅音视频开发/
- ✅01.基础知识
- ✅02.OpenGL渲染视频
- ✅03.FFmpeg音视频解码
- ✅ Java/
- ✅01.基础知识
- ✅02.Java设计思想
- ✅03.集合框架
- ✅04.异常处理
- ✅05.多线程与并发编程
- ✅06.JVM
- ✅ Kotlin/
- ✅01.基础语法
- ✅02.高阶扩展
- ✅03.协程和流
- ✅Android/
- 知识类型:
- 学习来源:主线云值守模块中使用到H5界面,点击某个位置后会调用我们原生显示
- 重要程度:⭐⭐⭐⭐⭐(核心基础)
- 学习日期:2025.07.08
- 记录人:@panruiqi
1.1 学习目标
- 了解概念->探究原理->深入思考->总结提炼->底层实现->延伸应用"
1.2 前置知识
- [05. study_JSBridge机制.md](05. study_JSBridge机制.md)
02.核心概念
2.1 是什么?
Android中的一个组件,允许你在应用中内嵌一个浏览器内核,用于显示网页内容
2.2 解决什么问题?
- 原生Android开发每次内容更新都要去打包,上线。而WebView只需要更新H5,然后通过loadUrl内嵌显示即可。
- 跨平台,原生Android不能用在IOS上,但是WebView中H5则是两者都可以使用
- 有些复杂的交互,显示逻辑使用H5更容易。
2.3 基本特性
03.原理机制
3.1 进一步思考
基础使用
-
xml引用
-
<WebViewandroid:id="@+id/webView"android:layout_width="match_parent"android:layout_height="match_parent" />
-
-
代码中实际配置
-
val webView = findViewById<WebView>(R.id.webView)// 启用 JS webView.settings.javaScriptEnabled = true// 支持缩放 webView.settings.setSupportZoom(true) webView.settings.builtInZoomControls = true webView.settings.displayZoomControls = false// 适应屏幕 webView.settings.useWideViewPort = true webView.settings.loadWithOverviewMode = true// 允许混合内容(https 页面加载 http 资源,Android 5.0+) if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {webView.settings.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW }// 其他常用设置 webView.settings.domStorageEnabled = true webView.settings.cacheMode = WebSettings.LOAD_DEFAULT
-
-
加载网页
-
webView.loadUrl("https://www.example.com")webView.loadUrl("file:///android_asset/test.html")
-
-
处理网页内部的跳转:默认情况下,点击网页中的链接会跳转到外部浏览器。要在 WebView 内部处理跳转,需要设置 WebViewClient
-
webView.webViewClient = object : WebViewClient() {override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {// 在 WebView 内部加载url?.let { view?.loadUrl(it) }return true // 表示拦截,自己处理} }
-
-
原生调JS
-
// 推荐方式(有回调) webView.evaluateJavascript("javascript:jsFunction('param')") { result ->// 处理 JS 返回值 }// 兼容旧版 webView.loadUrl("javascript:jsFunction('param')")
-
-
JS调用Java
-
//注册JS接口 class JsBridge {@JavascriptInterfacefun showToast(msg: String) {Toast.makeText(context, msg, Toast.LENGTH_SHORT).show()} }webView.addJavascriptInterface(JsBridge(), "androidBridge")//JS端调用 window.androidBridge.showToast("Hello from JS!");
-
3.2 进一步思考
loadUrl到底做了什么?为什么url对应页面可以被渲染到webView上。Android底层如何实现的这种类似浏览器的效果?
-
Java 层调用 loadUrl
- 通过 JNI 通知 Native 层的 Chromium/Blink 内核。
-
Chromium 内核处理
- 发起网络请求,下载网页内容。
- 解析 HTML,构建 DOM、CSSOM,执行 JS。
- 生成渲染树,布局、绘制。
-
渲染输出
- 渲染结果通过 GPU/CPU 生成位图。
- 位图通过 Surface/Canvas 传递给 Android 的 View 体系。
-
WebView 作为普通 View,最终由 Android 系统合成到屏幕上。
3.3 进一步思考
Surface是什么? [05. study_surface.md](05. study_surface.md)
3.4 进一步思考
webView如何优化?
- https://juejin.cn/post/6844903481120129031?searchId=20250708205355EB18E92F25D8A2D73FD7
04.底层原理
依赖于浏览器内核。具体原理参考3.2
05.深度思考
5.1 关键问题探究
5.2 设计对比
06.实践验证
6.1 行为验证代码
6.2 性能测试
07.应用场景
7.1 最佳实践
7.2 使用禁忌
08.总结提炼
8.1 核心收获
8.2 知识图谱
8.3 延伸思考
09.参考资料
其他介绍
01.关于我的博客
-
csdn:http://my.csdn.net/qq_35829566
-
掘金:https://juejin.im/user/499639464759898
-
github:https://github.com/jjjjjjava
-
邮箱:[934137388@qq.com]