有奖捉虫:办公协同&微信生态&物联网文档专题 HOT

服务概述

H5 容器和离线包经常作为移动端混合开发解决方案来同时使用。H5 容器提供了 H5 页面与 Native 交互的解决方案。离线包可以将 H5 资源缓存至本地进行加载。HContainer 对离线包和 H5 容器进行了封装,返回一个包含 WebView 的 ViewController 供开发者进行页面跳转。

应用场景

混合开发技术的主要场景是 App 使用 H5 页面进行业务功能开发。通过 H5 容器和离线包,提高页面的加载速度和进行数据交互。

系统架构及技术原理

H5 容器:JSBridge Core 通过将 H5 页面的 js 调用消息封装成 URL 的方式向 Native Code 传递信息。Native 端将 URL 信息还原后,通过对比 JSBridge Core 的 JSAPI 注册信息,决定将消息丢弃或转发至相应的处理者,完成 js 调用到 Navite Code 的调用链路。
离线包:通过拦截 WebView 的资源请求并根据请求资源的 URL 去匹配本地的离线资源。如果存在与之匹配的离线资源则直接加载本地资源,否则请求在线资源。
HContainer:继承 UIViewController 并创建 WebView 来进行 H5 容器注册和离线包注册,降低集成门槛。同时它对离线包加载从 URL 层进行封装,实现使用业务 ID(离线包BID)到 URL 的映射关系来打开离线包页面。
?
http://www.vxiaotou.com