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

当你上网阅读东西时,我们一般会选择一款浏览器,比如Chrome、火狐、safari、IE或者Edge。你可能不知道这些浏览器之间有一些竞争,而竞争的主要形式就是WebView。

WebView的定义

什么是WebView呢?它是本地应用程序内嵌的一个浏览器!这句话有两处需要搞清楚!

  1. 本地应用程序一般会采用诸如C++、Java、OC等语言配合它们各自的UI框架去开发,一般情况下,是不能跨平台的,比如ios和android就需要同时开发两个版本,pc和手机本地应用程序也是不兼容的。

  2. 浏览器的特点,其实它大概可以分为两部分

上面是火狐的一个页面,红色区域可以认为是WebView,它拥有渲染引擎,可以通过http/https请求加载内容,加载回来的代码就可以被执行和渲染出来。红色区域以上的部分就是浏览器本地的UI组件。

移动端app中WebView的特点

我们经常把h5页面内嵌入app中,这种就是混合型的app,除了渲染页面本身的功能外,页面中的js还有能力调用app系统接口的,比如某些弹窗、分享等,这些区别对用户来说都是无感知的。

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

混合型的app一部分是native UI,一部分是H5页面,我们如何判断是前者还是后者?
在安卓中可以通过开启”设置“->”开发者选项“->”显示布局边界“,所有NA部分都会被红色的框选出来。(苹果手机没有这个开关)

WebView中的渲染引擎

  1. ios中,渲染引擎是webkit,和safari、chrome相同

  2. Android中,渲染引擎是Blink

  3. 在Window、Linux和macOS中,渲染引擎的选择就比较灵活了,比较知名的有chrome的Blink、IE的Trident,它主要依赖于app和WebView的实现

WebView带来的好处

  1. 因为它是从服务端加载页面资源,所以更新就比较方便,如果采用native UI那就要经历繁琐的审核过程。

  2. 夸平台,不用各个平台都开发一套代码

总结

可以认为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模式区别图:(图二)希望帮助到你![玫瑰]


投稿时间:2019-06-17  最后更新:2020-11-16

app中的webview是什么?如何理解?相关推荐

  1. 通过Appium获取Android app中webview

    因为要测试Android app中嵌入的web页面,所以需要从native切换到webview.网上查了好多帖子,都用到类似下面代码: //判断是否有 WEBVIEW Set<String> ...

  2. WebView 在 APP 中的使用

    为什么80%的码农都做不了架构师?>>>    微信的内嵌浏览器使用的是 WebView,当查看分享时打开的页面就是使用 WebView 呈现的.手机淘宝客户端也在页面中使用了 We ...

  3. Android Studio开发安卓app 安卓与webview中的js交互

    Android Studio开发安卓app 安卓与webview中的js交互 1.webview中的页面调用android中的方法 在Android Studio开发安卓app 封装WEB(H5,UR ...

  4. Weex实战分享|Weex在极客时间APP中的实践

    本文是根据 WeexConf2018 中议题<Weex在极客时间APP中的实践>内容文档整理而成.主要分享极客时间在深度使用Weex过程中的一些经验和体会. 孙涛  极客邦前端负责人 大家 ...

  5. app怎么调用mysql数据_教你如何拿别人APP中的数据

    开篇之前,我一直考虑这算不算侵权?只是兴趣,如果有人告知侵权的话,立马删除. 我所说的数据不是指拿别人app中的图片资源.而是程序运行所需要的数据. App中的数据无非两种,一种是网络数据,一种是本地 ...

  6. 让别人的小程序运行在自己的app中

    概要 本文包括的内容: 小程序在微信开发者工具中,通过构建生成真正的执行代码和安装包,****.wxapkg.wxml和wxss在构建这一步就被转换成了html和css(virtual-DOM).微信 ...

  7. iOS9中如何在日历App中创建一个任意时间之前开始的提醒(一)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们知道如果想在iOS中自带的日历App中创建闹铃开始的时间, ...

  8. android webview详情,Android中的WebView详细介绍

    Android中WebView的详细解释: 1. 概念: WebView(网络视图)能加载显示网页,可以将其视为一个浏览器.它使用了WebKit渲染引擎加载显示网页. 2. 使用方法: (1).实例化 ...

  9. android动态设置错误页面,Android中替换WebView加载网页失败时的页面

    我们用webView去请求一个网页链接的时候,如果请求网页失败或无网络的情况下,它会返回给我们这样一个页面,如下图所示: 上面这个页面就是系统自带的页面,你觉得是不是很丑?反正小编本人觉得非常丑,很难 ...

最新文章

  1. 如何正确实施人工智能
  2. 对现有的所能找到个DDOS代码(攻击模块)做出一次分析----TCP篇
  3. 虚拟化记录--No.1
  4. JAVA创建一个私有域_使用java基础反射访问私有域、方法和构造函数
  5. Maven-打外部jar包
  6. GAN能合成2k高清图了!还能手动改细节 | 论文+代码,英伟达出品
  7. 震惊:selenium竟然不是自动化测试工具
  8. HTML转义字符大全(转)
  9. Spring:连接池连接数据库报错Unknown system variable ‘tx_isolation‘
  10. Spring的注解@Autowired和@Resource的区别
  11. java迭代法求圆周率用梯形_常用的圆周率计算公式
  12. WIN7系统 提示缺少msvcr120.DLL,msvcr110.DLL的 请戳这里。
  13. 问答学习系统 - 针式PKM V8.20新增功能
  14. 国内哪家云服务器最便宜?国内主流三大云厂商的价格差异
  15. c语言课程设计报告之迷宫,C语言课程设计-迷宫游戏
  16. 阅读Android源代码
  17. 新闻文本分类 - Task2 数据读取与数据分析
  18. android项目添加图片,安卓开发:往项目中添加并使用图片
  19. java http 摘要认证_HTTP - 摘要认证
  20. jquery 常用正则表达式验证

热门文章

  1. html编写填空题,HTML基础填空及概念题.doc
  2. IDEA下载以及一些基本配置
  3. 如何免费下载word文档
  4. 给考研计划报考“管理学科学与工程”方向大学生的建议(大二阶段)
  5. 挖掘导演最爱用的演员 关联规则-FPGrowph
  6. 网络基础-交换篇-二层交换基础
  7. 《领导梯队》:4星。企业中六个层级的领导的必知必会和必须不能做的事情。...
  8. Android之C面试题②照片墙应用实现,再多的图片也不怕崩溃
  9. FreeCAD中数据显示流程
  10. JavaScript系列(三) - 收藏集 - 掘金