支付宝 App架构的原理与实战

最上层是原生的 HTML5 代码，这块就是大家常见的 Web 开发环境，包括 HTML、CSS、JavaScript等。

下面一层即离线包管理，这个我们在第二章节内进行详细介绍。

再往下是 HTML5 容器层，HTML5 容器作为中间层，将浏览器和支付宝底层框架有机结合起来，同时还提供各种生命周期机制、事件机制、扩展插件等内容。

在 HTML5 容器里面有个非常重要的概念： JSBridge。通过 JSBridge，HTML5 容器将支付宝框架底层以及中间件层提供的各种能力和 HTML5 前端代码进行联通，其中包括 RPC（远程过程调用，用来实现 App 和服务器通信）、支付、扫一扫等。

最下面是支付宝底层框架，提供微应用，微服务等概念。一个 HTML5 应用，也会被框架模拟成一个微应用，通过应用 ID 进行解耦。

1.2.1 JSBridge 介绍

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

1.2.2 H5 容器定制化扩展

HTML5 容器提供了 2 种扩展方式：

• JSAPI

JSAPI 方式给 HTML5 页面增加了 Native 功能调用接口，通过实现自定义 JSAPI 类中的 Handler 方式，可以以 Native 的形式实现特定功能，例如调用 Native 加密函数。

• 事件

HTML5 容器在状态变化时会发送事件，通过监听 HTML5 容器特定事件，可以实现对 HTML5 容器生命周期的处理，比如修改加载进度条颜色、修改页面导航栏等。事件提供了更强的定制性，完全可以满足对 HTML5 容器的各种自定义需求

1.3 容器稳定性

上面在研发难度中，我们提及到了，HTML5 方式的研发难度是最高的，因为需要定制化内核进行性能及稳定性优化。目前支付宝采用的是阿里集团的 UC 自研内核，并针对支付宝的 HTML5 容器进行了深度优化和定制。如图所示