支付寶移動端 Hybrid 解決方案探索與實踐

本文內容主要分爲如下三個部分：

• 移動互聯網背景下的高可用性能挑戰

主要給你們介紹支付寶 APP 在這幾年移動互聯網快速發展的階段，其自身的一個變化與遇到的性能挑戰。

• 支付寶 Hybrid 方案建設與演進 （H5 容器 & 小程序）

爲了應對前面提到的這些挑戰，支付寶逐步沉澱出 2 套 Hybri 方案，分別是 H5 容器與小程序。

• Hybrid 方案藉助移動開發平臺 mPaaS 對外輸出

經過 mPaaS 平臺，讓你們也能夠去接觸使用到支付寶的 Hybrid 技術。

移動互聯網背景下的高可用性能挑戰

根據公開的 2018 年移動互聯網行業分析報告，目前支付寶的月活躍用戶已經超過 QQ ，成爲國內第二大 App。

支付寶一開始僅僅只是一個單體應用的工具型 App，讓用戶能夠在手機完成支付寶相關的業務查詢和操做。2013 年後，支付寶逐步轉型爲平臺型 App， 平臺型 App 具備服務化、模塊化、工具組件化的特色，這個時候支付寶的業務不只僅是支付，還須要給客戶提供了不少生活相關的服務，例如餘額寶、繳電費等。2015 年後支付寶成長爲超級 App，超級 App 會面臨開放、動態化、高可用的挑戰，此時支付寶裏面須要支持大量複雜的業務，同時開放本身的商業能力，用本身流量助力合做夥伴。
從單體應用到超級 App 的轉變，其實體現了一個用戶對 App 需求的變化，移動互聯網用戶需求的本質是服務，而不是 App，用戶高頻使用的 App 是少數。在 超級 App 時代，支付寶主要面臨的挑戰是：

一、支持複雜業務

App 的業務愈來愈複雜，不只僅是內部業務，還包含了大量外部的合做夥伴。若是採用傳統的 App 開發方式很難應對日趨複雜的業務場景。

二、知足業務快速迭代的需求

當前業務的另一個特色就是須要快速迭代，變化的政策、突發事件都須要咱們能夠快速把新的業務需求觸達給用戶。可是 App 開發一個不容忽視的問題，就是應用商店審覈。因爲審覈的存在，App 上開發的業務會有一個統一排期，好比說月底會有新版本，那麼全部的業務進度都得考慮 App 的排期計劃。

三、開放平臺

做爲超級 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，讓更多業務形態成爲可能。

支付寶 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 方案是無法提供相關的優化。

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 設計。

目前支付寶小程序已經逐步開放給我的開發者使用，你們能夠申請開通，享受支付寶帶來的流量。

Hybrid 方案藉助移動開發平臺 mPaaS 對外輸出

支付寶沉澱的 Hybrid 方案 H5 容器和小程序已經通過實際嚴苛的業務考驗，經過前面的介紹相信你們已經有了瞭解。

從 0 開始開發一套 Hybrid 框架須要大量的人力以及反覆的業務驗證，對於大部分公司來講成本過高。而使用開源的 Hybrid 框架，例如 Cordova、Weex、React Native、Flutter等會面臨一個很是致命的問題，就是遇到框架層的問題，很難得到及時有效的技術支持。

目前支付寶的 Hybrid 方案已經藉助移動開發平臺 mPaaS 對外輸出，解決前面提到的痛點，讓你直接和支付寶使用同一套框架層代碼，並且提供及時的技術支持。

mPaaS 是一站式移動開發解決方案，提供了移動開發所需的 5 大組件：MGS、MDS、MPS、MAS、MSS，這些組件都是基於支付寶，通過實際業務考驗。

其中 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和釘釘，點擊切換便可輕鬆將小程序發佈到對應的平臺。

你們能夠點擊「閱讀原文」，獲取 Demo 源碼，進一步瞭解 mPaaS HTML5 容器&離線包特性和亮點。

• Demo 源碼地址：https://github.com/alipay/mpaas-demo
• 公測申請：http://mpaas2019.mikecrm.com/otOU1k1

---

本文做者：燒鹼Jusef

閱讀原文

本文爲雲棲社區原創內容，未經容許不得轉載。