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

study_WebView介绍

news 2025/7/9 17:00:03

文章目录

- 前言
- 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 解决什么问题？

原生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!");