app中的webview是啥？如何理解？

Posted 2023-03-28

参考技术A 当你上网阅读东西时，我们一般会选择一款浏览器，比如Chrome、火狐、safari、IE或者Edge。你可能不知道这些浏览器之间有一些竞争，而竞争的主要形式就是WebView。
WebView的定义
什么是WebView呢？它是本地应用程序内嵌的一个浏览器！这句话有两处需要搞清楚！

上面是火狐的一个页面，红色区域可以认为是WebView，它拥有渲染引擎，可以通过http/https请求加载内容，加载回来的代码就可以被执行和渲染出来。红色区域以上的部分就是浏览器本地的UI组件。
移动端app中WebView的特点
我们经常把h5页面内嵌入app中，这种就是混合型的app，除了渲染页面本身的功能外，页面中的js还有能力调用app系统接口的，比如某些弹窗、分享等，这些区别对用户来说都是无感知的。

在普通浏览器中是没有这个能力的，至少浏览器没有开放这些api。

WebView中的渲染引擎 WebView带来的好处 总结
可以认为WebView就是浏览器，只是在不同平台长相和能力有所不同！

App中的WebView可以理解为一个浏览器，因为它具有基本的浏览器能力，包括加载网页，js控制等；

首先，看一下安卓端webview的一些介绍。

是一个基于引擎、展现页面的控件。可以显示和渲染Web页面，与JS交互，也可以和原生代码交互。

然后可以参考下各大APP,如淘宝、支付宝、京东、美团等；这里截取几张图示例下。

(截图来自支付宝、淘宝)，上面2个页面都是在app内内嵌了定制的webview组件，用于展示一些额外的信息(非组件化的)，灵活性高；

其次，webview作为app中重要的组成部分，如混合APP, 纯H5 App；

最后，题主若还有疑问，欢迎@我。

WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。

在android手机中，网页的解析和显示网页的能力是由webkit内核实现的。

（如chrome浏览器使用的是webkit内核，现在，webkit被内置到了android系统中）

webview对网页处理也是交给强大的webkit做的

webview在android SDK（原生）中：

封装为一个叫做WebView组件，通过这个组件可以在app中显示html+css+js，当然也就可以显示一个远程url，比如用它打开百度首页是可以的。

可以理解为：android开发中的一个activity里使用了webview组件，并打开了一个html页面呈现给用户。

其中“activity”是android原生开发时的“一张页面”，app的所谓跳转到不同“页”是在activity中跳来跳去，activity是java的一个类，布局则是使用xml（如果没做过原生android开发就这么理解就行）

webview在mui app框架开发中：

在mui开发中，这些webview就是一张一张的网页。

这些网页是webview对象，其操作方法被封装在html5+的plus.webview对象中

webview本身只是个浏览器效果组件，切换即使网页之间的跳转，理论上不可能像原生的activity中切换一样流畅，本身也不会有什么动画。

还好，mui的开发组，dcloud（数字天堂）和他们的html5+中国产业联盟（社区）实现了webview切换的动画效果，他们把这些webview映射到了真正的java webview，调用的也是原生的activity切换动画，从而使得webview切换也可以像原生app activity一样切换的效果！图一（简约图）原生开发和mui的hybrid模式区别图：（图二）希望帮助到你！[玫瑰]

ionic框架中的Android Webview等价物是啥？

【中文标题】ionic框架中的Android Webview等价物是啥？

【英文标题】：What is the equivalent of Android Webview In the ionic framework?ionic框架中的Android Webview等价物是什么？

【发布时间】：2015-04-07 02:01:33

【问题描述】：

我创建了一个 IONIC/Angular JS 应用程序；我想在其上加载一个网页，就像使用 Android WebView 一样；也就是说，在我的离子应用程序的一个分区中显示我的网页。所以问题是，有没有 IONIC 组件可以做到这一点？

【问题讨论】：

Ionic 是一个 HTML/JavaScript/CSS 框架，更具体地说是一个 UI 框架，其中 Angular JS 是用于与 UI 交互的模型/视图框架。 Cordova 是允许您运行 Web 应用程序的 WebView 框架。所以你需要的是 Cordova/phonegap 来运行你的 Ionic/Angular 应用程序。

谢谢弗兰克，我知道。真的，我想要的是在我的离子应用程序的一个部门中加载一个外部网页。请看这个例子：[link]tutorialspoint.com/android/android_webview_layout.htm);这是一个 android 示例。

我不明白你的意思。您是要加载外部网页还是要在 web 视图中加载 Ionic Web 应用程序？如果您想在Cordova based Ionic application 中加载外部网页，则可以使用in-app browser plugin 加载外部网页。

Inappbrowser Link

inAppBrowser 的作用是从我的 ionic App 中打开另一个浏览器选项卡中的给定链接。但我想避免这种情况：此链接将在另一个选项卡中打开；我希望它在我的 Ionic 应用程序中完全像这样打开：[link](tutorialspoint.com/android/android_webview_layout.htm)。但如果这对 Ionic 不可行，我将只使用 " inAppBrowser "。

【参考方案1】：

我知道你不久前发布了这个问题。我同样需要在我的 ionic 页面中嵌入一个网页，我找到的解决方案是添加一个 iframe 标签。将源设置为转到您要嵌入的链接。iframe 将包含应用程序内的网页。您甚至可以创建一个控制器来添加更多功能。请参阅下面的代码：

<ion-view>
  <ion-content class= 'padding has-subheader'>
    <iframe class= 'webPage' name= "eventsPage" src="http://www.algonquincollege.com/studentsupportservices/events/">
   </iframe>
  </ion-content></ion-view>

对于样式，您需要使用由 ionic 自动创建的类滚动来定位 div。例如，我想让网页填充 90% 的宽度。见下面的代码：

ion-content div.scroll
  height: 90%; 

.webPage
  width: 100%;
  height: 100%;
  border: 2px solid #EAAB00;
  padding: 1rem;

希望这会有所帮助。 完整的细节在这里：http://mobileapplicationsdesigndevelopment.blogspot.ca/

【讨论】：

我没有尝试过 Nehmat 的解决方案，但这对我有用，所以我想分享...blog.nraboy.com/2014/07/launch-external-urls-ionicframework

太棒了！但是，嵌入式网站中的某些 javascript 无法执行，它显示错误消息Blocked a frame with origin "http://xxxx" from accessing a frame with origin "file://". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "file". Protocols must match. 知道如何解决这个问题吗？ （我已经在config.xml中设置了白名单和访问）

@nehmat-gereige 你是救世主！！非常感谢

嗨@Kevin，你设置InAppBrowser插件了吗？我有同样的问题并删除InAppBrowser插件解决框架问题