支付宝移动端 Hybrid 解决方案探索与实践 | mPaaS 线下沙龙 CodeDay#1 分享实录

做者：千平，蚂蚁金服移动开发平台 mPaaS 团队移动端工程师，目前负责 mPaaS iOS 框架和前端 Kylin 框架对外输出。

内容采编自 CodeDay#1 杭州站现场分享，主题是《支付宝移动端 Hybrid 解决方案探索与实践》。

本文内容主要分为如下三部分：

• 移动互联网背景下的高可用性能挑战

  主要给你们介绍支付宝 App 在这几年移动互联网快速发展的阶段，其自身的一个变化与遇到的性能挑战。

• 支付宝 Hybrid 方案建设与演进 （H5 容器 & 小程序）

  为了应对前面提到的这些挑战，支付宝逐步沉淀出 2 套 Hybrid 方案，分别是 H5 容器与小程序。

• Hybrid 方案借助移动开发平台 mPaaS 对外输出

  经过 mPaaS 平台，让你们也能够去接触使用到支付宝的 Hybrid 技术。

0. 移动互联网背景下的高可用性能挑战

根据公开的 2018 年移动互联网行业分析报告，目前支付宝的月活跃用户已经超过 QQ ，成为国内第二大 App。

支付宝一开始仅仅只是一个单体应用的工具型 App，让用户能够在手机完成支付宝相关的业务查询和操做。2013 年后，支付宝逐步转型为平台型 App， 平台型 App 具备服务化、模块化、工具组件化的特色。这个时候支付宝的业务不只仅是支付，还须要给客户提供不少生活相关的服务，例如余额宝、缴电费等。2015 年后支付宝成长为超级 App，此时支付宝里面须要支持大量复杂的业务，同时开放本身的商业能力，用本身流量助力合做伙伴，所以整个 App 面临开放、动态化、高可用的挑战。

从单体应用到超级 App 的转变，其实体现了一个用户对 App 需求的变化：移动互联网用户需求的本质是服务，而不是 App，用户高频使用的 App 是少数。在 超级 App 时代，支付宝主要面临的挑战是：

1. 支持复杂业务

   App 的业务愈来愈复杂，不只仅是内部业务，还包含了大量外部的合做伙伴。若是采用传统的 App 开发方式很难应对日趋复杂的业务场景。

2. 知足业务快速迭代的需求

   当前业务的另一个特色就是须要快速迭代，变化的政策、突发事件都须要咱们能够快速把新的业务需求触达给用户。可是对于 App 开发者有一个不容忽视的问题，就是应用商店审核。因为审核的存在，App 上开发的业务会有一个统一排期，好比说月底会有新版本，那么全部的业务进度都得考虑 App 的排期计划。

3. 开放平台

   做为超级 App，一个最主要的特征就是开放。开放就是共享 App 的流量，让外部伙伴的业务能够经过支付宝触达用户，这就面临一个质量管控的问题。支付宝须要保证这些业务是合法合规的，保障用户的财产安全。

在超级 App 时代，使用纯 Native 开发会遇到很大的局限性（这里纯 Native 开发指的是，iOS 使用 Objective-C 或者 Swift 开发、Android 使用 Java 或者 Kotlin开发）。纯 Native 开发，业务逻辑的变化都须要经过发布新版原本触达用户，因此会面临前面提到的发布审核周期长的问题。另外一方面，用户每次须要使用新功能，都须要更新一次 App ，这对用户来讲是一个成本很高的问题，会致使新业务很难在短期覆盖用户。

站在开发的角度，纯 Native 的开发效率会比前端低不少，并且同时须要 iOS 和 Android 的开发人员。包大小也是须要考虑的问题，若是目前支付宝的业务都是用 Native 开发，你们看到的包大小得增长好几倍，这进一步增长了用户的升级成本。做为开放平台，Native 代码的权限和版本管理会变得异常的复杂，每次发版本就都须要同时协调内部和外部伙伴的业务，事情就变得很是糟糕了。

因此，如今 App 开发确定离不开 Hybrid 方案，Hybrid 方案就是混合开发，同时结合了 Native 开发和 Web 开发技术。Web 开发通过 20 年的发展，已经将「结构 HTML、表现 CSS 和 行为 JS 」3 部分拆开，所以具备很高的开发效率。Hybrid 方案同时具备跨平台的特征，一份代码同时发布到 iOS 和 Android，节省开发时间。基于 Hybrid 方案开发的业务能够快速发布，而不用考虑 App 发版实践，给业务很大的灵活性。相比于 Web 开发，Hybrid 方案提供了丰富的设备 API，让更多业务形态成为可能。

1. 支付宝 Hybrid 方案建设与演进

目前支付宝有 2 套 Hybrid 方案： H5 容器与小程序。小程序是最近几年才出来，H5 容器已经有了很长时间的历史，因此咱们就先从 H5 容器提及。

• H5 容器

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

最上层是浏览器，这块就是你们常见的 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 方案是无法提供相关的网络优化。

  

  H5 容器提供的 JSBridge 解决了这个问题，全部 H5 页面须要从后台获取的数据都经过 JS Bridge 调用 Native 的 RPC SDK 来获取。这样实际 App 请求的数据都是由 RPC SDK 来发送，从而能够实现安全加密、签名校验、弱网优化、流量优化的功能。Native 层的这些功能是 Web 页面开发人员无感知的，因此业务开发人员只须要专一其自身的业务开发便可。安全性由支付宝底层 SDK 保障。

  

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

1. JSAPI

   JSAPI 方式给 H5 页面增长了 Native 功能调用接口，经过实现自定义 JSAPI 类中的 handler 方式，能够以 Native 的形式实现特定功能，例如调用 Native 加密函数。

2. 事件

   H5 容器在状态变化时会发送事件，经过监听 H5 容器特定事件，能够实现对 H5 容器生命周期的处理，好比修改加载进度条颜色、修改页面导航栏等。事件提供了更强的定制性，彻底能够知足对 H5 容器的各类自定义需求。

   • H5 容器离线包

   H5 容器离线包是 H5 容器用户体验的关键。

   在 App 里面打开一个线上页面的时候，一般会有一个白屏的阶段，这是浏览器须要从服务器下载 HTML 资源。因为手机网络的限制，这个时间会很不肯定，一般会花费 300ms 以上的时间，用户在这个时间里面就会看到页面白屏。

   

   为了优化 H5 容器用户体验，减小白屏时间，支付宝在 H5 容器中引入了离线包技术。离线包能够简单理解为一个 zip 压缩包，其中包含前端页面所需的 HTML、CSS、JS、图片等资源。内置到客户端后，H5 容器打开离线包页面时会直接从离线包中获取资源，这个是毫秒的访问时间，消除了打开页面白屏现象。

   在支付宝中，离线包分为 2 种：普通的业务资源包和公共资源包。先说公共资源包吧，公共资源包中会包含一些框架 JS、CSS、常见图片等，这些资源在整个 App 里面就只保存一份；而业务资源包中只保存该业务所需的页面静态资源，业务之间是相互独立解耦的。这样一个业务的页面资源就会同时来自其业务资源包和公共资源包，公共资源包的存在优化了 App 大小。

   

   为了知足快速发布的需求，H5 容器离线包提供了更新机制，以单个离线包做为更新维度。由于单个离线包业务很简单，因此离线包的大小是可控的，一般小于 500KB，这样单个离线包的更新时间可控，能够作到用户无感知。在一些极端网络场景下，新的业务资源包更新超过，而咱们又指望用户使用的是最新的业务，这个时候 fallback 访问机制就会发挥做用。每一个离线包资源都会在服务器存放一份，在刚刚说到的极端场景下，用户会访问服务器的 fallback 地址获取资源，从而保障页面可用。

   

   结合前面说到的离线包后，整个 H5 容器渲染流程以下。其中离线包资源的更新、下载对用户无感知，页面访问的资源是来自离线包仍是来自 fallback 地址对前端是无感知的。

   

   • UC Webview 内核

   为了提升 H5 容器稳定性，支付宝在安卓系统上使用了 UC Webview，UC Webview 的崩溃率和 ANR 率远低于系统浏览器，并且完全规避了安卓系统 Webview 碎片化问题，相信作过安卓前端页面兼容的同窗必定能够体会到使用一个浏览器内核的好处。

   

   H5 容器做为一个成熟的 Hybrid 方案能够知足大部分的业务场景需求，可是其依然存在一些局限性。H5 容器的业务开发部分还保持着前端开发思惟，毕竟整个过程都是使用的前端技术，只须要在业务开发完成后集成到 App 中完成测试。可是客户端开发其中还有不少关键的概念，例如 iOS 的 ViewController 、Android 的 Activity 等，对客户端页面栈有清楚的了解更有助于开发 H5 容器。同时 H5 容器还存在一个致命的问题就是没法管控质量，宽泛的前端规范让管控变得异常困难。

   • 支付宝小程序

   为了解决 H5 容器的局限性，顺应当前 App 共享开放的需求，支付宝推出了新的 Hybrid 方案：支付宝小程序。支付宝小程序一种全新的开放模式，它运行在支付宝客户端，能够被便捷地获取和传播，为终端用户提供更优的用户体验 。支付宝小程序基于 Web 技术，所以学习成本低；其一套代码同时支持 iOS 和 Android；并提供了丰富组件和 API；彻底为 App 开发而生。目前支付宝小程序已经提供 2000 多个开放接口，API 日调用次数超过 25 亿次，拥有超过 100 万的合做伙伴和超过 10 万个活跃服务商。

   支付宝小程序同时还支持了阿里系多个 App，包括口碑、高德和钉钉。

   那么支付宝小程序是怎么解决 H5 容器的局限性呢？首先支付宝小程序是基于一个定制的 DSL 语言，不是前端的标准，可是相似。在 DSL 规则下业务进行小程序的开发，不支持直接操做 DOM，这种 DSL 规则下的自由能够有效的进行质量管控。另外支付宝小程序能够提供比 H5 小程序更优秀的性能、体验和兼容性，能够无感替换底层框架，应对遇到的性能问题。

   目前支付宝小程序也支持前面提到的 H5 容器所使用的离线包技术，同时也支持 JSAPI 和事件的扩展方式，提供了更大的灵活性。

   

支付宝小程序的 DSL 语言包括了 4 部分：

• JSON

文件用来提供小程序相关的配置，这里就强调了 page 和 window 的概念，支持用户去配置导航栏等 App 开发中的概念。

• axml

能够理解为小孩程序的页面 HTML，不支持直接操做 DOM 保障了页面逻辑的可控。

• JS

用来描述代码逻辑，提供了 Page 中所需的各类生命周期，让开发者有 App 中的各类概念。

• acss

相似于 H5 中的 CSS，支持大部分 CSS 语法，让前端开发能够快速完成小程序 UI 设计。

目前支付宝小程序已经逐步开放给我的开发者使用，你们能够申请开通，享受支付宝带来的流量。

2. Hybrid 方案借助 mPaaS 对外输出

支付宝沉淀的 Hybrid 方案 H5 容器和小程序已经通过实际严苛的业务考验，经过前面的介绍相信你们已经有了了解。你们来听分享主要是为了提高技术解决本身遇到的业务问题，经过一个分享了解框架不难，重点是怎么应用到实际的业务场景中。

从 0 开始开发一套 Hybrid 框架须要大量的人力以及反复的业务验证，对于大部分公司来讲成本过高。而使用开源的 Hybrid 框架，例如 Cordova、Weex、React Native、Flutter等会面临一个很是致命的问题，就是遇到框架层的问题，很难得到及时有效的技术支持。

目前支付宝的 Hybrid 方案已经借助移动开发平台 mPaaS 对外输出，解决前面提到的痛点，让你直接和支付宝使用同一套框架层代码，并且提供及时的技术支持。

mPaaS 是一站式移动开发解决方案，提供了移动开发所需的 5 大组件：MGS、MDS、MPS、MAS、MSS，这些组件都是基于支付宝，通过实际业务考验，你们能够经过 mPaaS 官网 了解更多详细信息。

其中 mPaaS 的 Hybrid 解决方案就包含前面提到：H5 容器、离线包、小程序 三大部分。

mPaaS H5 容器是一个移动端 Hybrid SDK，提供了良好的外部扩展，可结合具体业务需求定制 JSAPI。在 Android 上使用 UC Webview，拥有解决系统级 Webview Crash 的能力。

mPaaS H5 离线包将 HTML 静态资源压缩预置到客户端或经过 WIFI 预加载到本地，使用时直接从本地加载，从而最大程度地提升性能。结合 mPaaS MDS 推送服务，能够实现灰度发布、强制更新，让业务的开发更加灵活。

mPaaS 小程序可让你们本身的 App 使用小程序技术开发，构建本身的 App 生态，也就是说一步到位让其知足超级 App 的能力。因为底层使用的就是支付宝小程序的技术，能够无缝迁移支付宝小程序到本身的 App 中。

目前支付宝小程序的 IDE 已经支持多渠道，包括支付宝、mPaaS和钉钉，点击切换便可轻松将小程序发布到对应的平台。

做为 mPaaS 产品的小程序能够给各位开发者带来什么呢？首先开放的接口有助于你们构建本身的业务生态，统一标准让共建开发生态成为可能。从而能够作到业务互通，相互引流，丰富的渠道实现多端投放的能力。

| 移动开发平台 mPaaS 三款组件重磅上线蚂蚁金服开放平台：

• 公测期，欢迎体验试用

往期阅读

《开篇 | 蚂蚁金服 mPaaS 服务端核心组件体系概述》

《蚂蚁金服 mPaaS 服务端核心组件体系概述：移动 API 网关 MGS》

《蚂蚁金服 mPaaS 服务端核心组件：亿级并发下的移动端到端网络接入架构解析》

《支付宝 App 构建优化解析：经过安装包重排布优化 Android 端启动性能》

《支付宝 App 构建优化解析：Android 包大小极致压缩》

关注咱们公众号，得到第一手 mPaaS 技术实践干货

钉钉群：经过钉钉搜索群号“23124039”

期待你的加入～