初步理解 WebView

article/2025/11/4 21:25:34

我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页。你也许正在使用其中一种浏览器阅读本文!虽然浏览器对于访问互联网内容的任务来说非常流行,它们还有一些我们从未过多关注过的竞争对手。这些竞争对手以 WebView 的形式被我们所熟知。这片文章将讲解 WebView 的神秘之处以及为什么它这么棒。

WebView 入门知识

让我们来点无聊的定义。WebView 是一种嵌入式浏览器,原生应用可以用它来展示网络内容。这句话有两部分要注意:

第一,原生应用(亦称 app)。原生应用由专门为特定平台设计的编程语言和 UI 框架编写:

 

换句话说,应用不是指在浏览器中运行的跨平台网络应用。相反,你的应用主要是用像 Swift、Objective-C、Java、C++、C# 语言来编写的。这种工作方式与系统更加贴近。在这样的背景下,你使用的大多数应用都应该是原生应用。许多流行的应用,比如你的台式机/笔记本上的 Microsoft Office 也是如此。

第二个处需要注意的是嵌入式浏览器。我们都知道浏览器是什么。它是让我们可以在网上冲浪的独立应用:

如果你把浏览器想象成两部分,一部分是 UI(地址栏,导航栏按钮等),其它部分是把标记跟代码转换成我们可见和可交互视图的引擎。

WebView 就是浏览器引擎部分,你可以像插入 iframe 一样将 Webview 插入到你的原生应用中,并且编程化的告诉它将会加载什么网页内容。

把所有的这些概念放到一起并简单整合下,WebView 只是一个可视化的组件/控件/微件等。这样我们可以用它来作为我们原生 app 的视觉部分。当你使用原生应用时,WebView 可能只是被隐藏在普通的原生 UI 元素中,你甚至用不到注意到它。

你的 WebView 就像是原生组件海洋里一座对 Web 友好的岛。对于你的应用来说这座岛的内容不需要存储在本地。你的 WebView 通常会从 http:// 或者 https:// 地址下载网络内容。这意味着你可以从服务器中获取部分(或全部)Web 应用并且依赖 Webview 将这部分内容展示在原生应用中:

这种灵活性打开了一个浏览器端的 Web 应用和希望展示在原生应用中的 Web 应用代码之间可重用的世界。这一切听起来真的非常棒……

运行在你的 WebView 中的 JavaScript 有能力调用原生的系统 API。这意味着你不必受到 Web 代码通常必须遵守的传统浏览器安全沙箱的限制。下图解释了使这样成为可能的架构差异:

默认情况下,在 WebView 或 Web 浏览器中运行的任何 Web 代码都与应用的其余部分保持隔离。这样做是出于安全原因,主要是为降低恶意的 JavaScript 代码对系统造成的伤害。如果浏览器或 WebView 出现故障,那很不幸,但可以接受。如果整个系统发生故障,那很不幸……并且这样不能接受。对于任意 Web 内容,这种安全级别很有意义。你永远不能完全信任加载的 Web 内容。WebView 的情况并非如此。对于 WebView 方案,开发人员通常可以完全控制加载的内容。恶意代码进入并在设备上造成混乱的可能性非常低。

这就是为什么对于 WebView,开发人员可以使用各种受支持的方式来覆盖默认的安全行为,并让 Web 代码和原生应用代码相互通信。这种沟通通常称为 bridge。你可以在前面的图表中看到 bridge 可视化为 Native Bridge 和 JavaScript Bridge 的一部分。详细了解这些 bridge 的内容超出了本文的范围,但要点如下:为 Web 编写的相同 JavaScript 不仅可以在 WebView 中运行,还可以调用原生 API 并帮助你的应用更深入地集成酷炫的系统级功能,如传感器,存储,日历/联系人等。

WebView 用例

现在我们已经了解了 WebView 的概况以及他们所拥有的一些强大作用,让我们退后一步,看看我们一些在原生应用中受欢迎的 WebView 的用例情况。

App 内置浏览器

WebView 最常见的用途之一是显示链接的内容。在移动设备上启动浏览器,将用户从一个应用切换到另一个应用以及希望他们找到返回应用的操作尤其令人失望。WebView 通过在应用本身内完全加载链接的内容来很好地解决这个问题。

看看下面的视频,了解当我们点击 Twitter 或 Facebook 应用中的链接时会发生什么:
Twitter 和 Facebook 都没有在默认浏览器中加载链接的内容。他们使用 WebView 伪造应用内浏览器并将内容呈现为应用体验本身的一部分。Twitter 的应用内浏览器看起来非常简单,但 Facebook 则更进一步,做了一个看起来很棒的地址栏甚至还有一个漂亮的菜单:

选择 Twitter 和 Facebook 做例子是因为我安装了这两个应用,并且可以随时录制视频与大家分享。有许多应用通过依赖 WebView 作为应用内浏览器来以类似的方式打开链接。

广告

广告仍然是原生应用最流行的赚钱方式之一。这些广告大部分是如何投放的?答案是通过 WebView 提供的 Web 内容:

虽然原生广告确实存在,但大多数原生解决方案在幕后使用 WebView,并从集中式广告服务器提供类似于你在浏览器中看到的广告。

全屏混合应用

到目前为止,我们一直在将 WebView 视为舞台上的次要支持角色,并由原生应用和其他原生 UI 元素完全支配。WebView 具有成为明星的深度和广度,并且在一大类应用中 WebView 内部加载的 Web 内容构成了整个应用用户体验:

这些应用被称为混合应用。从技术角度来看,这些仍然是原生应用。事实上,这些应用所做的唯一原生操作就是托管 WebView,而 WebView 又加载 Web 内容和用户交互的所有 UI。混合应用很受欢迎有几个原因。最大的一个是开发人员生产力。如果你有一个在浏览器中运行的响应式 Web 应用,那么在各种设备上使用相同的应用作为混合应用会非常简单:

当你对 Web 应用进行更新时,所有使用它的设备都可以立即使用该更改,因为内容来自一个集中位置,也就是你的服务器:

如果你必须使用纯原生应用,不仅需要为构建应用的每个平台更新项目,你可能必须经历耗时的应用审核过程才能使你的更新在所有的应用商店获取到。从部署和更新的角度来看,混合应用非常方便。将这种便利性与原生设备访问相结合能为你的 Web 应用提供超能力,这样你就拥有了一个成功的技术解决方案。WebView 使一切成为可能。

原生应用扩展

你将看到 WebView 使用的最后一个大类与可扩展性有关。许多原生应用(尤其是桌面应用)为你提供了一种通过安装加载项或扩展程序来扩展其功能的方法。由于 Web 技术的简单性和强大,这些加载项和扩展通常以 HTML、CSS 和 JavaScript 而不是 C++,C# 或其他方式构建。一个流行的例子是 Microsoft Office。构成 Microsoft Office 的各种应用尽可能是原生和经典的方式,但是为其构建扩展的方法之一就涉及 Web 技术。例如,一个流行的此类扩展是维基百科应用:

 

这些基于 Web 的扩展程序(如维基百科)在 Word 等 Office 应用中的表现方式是通过——是的,WebView:

WebView 中显示的实际内容来自此URL。当你在浏览器中访问该页面时,你并没有真正看到很多内容。是原生应用功能和 Web 代码(通过 WebView 暴露)的功能之间的交集使体验工作完整。作为 Word 应用内维基百科扩展的用户,你可能永远不会有疑问幕后发生了什么,因为功能已经被很好地集成,我们要的仅仅是它能正常工作。

WebView(通常)并不特别

WebView 非常棒。虽然看起来它们看起来像是完全特殊和独特的野兽,记住,它们只不过是一个在应用中设置好位置和大小的浏览器,而且不会放置任何花哨的 UI。其实还有更多东西,但这是它的精髓。在大多数情况下,除非你要调用原生 API,否则不必在 WebView 中专门测试 Web 应用。除此以外,你在 WebView 中看到的内容与你在浏览器中看到的内容相同,尤其是使用同一渲染引擎时:

在 iOS 上,Web 渲染引擎始终是 WebKit,与 Safari 和 Chrome 相同。是的,你没看错。iOS 上的 Chrome 实际上使用了 WebKit。

在 Android 上的渲染引擎通常是 Blink,与 Chrome 相同。

在 Windows,Linux 和 macOS 上,由于这些是更宽松的桌面平台,因此在选择 WebView 风格和渲染引擎时会有很大的灵活性。你看到的流行渲染引擎将是 Blink(Chrome)和 Trident(Internet Explorer),但是没有一个引擎可以依赖。这完全取决于应用以及它正在使用的 WebView 引擎。

我们可以花更多的时间来了解 WebView,并更深入地了解它们提供的一些特殊行为,但这会让我们偏离主题。对于我们在本篇文章要讲的东西,不偏离主题并宽泛了解WebView 才是正确的——至少到目前为止。


http://chatgpt.dhexx.cn/article/mD7jYX4N.shtml

相关文章

AndroidStudio之WebView详解

WebView 简介: WebView是一个基于webkit引擎、展现web页面的控件。 Android的Webview在低版本和高版本采用了不同的webkit版本内核,4.4后直接使用了Chrome。 作用: 1、 显示和渲染Web页面 2、 直接使用html文件(网络上或本地assets中&…

如何在uniapp中优雅地使用WebView

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 从webview页面传值到uniapp中 官方文档已经很详细了,这里给大家上我的实战代码&#xff0c;首先在webview页面中引入相关依赖&#xff1a; <!-- uniapp各平台依赖 --> <script type"tex…

Android:最全面的 Webview 详解

前言 现在很多App里都内置了Web网页&#xff08;Hyprid App&#xff09;&#xff0c;比如说很多电商平台&#xff0c;淘宝、京东、聚划算等等&#xff0c;如下图 那么这种该如何实现呢&#xff1f;其实这是Android里一个叫WebView的组件实现的。今天我将全面介绍WebView的常用…

Android 各个版本WebView

转载请注明出处 http://blog.csdn.net/typename/ powered by miechal zhao &#xff1a; miechalzhaogmail.com 前言&#xff1a; 根据Google公布的Android 各个系统版本市场占有率(Google Android dashboards), Android 4.0及其以上系统将近90%左右&#xff0c;发展趋势必…

app中的webview是什么?如何理解?

app中的webview是什么&#xff1f;如何理解&#xff1f; 当你上网阅读东西时&#xff0c;我们一般会选择一款浏览器&#xff0c;比如Chrome、火狐、safari、IE或者Edge。你可能不知道这些浏览器之间有一些竞争&#xff0c;而竞争的主要形式就是WebView。 WebView的定义 什么…

什么是webview ?

Andoid 平台&#xff0c;SDK 中有一个控件叫 WebView&#xff1b; IOS/MacOS 平台&#xff0c;SDK 中有一个控件叫 WebView/UIWebView/WKWebView(UIView/NSView)&#xff1b; 这些控件&#xff0c;用于移动端 APP 嵌入(Embed) Web 技术&#xff0c;加载 Web 内容&#xff1b;…

webview是什么,给小白的简单介绍

最近在学习uni-app&#xff0c;也会一直更新关于uni-app学习中自己遇到的问题和心得。 从uni-app的介绍看起&#xff0c;碰到了 ‘webview’ 一词&#xff0c;有必要搜罗一番。 webview是什么&#xff0c;给小白的简单介绍 百度知道 Webview含义&#xff1a;WebView也就是我…

VS下 dllimport与dllexport作用与区别

原文&#xff1a;http://www.cnblogs.com/foohack/p/4119207.html 我相信写WIN32程序的人&#xff0c;做过DLL&#xff0c;都会很清楚__declspec(dllexport)的作用&#xff0c;它就是为了省掉在DEF文件中手工定义导出哪些函数的一个方法。当然&#xff0c;如果你的DLL里全是C的…

VS BUG(5) error C2491: “****“: 不允许 dllimport 函数 的定义

VS BUG&#xff08;5&#xff09; error C2491: "****": 不允许 dllimport 函数 的定义 前言一. BUG提示二. 分析解决三. 小结 前言 程序员难免要与BUG打交道&#xff0c;本系列将记录自己在VS平台下代码调试过程中遇到的一些BUG&#xff0c;希望对大家遇到相关问题…

C#中DllImport使用法汇总

(转) 最近使用DllImport&#xff0c;从网上百度后发现&#xff0c;大部分内容都是相同&#xff0c;又从MSDN中搜集下&#xff0c;现将内容汇总&#xff0c;与大家分享。 大家在实际工作学习C#的时候&#xff0c;可能会问&#xff1a;为什么我们要为一些已经存在的功能&#xf…

dllexport和dllimport

在VS中&#xff0c;如果要跨项目使用类或变量&#xff0c;就必须用到dllexport和dllimport&#xff0c;下面分别举例全局变量&#xff0c;函数和类跨项目使用。 环境准备&#xff1a;使用VS分别新建一个windows应用程序和DLL项目&#xff0c;windows应用程序项目名称为ConsoleA…

简记C#DllImport异常

C#开发过程中&#xff0c;有些动态库引用不了&#xff0c;需要用DllImport加载该文件动态库&#xff1b; 然后在引用的过程中会碰到各种问题&#xff0c;当然网上各种回答&#xff0c;能解决大部分问题。 我在这里简单记录下问题的解决方案&#xff1a; ”尝试读取或写入受保…

关于c++动态库的dllexport和dllimport

先推荐一款比Microsoft Coplilot更好用的辅助编程工具——Cursor&#xff0c; 一款基于GPT4的新一代辅助编程神器——Cursor&#xff0c;官网介绍说是与OpenAI合作并且基于GPT4。自己体验了下&#xff0c;确实不错&#xff0c;值得尝试。 官网地址&#xff1a; Cursor | Build…

C# dllimport

一、DllImport是System.Runtime.InteropServices命名空间下的一个属性类&#xff0c;其功能是提供从非托管DLL导出的函数的必要调用信息 DllImport的定义如下&#xff1a; public class DllImportAttribute:System.Attribute { public DllImportAttribute(string dllName) {……

C#中DllImport用法和路径问题

DllImport 是System.Runtime.InteropServices命名空间下的一个属性类&#xff0c;其功能是提供从非托管DLL导出的函数的必要调用信息。 DllImport属性应应用于方法&#xff0c;要求最少要提供包含入口点的dll的名称。 文章目录 一 DllImport的定义如下&#xff1a;二 DllImpo…

1-5(中文版)听力积累

O 听力积累 KR 参照连接&#xff0c;建议看一看 听力学习步骤 选择材料&#xff1a;使用English Pod材料 Englishpod是一家公司叫做Praxis Language 推出的收费讲座。讲座高度还原生活场景&#xff0c;两位优秀的主持人以轻松聊天的方式讲解点评场景内容&#xff0c;在此过…

该如何拯救我的英语

说来羞愧&#xff0c;从初中开始&#xff0c;就算到大学本科毕业为止吧&#xff0c;英语也算得上是持续地学习了有 10 年时间了&#xff0c;十年啊&#xff0c;十年了&#xff0c;你知道这十年我是怎么。。。。emmm&#xff0c;十年时间就算是一天只记一个单词&#xff0c;那少…

英语磁带与计算机磁带区别,小学英语教材配听力磁带 家长:谁还用复读机?...

时间倒回十多年&#xff0c;大家听歌、听英语还是用磁带&#xff0c;复读机、录音机也是学生人手必备的学习用品。但在各种高端电子产品充斥的今天&#xff0c;再去找个录音机可能就非常困难了。这不&#xff1f;刚刚开学&#xff0c;就有小学一年级的家长被难倒了&#xff0c;…

小学听力测试英语软件,亲测:好用的小学英语软件有哪些?这6款通通安利给大家!...

原标题&#xff1a;亲测&#xff1a;好用的小学英语软件有哪些&#xff1f;这6款通通安利给大家&#xff01; 首先&#xff0c;老师需要提前表明的是&#xff1a; 今天给大家推荐的这8款好用的小学英语软件&#xff0c;有的是我亲自测试过的&#xff0c;有的是同办公室的英语老…

什么软件能做英语测试卷听力,请问谁知道那些英语课本、期中期末考试的听力朗读的声音是怎么合成的?用什么软件?谢谢了...

满意答案 ceterry 2014.02.02 采纳率&#xff1a;57% 等级&#xff1a;12 已帮助&#xff1a;10834人 这些都是用 能说会道 XP 这个软件合成的&#xff0c;只需要课文的文字内容就可以转换成MP3的语音资料&#xff0c;还带LRC字幕&#xff0c;很方便&#xff0c;效果也好 “…