Hybrid客户端结构说明

移动端的两大平台Android和iOS，基于自身平台的特性，开发相应的Native应用能保证用户最好的体验效果。但是两个平台的开发技术和运行方式不同，针对同一套业务逻辑需要实现两遍，这样就有了跨平台开发的需求，此外受限于发版的不便，和前端结合的Hybrid便能成了其中一项选择，和其他方案相比，Hybrid更轻量，学习成本低。

大海Hybrid将H5和Native的通信逻辑进行了封装，这样前端小伙伴只需编写一套代码，即可在Android和iOS两个平台上运行，为了使H5有更好的性能，大海Hybrid提供了一些实用的插件Plugin，以及简单便捷的插件开发能力，方便用户自定义开发各种Native功能。

此外为了提升webView的性能，也提供了一套资源管理的功能，用户可以自行选择是否使用。

Hybrid框架图.png
整体的框架图如上所示，分为三层，内核、H5 容器、View层，下面将会详细进行介绍，此外还会对资源管理及路由进行简单说明。

内核

在浏览器内核上的选择：
Android:
iOS:基于WKWebView，它是Apple在iOS8引入的新一代WebKit framework，用于替换UIWebView，UIWebView在iOS12已经标记为Deprecated不再维护。WKWebView更加的稳定、拥有60fps滚动刷新率、丰富的手势、KVO、高效的Web和Native通信，默认进度条等等功能，而最重要的，是使用了和safari相同的Nitro引擎极大提升了Javascript的运行速度。WKWebView独立的进程管理，也降低了内存占用及Crash对主App的影响。

H5 容器

在H5容器给前端页面提供了一个高效便捷的运行环境，主要有：
JSBrisge：负责JS与Native的通信，其流程如下图所

Hybird Native.png

详细介绍Hybird-Native bridge

Native Api：初始化H5容器，加载用户自定义资源的入口，比如写入cookie，注入js文件。

Router：H5使用预加载Hybrid资源的入口，用户可以自定义路由规则，可以简单的约定使用Scheme，这个模块和资源管理结合使用，能带来更好的体验。

H5 Source manager：大海Hybrid提供了一套资源管理的逻辑，流程如下

hybird资源管理.png

详细介绍见Hybrid资源管理

Safe Handler：目前提供了简单的文件校验规则，对压缩的资源文件进行MD5加密，客户端收到zip压缩包后，进行校验，确保资源文件不被篡改。

data Channel：最后一部分是数据通道，目前下发资源文件是在程序启动的时候加载，后期也可建立长链通道，可以在程序运行期间动态下发。

View Layer

View层主要负责业务逻辑，前端写好H5页面后，将所需资源文件一并打包成zip文件，通过配置平台下发给APP，页面在APP内采用相对路径加载H5资源。这里把plugin也归到了View层，用户可以基于插件能力便捷的开发与使用Native能力。插件开发的介绍详见Hybird-Native bridge

时序图

至此介绍完了Hybrid的整体结构，下面以数据流图来展示整体运作过程。

Hybrid时序图.png

详细使用，参见使用说明及demo