使用Hybrid容器接入其他业务能力，为项目快速赋能

前言

这个方案是提供类似小程序的能力，让App成为平台，使其他业务可以通过H5的形式为App赋能。

容器方案选用H5方式实现，搭建JS通信桥，H5通过通信桥与WKWebview进行通信。

App通过JS API为H5提供如文件上传下载，部分Native页面的路由支持（如扫码，聊天会话，个人详情），链接分享等功能。后端为业务方提供一套OpenAPI用于小程序信息与鉴权维护的。

前端架构设计

流程图

通信桥

Native Bridge

Native -> H5 的通信桥，用于维护客户端的通讯逻辑。

实现功能：

  1. JS端业务函数的注册与管理，如为H5提供扫码功能，应用内分享功能等。
  2. Native端向JS端注册常量，如Bridge的版本号，客户端的设备信息等。
  3. 提供Native端已注册函数的查询API。
  4. 使用callbakcId的方案管理JS端的异步回调。

通信流程：

  1. Native端通过Webview发起请求，调用js端的固定函数（如：FunJS），请求参数为字典类型，再将字典转为JSON String类型进行传输。请求参数中包含functionName，对应js端的注册函数，callbackId，用于管理JS端的回调。
  2. JS端接收到请求后，通过functionName调用指定函数，同时解析JSON String，带入请求参数。
  3. JS端在回调的时候会带上callbackId，Native通过Id匹配请求与回调。

JS Bridge

H5 -> Native 的通信桥，用于维护H5的通讯逻辑，与JS Bridge的功能相对应。

实现功能：

  1. JS端业务函数的注册与管理。
  2. 提供常量池，存放客户端注册的常量。
  3. 提供JS端已注册函数的查询API。
  4. 使用callbakcId的方案管理Native端的异步回调。

通信流程，基本和Native Bridge的逻辑相同：

  1. JS端调用Native端注册在Webview的通信函数（如：FunNative），请求参数为字典类型，再将字典转为JSON String类型进行传输。请求参数中包含functionName，对应Native端的注册函数，callbackId，用于管理Native端的回调。
  2. Native端接收到请求后，通过functionName解析出需要调用的函数。对请求进行白名单host校验（每个函数有独立的白名单），是否为已经注册的函数。
  3. 验证通过，解析JSON String中的请求参数，调用指定函数。
  4. 回调JS端，并带上callbackId，JS端通过Id匹配请求。

函数

JS Function Model

​ JS端的函数逻辑比较简单，只需要一个function name，一个handler即可创建一个函数，并且注册到bridge上。

Native Function Model

包含 函数名（function name），实现（handler），白名单（host white list），相关数据（userInfo）。

相比JS端，多了白名单功能。

公共函数（Public Function）

公共函数为统一注册，所有WebView均可使用，同时函数也会启用白名单验证。

  1. JS端配置Native导航栏：导航栏标题样式、导航栏左侧按钮与右侧按钮图片与样式，导航栏整体显示与隐藏。
  2. JS端控制Webview浏览栈回退。
  3. JS端控制Webview页面关闭。
  4. JS端新建Webview页面，并且打开新的链接。
  5. JS端刷新当前页面。
  6. JS端获得当前用户token
  7. JS端刷新用户token。
  8. JS端加载本地资源文件至WebView。

私有函数（Private Funcion）

在有限范围内提供能力，每个WebView需要单独注册才可被使用，WebView关闭后自动失效。

  1. JS端下载文件。
  2. JS端通过ID获取当前小程序信息。

容器配置（Configuration）

用于存放容器需要使用的相关信息，分别有：

  1. App原有导航栏样式（标题样式，导航栏背景色/背景图）。
  2. 容器当前导航栏样式。
  3. 导航栏左侧按钮、右侧按钮配置。
  4. 安全区域背景色配置。
  5. 返回按钮（样式，点击事件）。

关于导航栏样式的配置说明下，iOS的机制是同一个Navigation Controller中的View Controller会共用一个导航栏，如果JS端修改了导航栏配置，则会导致Native的其他页面导航栏也被修改。所以在容器退出时，需要将导航栏配置还原，避免对其他模块页面造成影响。

CookieManger

管理WebView的Cookie，支持对Cookie数据的CRUD，与WKHTTPCookieStore同步。

WebView Controller

主要负责管理WebView的生命周期，维护相关控件（比如网页加载进度条），UI相关的逻辑基本都放在这里，WebView加载相关逻辑都注册到Manager中。

WebView Manager

  1. 负责通信桥的注册（注册JS SDK，注册JS环境变量），通信桥的生命周期通知。
  2. WebView加载URL的策略（比如符合Native路由规则的url直接走路由逻辑）。
  3. 注册管理WKURLSchemeHandler来根据scheme来webView处理数据（比如加载离线资源包，H5获取本地图片二进制数据）。
  4. 维护Cookie同步。