study_WebView介绍-EW帮帮网

文章目录

前言

学习要符合如下的标准化链条：了解概念->探究原理->深入思考->总结提炼->底层实现->延伸应用"

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.协程和流
学习来源：主线云值守模块中使用到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引用

<WebView
    android: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 {
    @JavascriptInterface
    fun 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

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.关于我的博客

网站公告

今日签到

热门文章

最新发布