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.其他功能
-支持登录态打通
-请求登录
-获取手机基本信息等
通过上述栗子，可以看出有一些支持自定义的功能，这就是接口来控制的。

示例