支付宝移动端 Hybrid 解决方案探索与实践

目前 mPaaS H5 容器 Demo 源码已发布至 GitHub，全新的接入方式让你可以一键集成 mPaaS 环境并快速接入 H5 容器，体验统一的容器和内核，获取媲美原生的 Hybrid 方案及完美的动态能力。

支付宝 Hybrid 方案建设与演进

目前支付宝有 2 套 Hybrid 方案： HTML5 容器与小程序。小程序是最近几年才出来，H5 容器已经有了很长时间的历史，所以我们就先从 H5 容器说起。

• H5 容器

在支付宝中，HTML5 容器架构如图所示：

最上层是浏览器，这块就是大家常见的 Web 开发环境，包括 HTML、CSS、JavaScript等。H5 容器作为中间层，将浏览器和支付宝底层框架有机结合起来，在 H5 容器里面有 2 个非常重要的概念： JSBridge 和 离线包，后面会做详细介绍。支付宝底层框架会给 H5 容器提供 Native 的能力，这其中就包括 RPC（远程过程调用，用来实现 APP 和服务器通信）、支付、扫一扫等。

• JSBridge

JSBridge 是 H5 容器的基石，桥接了 JS 环境与 Native，实现了 Native 代码和 浏览器 环境的双向通信，Native 代码可以通过调用 浏览器 提供的接口运行JS，从而实现调用 JS 函数、传递参数到 JS 环境等；而浏览器到JS环境的通信是通过 Native 拦截浏览器的请求来实现，请求可以是网络请求或者是一些内部函数的调用。

那么 JSBridge 会带来什么好处呢，在传统的 Web 开发场景，H5 页面会通过 HTTP 的 GET 或者 POST 请求到后台获取数据，就会用到 jQuery 等 AJAX 框架。但是 H5 页面中的 JS 函数公开的，没法做一些加密逻辑，同时对于无法优化网络。这几年随着 4G 和流量卡的普及，让手机网络变得更快、更便宜，在这之前大量用户会面临流量不足、信号差、网络不稳定的情况，这些场景在现在依然存在，而纯 Web 方案是没法提供相关的优化。

<