目前 mPaaS H5 容器 Demo 源碼已發(fā)布至 GitHub，全新的接入方式讓你可以一鍵集成 mPaaS 環(huán)境并快速接入 H5 容器，體驗(yàn)統(tǒng)一的容器和內(nèi)核，獲取媲美原生的 Hybrid 方案及完美的動(dòng)態(tài)能力。

支付寶 Hybrid 方案建設(shè)與演進(jìn)

目前支付寶有 2 套 Hybrid 方案： HTML5 容器與小程序。小程序是最近幾年才出來(lái)，H5 容器已經(jīng)有了很長(zhǎng)時(shí)間的歷史，所以我們就先從 H5 容器說(shuō)起。

• H5 容器

在支付寶中，HTML5 容器架構(gòu)如圖所示：

最上層是瀏覽器，這塊就是大家常見(jiàn)的 Web 開(kāi)發(fā)環(huán)境，包括 HTML、CSS、JavaScript等。H5 容器作為中間層，將瀏覽器和支付寶底層框架有機(jī)結(jié)合起來(lái)，在 H5 容器里面有 2 個(gè)非常重要的概念： JSBridge 和 離線包，后面會(huì)做詳細(xì)介紹。支付寶底層框架會(huì)給 H5 容器提供 Native 的能力，這其中就包括 RPC（遠(yuǎn)程過(guò)程調(diào)用，用來(lái)實(shí)現(xiàn) APP 和服務(wù)器通信）、支付、掃一掃等。

• JSBridge

JSBridge 是 H5 容器的基石，橋接了 JS 環(huán)境與 Native，實(shí)現(xiàn)了 Native 代碼和 瀏覽器 環(huán)境的雙向通信，Native 代碼可以通過(guò)調(diào)用 瀏覽器 提供的接口運(yùn)行JS，從而實(shí)現(xiàn)調(diào)用 JS 函數(shù)、傳遞參數(shù)到 JS 環(huán)境等；而瀏覽器到JS環(huán)境的通信是通過(guò) Native 攔截瀏覽器的請(qǐng)求來(lái)實(shí)現(xiàn)，請(qǐng)求可以是網(wǎng)絡(luò)請(qǐng)求或者是一些內(nèi)部函數(shù)的調(diào)用。

那么 JSBridge 會(huì)帶來(lái)什么好處呢，在傳統(tǒng)的 Web 開(kāi)發(fā)場(chǎng)景，H5 頁(yè)面會(huì)通過(guò) HTTP 的 GET 或者 POST 請(qǐng)求到后臺(tái)獲取數(shù)據(jù)，就會(huì)用到 jQuery 等 AJAX 框架。但是 H5 頁(yè)面中的 JS 函數(shù)公開(kāi)的，沒(méi)法做一些加密邏輯，同時(shí)對(duì)于無(wú)法優(yōu)化網(wǎng)絡(luò)。這幾年隨著 4G 和流量卡的普及，讓手機(jī)網(wǎng)絡(luò)變得更快、更便宜，在這之前大量用戶(hù)會(huì)面臨流量不足、信號(hào)差、網(wǎng)絡(luò)不穩(wěn)定的情況，這些場(chǎng)景在現(xiàn)在依然存在，而純 Web 方案是沒(méi)法提供相關(guān)的優(yōu)化。

H5 容器提供的 JSBridge 解決了這個(gè)問(wèn)題，所有 H5 頁(yè)面需要從后臺(tái)獲取的數(shù)據(jù)都通過(guò) JS Bridge 調(diào)用 Native 的 RPC SDK 來(lái)獲取。這樣實(shí)際 App 請(qǐng)求的數(shù)據(jù)都是由 RPC SDK 來(lái)發(fā)送，從而可以實(shí)現(xiàn)安全加密、簽名校驗(yàn)、弱網(wǎng)優(yōu)化、流量?jī)?yōu)化的功能。Native 層的這些功能是 Web 頁(yè)面開(kāi)發(fā)人員無(wú)感知的，所以業(yè)務(wù)開(kāi)發(fā)人員只需要專(zhuān)注其自身的業(yè)務(wù)開(kāi)發(fā)即可。安全性由支付寶底層 SDK 保障。

H5 容器提供了 2 種擴(kuò)展方式：
1. JSAPI
JSAPI 方式給 H5 頁(yè)面增加了 Native 功能調(diào)用接口，通過(guò)實(shí)現(xiàn)自定義 JSAPI 類(lèi)中的 handler 方式，可以以 Native 的形式實(shí)現(xiàn)特定功能，例如調(diào)用 Native 加密函數(shù)。

2. 事件
H5 容器在狀態(tài)變化時(shí)會(huì)發(fā)送事件，通過(guò)監(jiān)聽(tīng) H5 容器特定事件，可以實(shí)現(xiàn)對(duì) H5 容器生命周期的處理，比如修改加載進(jìn)度條顏色、修改頁(yè)面導(dǎo)航欄等。事件提供了更強(qiáng)的定制性，完全可以滿(mǎn)足對(duì) H5 容器的各種自定義需求。

• H5 容器離線包

H5 容器離線包是 H5 容器用戶(hù)體驗(yàn)的關(guān)鍵。
在 APP 里面打開(kāi)一個(gè)線上頁(yè)面的時(shí)候，通常會(huì)有一個(gè)白屏的階段，這是瀏覽器需要從服務(wù)器下載 HTML 資源。由于手機(jī)網(wǎng)絡(luò)的限制，這個(gè)時(shí)間會(huì)很不確定，通常會(huì)花費(fèi) 300ms 以上的時(shí)間，用戶(hù)在這個(gè)時(shí)間里面就會(huì)看到頁(yè)面白屏。

為了優(yōu)化 H5 容器用戶(hù)體驗(yàn)，減少白屏?xí)r間，支付寶在 H5 容器中引入了離線包技術(shù)。離線包可以簡(jiǎn)單理解為一個(gè) zip 壓縮包，其中包含前端頁(yè)面所需的 HTML、CSS、JS、圖片等資源。內(nèi)置到客戶(hù)端后，H5 容器打開(kāi)離線包頁(yè)面時(shí)會(huì)直接從離線包中獲取資源，這個(gè)是毫秒的訪問(wèn)時(shí)間，消除了打開(kāi)頁(yè)面白屏現(xiàn)象。
在支付寶中，離線包分為 2 種：普通的業(yè)務(wù)資源包和公共資源包。先說(shuō)公共資源包吧，公共資源包中會(huì)包含一些框架 JS、CSS、常見(jiàn)圖片等，這些資源在整個(gè) App 里面就只保存一份；而業(yè)務(wù)資源包中只保存該業(yè)務(wù)所需的頁(yè)面靜態(tài)資源，業(yè)務(wù)之間是相互獨(dú)立解耦的。這樣一個(gè)業(yè)務(wù)的頁(yè)面資源就會(huì)同時(shí)來(lái)自其業(yè)務(wù)資源包和公共資源包，公共資源包的存在優(yōu)化了 App 大小。

為了滿(mǎn)足快速發(fā)布的需求，H5 容器離線包提供了更新機(jī)制，以單個(gè)離線包作為更新維度。因?yàn)閱蝹€(gè)離線包業(yè)務(wù)很簡(jiǎn)單，所以離線包的大小是可控的，通常小于 500KB，這樣單個(gè)離線包的更新時(shí)間可控，可以做到用戶(hù)無(wú)感知。在一些極端網(wǎng)絡(luò)場(chǎng)景下，新的業(yè)務(wù)資源包沒(méi)有更新超過(guò)，而我們又期望用戶(hù)使用的是最新的業(yè)務(wù)，這個(gè)時(shí)候 fallback 訪問(wèn)機(jī)制就會(huì)發(fā)揮作用。每個(gè)離線包資源都會(huì)在服務(wù)器存放一份，在剛剛說(shuō)到的極端場(chǎng)景下，用戶(hù)會(huì)訪問(wèn)服務(wù)器的 fallback 地址獲取資源，從而保障頁(yè)面可用。

結(jié)合前面說(shuō)到的離線包后，整個(gè) H5 容器渲染流程如下。其中離線包資源的更新、下載對(duì)用戶(hù)無(wú)感知，頁(yè)面訪問(wèn)的資源是來(lái)自離線包還是來(lái)自 fallback 地址對(duì)前端是無(wú)感知的。

• UC Webview 內(nèi)核

為了提高 H5 容器穩(wěn)定性，支付寶在安卓系統(tǒng)上使用了 UC Webview，UC Webview 的崩潰率和ANR率遠(yuǎn)低于系統(tǒng)瀏覽器，而且徹底規(guī)避了安卓系統(tǒng) Webview 碎片化問(wèn)題，相信做過(guò)安卓前端頁(yè)面兼容的同學(xué)一定可以體會(huì)到使用一個(gè)瀏覽器內(nèi)核的好處。

H5 容器作為一個(gè)成熟的 Hybrid 方案可以滿(mǎn)足大部分的業(yè)務(wù)場(chǎng)景需求，但是其依然存在一些局限性。H5 容器的業(yè)務(wù)開(kāi)發(fā)部分還保持著前端開(kāi)發(fā)思維，畢竟整個(gè)過(guò)程都是使用的前端技術(shù)，只需要在業(yè)務(wù)開(kāi)發(fā)完成后集成到 APP 中完成測(cè)試。但是客戶(hù)端開(kāi)發(fā)其中還有很多關(guān)鍵的概念，例如 iOS 的 ViewController 、Android 的 Activity 等，對(duì)客戶(hù)端頁(yè)面棧有清楚的了解更有助于開(kāi)發(fā) H5 容器。同時(shí) H5 容器還存在一個(gè)致命的問(wèn)題就是無(wú)法管控質(zhì)量，寬泛的前端規(guī)范讓管控變得異常困難。

• 支付寶小程序

為了解決 H5 容器的局限性，順應(yīng)當(dāng)前 APP 共享開(kāi)放的需求，支付寶推出了新的 Hybrid 方案：支付寶小程序。支付寶小程序一種全新的開(kāi)放模式，它運(yùn)行在支付寶客戶(hù)端，可以被便捷地獲取和傳播，為終端用戶(hù)提供更優(yōu)的用戶(hù)體驗(yàn) 。支付寶小程序基于 Web 技術(shù)，因此學(xué)習(xí)成本低；其一套代碼同時(shí)支持 iOS 和 Android；并提供了豐富組件和 API；完全為 APP 開(kāi)發(fā)而生。目前支付寶小程序已經(jīng)提供 2000 多個(gè)開(kāi)放接口，API 日調(diào)用次數(shù)超過(guò) 25 億次，擁有超過(guò) 100 萬(wàn)的合作伙伴和超過(guò) 10 萬(wàn)個(gè)活躍服務(wù)商。

支付寶小程序同時(shí)還支持了阿里系多個(gè) App ，包括口碑、高德和釘釘。
那么支付寶小程序是怎么解決 H5 容器的局限性呢？首先支付寶小程序是基于一個(gè)定制的 DSL 語(yǔ)言，不是前端的標(biāo)準(zhǔn)，但是類(lèi)似。在 DSL 規(guī)則下業(yè)務(wù)進(jìn)行小程序的開(kāi)發(fā)，不支持直接操作 DOM，這種 DSL 規(guī)則下的自由可以有效的進(jìn)行質(zhì)量管控。另外支付寶小程序可以提供比 H5 小程序更優(yōu)秀的性能、體驗(yàn)和兼容性，可以無(wú)感替換底層框架，應(yīng)對(duì)遇到的性能問(wèn)題。
目前支付寶小程序也支持前面提到的 H5 容器所使用的離線包技術(shù)，同時(shí)也支持 JSAPI 和事件的擴(kuò)展方式，提供了更大的靈活性。

支付寶小程序的 DSL 語(yǔ)言包括了 4 部分：

• JSON

文件用來(lái)提供小程序相關(guān)的配置，這里就強(qiáng)調(diào)了 page 和 window 的概念，支持用戶(hù)去配置導(dǎo)航欄等 APP 開(kāi)發(fā)中的概念。

• axml

可以理解為小孩程序的頁(yè)面 HTML，不支持直接操作 DOM 保障了頁(yè)面邏輯的可控。

• JS

用來(lái)描述代碼邏輯，提供了 Page 中所需的各種生命周期，讓開(kāi)發(fā)者有APP 中的各種概念。

• acss

類(lèi)似于 H5 中的 CSS，支持大部分 CSS 語(yǔ)法，讓前端開(kāi)發(fā)可以快速完成小程序 UI 設(shè)計(jì)。

目前支付寶小程序已經(jīng)逐步開(kāi)放給個(gè)人開(kāi)發(fā)者使用，大家可以申請(qǐng)開(kāi)通，享受支付寶帶來(lái)的流量。

Hybrid 方案借助移動(dòng)開(kāi)發(fā)平臺(tái) mPaaS 對(duì)外輸出

支付寶沉淀的 Hybrid 方案 H5 容器和小程序已經(jīng)經(jīng)過(guò)實(shí)際嚴(yán)苛的業(yè)務(wù)考驗(yàn)，通過(guò)前面的介紹相信大家已經(jīng)有了了解。

從 0 開(kāi)始開(kāi)發(fā)一套 Hybrid 框架需要大量的人力以及反復(fù)的業(yè)務(wù)驗(yàn)證，對(duì)于大部分公司來(lái)說(shuō)成本太高。而使用開(kāi)源的 Hybrid 框架，例如 Cordova、Weex、React Native、Flutter等會(huì)面臨一個(gè)非常致命的問(wèn)題，就是遇到框架層的問(wèn)題，很難獲得及時(shí)有效的技術(shù)支持。
目前支付寶的 Hybrid 方案已經(jīng)借助移動(dòng)開(kāi)發(fā)平臺(tái) mPaaS 對(duì)外輸出，解決前面提到的痛點(diǎn)，讓你直接和支付寶使用同一套框架層代碼，而且提供及時(shí)的技術(shù)支持。
mPaaS 是一站式移動(dòng)開(kāi)發(fā)解決方案，提供了移動(dòng)開(kāi)發(fā)所需的 5 大組件：MGS、MDS、MPS、MAS、MSS，這些組件都是基于支付寶，經(jīng)過(guò)實(shí)際業(yè)務(wù)考驗(yàn)。

其中 mPaaS 的 Hybrid 解決方案就包含前面提到：H5 容器、離線包、小程序 三大部分。
mPaaS H5 容器是一個(gè)移動(dòng)端 Hybrid SDK，提供了良好的外部擴(kuò)展，可結(jié)合具體業(yè)務(wù)需求定制 JSAPI。在 Android 上使用 UC Webview，擁有解決系統(tǒng)級(jí) Webview Crash 的能力。
mPaaS H5 離線包將 HTML 靜態(tài)資源壓縮預(yù)置到客戶(hù)端或通過(guò) WIFI 預(yù)加載到本地，使用時(shí)直接從本地加載，從而最大程度地提高性能。結(jié)合 mPaaS MDS 推送服務(wù)，可以實(shí)現(xiàn)灰度發(fā)布、強(qiáng)制更新，讓業(yè)務(wù)的開(kāi)發(fā)更加靈活。
mPaaS 小程序可以讓大家自己的 App 使用小程序技術(shù)開(kāi)發(fā)，構(gòu)建自己的 App 生態(tài)，也就是說(shuō)一步到位讓其滿(mǎn)足超級(jí) App 的能力。由于底層使用的就是支付寶小程序的技術(shù)，可以無(wú)縫遷移支付寶小程序到自己的 App 中。
目前支付寶小程序的 IDE 已經(jīng)支持多渠道，包括支付寶、mPaaS和釘釘，點(diǎn)擊切換即可輕松將小程序發(fā)布到對(duì)應(yīng)的平臺(tái)。

原文鏈接
本文為阿里云原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。

總結(jié)

以上是生活随笔為你收集整理的支付宝移动端 Hybrid 解决方案探索与实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。