当前位置: 首页 > news >正文

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.协程和流
  • 学习来源:主线云值守模块中使用到H5界面,点击某个位置后会调用我们原生显示
  • 重要程度:⭐⭐⭐⭐⭐(核心基础)
  • 学习日期:2025.07.08
  • 记录人:@panruiqi

1.1 学习目标

  • 了解概念->探究原理->深入思考->总结提炼->底层实现->延伸应用"

1.2 前置知识

  • [05. study_JSBridge机制.md](05. study_JSBridge机制.md)

02.核心概念

2.1 是什么?

Android中的一个组件,允许你在应用中内嵌一个浏览器内核,用于显示网页内容

2.2 解决什么问题?

  1. 原生Android开发每次内容更新都要去打包,上线。而WebView只需要更新H5,然后通过loadUrl内嵌显示即可。
  2. 跨平台,原生Android不能用在IOS上,但是WebView中H5则是两者都可以使用
  3. 有些复杂的交互,显示逻辑使用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]

http://www.dtcms.com/a/270380.html

相关文章:

  • MYSQL进阶知识
  • 在keil中使用stlink下载程序报错Invalid ROM Table
  • Day07_C语言IO进程线程(重难点)
  • TensorFlow 和PyTorch的全方位对比和选择建议
  • Latex几种常用的花体
  • [2-02-02].第04节:环境搭建 - Linux搭建ES集群环境
  • [RPA] 影刀RPA基本知识
  • Kafka多组消费:同一Topic,不同Group ID
  • NV298NV312美光固态闪存NW639NW640
  • 基于mysqlfrm工具解析mysql数据结构文件frm表结构和数据库版本信息
  • 【Nginx】Nginx代理WebSocket
  • 扣子Coze远程连接数据库插件
  • C语言基础(1)
  • 【C++】AVL树底层思想 and 大厂面试
  • Python 的内置函数 slice
  • 为什么elementui的<el-table-column label=“名称“ prop=“name“ label不用写成:label
  • RS-232协议与RS485协议详解
  • [Backlog] 命令行界面CLI vs Web界面及服务端
  • 快手电商要投入多少钱?快手电商入驻条件和费用
  • 分布式无线工业数据采集终端应用场景简析
  • POI报表
  • Paimon本地表查询引擎LocalTableQuery详解
  • Mybits-plus 表关联查询,嵌套查询,子查询示例演示
  • 使用策略模式 + 自动注册机制来构建旅游点评系统的搜索模块
  • 音频被动降噪技术
  • Spring AI:ETL Pipeline
  • STM32-USART
  • 图像噪点消除:用 OpenCV 实现多种滤波方法
  • jmeter 性能测试步骤是什么?
  • 【深度学习新浪潮】什么是上下文长度?