webview组件理解

目录

1.webview是什么
2.为什么需要webview
3.从产品角度看怎么做webview组件

webview是什么

Webview是一个基于webkit的引擎,可以解析DOM 元素,展示html页面的控件,它和浏览器展示页面的原理是相同的,所以可以把它当做浏览器看待。

定义中涉及的名词

webkit是一个开源的浏览器引擎,可以理解为汽车的发动机。
DOM 是 Document Object Model(文档对象模型)的缩写。DOM 是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

为什么需要webview

1.webview可以展示渲染html、CSS、js格式的文档,把它显示成一个可以看懂的页面。相当于一个在app环境内的浏览器。浏览器有的功能,它基本都可以有。比如换皮肤。
2.在app环境内展示的h5需要和原生进行交互,如获取登录信息等,需要通过webview作为沟通的桥梁。

从产品角度看怎么做webview组件

组件是对数据和方法的简单封装。组件的前提是接口标准化。可以把重复利用概率大的功能封装成组件,供多方调用,节约资源。如,webview控件。
webview组件可以分为2部分来定义:导航栏功能和其他功能。

1.导航栏功能
-返回按钮
显示逻辑:一直显示
交互:点击返回上一级页面
-关闭按钮
显示逻辑:打开第二个h5页面显示
交互:点击关闭所有h5页面
-导航栏标题:
显示逻辑:可设置隐藏,居中或左对齐,支持文字和图片2种格式
交互:不可点击
-更多“...”
显示逻辑:默认一直显示,可以隐藏
展开:依次是首页、搜索、购物车、分享、功能反馈、消息
-更多左侧
显示逻辑:显示购物车或分享,可设置显示/不显示,也可以自定义。
交互:点击到购物车或拉起分享面板
2.其他功能
-支持登录态打通
-请求登录
-获取手机基本信息等
通过上述栗子,可以看出有一些支持自定义的功能,这就是接口来控制的。


示例
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,659评论 0 7
  • 前端开发知识点 HTML&CSS对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型...
    Hebborn_hb阅读 880评论 0 1
  • WebView·开车指南 2016-08-31BugDev 北京市东城区首席Bug布道师开山之作,一整月交通事故血...
    53c021c38a1d阅读 920评论 0 1
  • How-to-quick-getting-started-for-frontend 不经意已一年多不专注前端方面的...
    liujb阅读 782评论 2 13
  • 国风 邶风 式微 式微, 式微, 胡不归? 微君之故, 胡为乎中露! 式微, 式微, 胡不归? 微君之躬, 胡为乎...
    小河边的依依杨柳阅读 762评论 13 19

友情链接更多精彩内容