WebView深度解析：概念、原理与应用场景全解

WebView深度解析：概念、原理与应用场景全解

WebView是移动应用开发中一个重要的组件，它允许原生应用嵌入网页内容，实现Web与Native的深度融合。本文将详细介绍WebView的概念、原理及其在App内置浏览器、广告、混合开发等场景中的应用，并通过对比表格总结Native App、Web App和Hybrid App的特点。

WebView介绍

在前面我们已经介绍了什么是WebApp，简单来讲就是移动端的网站或H5应用。那么既然是一个Web网站，必然就是使用浏览器来打开。但是只能用浏览器打开么？

举个例子，现在国内很流行扫码打开一个应用或者小程序，例如有下面的一个二维码：

实际上，除了可以使用微信扫一扫以外，凡是手机中具备扫一扫功能的应用，都能打开此页面。

正如上图所示，我分别使用百度、抖音、微信、支付宝以及手机默认浏览器都打开了此页面。

百度和默认浏览器自不用说，因为这两个本身就是浏览器，用浏览器打开网页没什么稀奇的，但是微信、支付宝、抖音这些应用为什么也能打开此页面呢？

这就不得不提我们这篇文章的主角WebView了。本文主要介绍什么是WebView，并不会涉及到具体的编码，大家可以放心食用。

WebView是什么

WebView是一种嵌入式浏览器，原生应用可以用它来展示网络内容。

我们都知道浏览器是什么，它是让我们可以浏览网页的独立应用：

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

WebView就是浏览器引擎部分，你可以像插入iframe一样将Webview插入到你的原生应用中，并且编程化的告诉它将会加载什么网页内容。这样我们可以用它来作为我们原生app的视觉部分。当你使用原生应用时，WebView可能只是被隐藏在普通的原生UI元素中，你甚至用不到注意到它。

运行在你的WebView中的JavaScript有能力调用原生的系统API。这意味着你不必受到Web代码通常必须遵守的传统浏览器安全沙箱的限制。

下图解释了使这样成为可能的架构差异：

Web代码和原生应用代码相互通信。这种沟通通常称为bridge。

通过上图我们可以看到bridge可视化为Native Bridge和JavaScript Bridge的一部分。正因为bridge的存在，我们所编写的JavaScript不仅可以在WebView中运行，还可以调用原生API帮助我们的应用更深入地集成酷炫的系统级功能，如传感器，存储，日历/联系人等。

WebView常见使用场景

现在我们已经了解了WebView的概况以及他们所拥有的一些强大作用，接下来我们来看一下WebView的使用场景。

App内置浏览器

WebView最常见的用途之一是显示链接的内容。

在移动设备上启动浏览器，将用户从一个应用切换到另一个应用，操作完成后再返回原本的应用，这样的操作体验相当的糟糕。WebView通过在应用本身内完全加载链接的内容来很好地解决这个问题。

这也解释了为什么上面提到的抖音、微信、支付宝都可以打开那个页面。

广告

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

混合开发（Hybrid App）

到目前为止，我们一直在将WebView视为舞台上的次要支持角色，并由原生应用和其他原生UI元素完全支配。

但是近年来出现了一种新的开发模式，叫做混合开发（Hybrid App）。这种开发模式介于WebApp和NativeApp这两者之间的App开发技术，兼具“Native App良好交互体验的优势”和“WebApp跨平台开发的优势”。其原理就是原生客户端的壳WebView，里面是HTML5的网页。

混合应用很受欢迎有如下的原因：

• 开发成本较低，可以跨平台，调试方便
• Hybrid模式下，由原生提供统一的API给JS调用，实际的主要逻辑由HTML和JS来完成，而由于最终是放在WebView中显示的，所以只需要写一套代码即可，达到跨平台效果，另外也可以直接在浏览器中调试，很为方便。
• 最重要的是只需要一个前端人员稍微学习下JS API的调用即可，无需两个独立的原生人员
• 一般Hybrid中的跨平台最少可以跨三个平台：Android、iOS和普通Webkit浏览器
• 维护成本低，功能可复用
• 同上，如果代码合理，只需要一名前端就可以维护多个app，而且很多功能还可以互相复用。
• 更新较为自由
• 虽然没有WebApp更新那么快速，但是Hybrid中也可以通过原生提供api进行资源主动下载，达到只更新资源文件，不更新apk(ipa)的效果。

现在国内外也有很多将WebApp打包成Hybrid App的应用技术，例如：

桌面应用扩展

WebView的使用场景不仅仅只是在移动端应用上面，许多桌面应用也可以使用WebView来扩展自己的功能。由于Web技术的简单性和强大性，很多加载和扩展项通常选择以HTML、CSS和JavaScript技术而非C++、C#来进行构建。

下面以Microsoft Office为例，我们可以针对某一个特殊的词使用维基百科进行查询。而这里的维基百科内容就是通过WebView显示出来的。

总结

目前为止，我们就已经介绍了3种移动端开发的方式了。这里我们以表格的形式做一个总结：