支付寶小程序框架淺析及如何在 mPaaS 內深度集成

1. 前言

本文將結合闊懸在 iWeb 杭州站沙龍現場的分享《支付寶小程序在 mPaaS 中的深度集成實踐》，介紹支付寶小程序框架的設計原理，以及如何在 mPaaS 體系中的深度集成支付寶小程序。

分享內容將從如下兩個方面展開：

• 支付寶小程序框架的系統介紹（支付寶小程序框架概述、應用層框架、Native SDK）
• mPaaS 技術架構與助力（mPaaS 小程序、mPaaS 小程序 IDE、mPaaS MDS）

2. 小程序簡介：移動互聯網新熱點

近來，小程序儼然成爲了移動互聯網的新熱點。繼 2017 年初微信正式推出微信小程序後，各個大廠陸續發佈了各自的小程序 —— 支付寶小程序、百度小程序、頭條小程序，小程序成爲了各家移動互聯網生態佈局的重要一環。

經過小程序生態能夠引入大量的外部服務，不只豐富了平臺的能力，並且能夠爲平臺帶來大量的用戶流量，從而使得平臺具有無限的潛能。

3. 支付寶小程序簡介

支付寶小程序是一種全新的開發模式，它運行在支付寶客戶端，能夠被便捷地獲取和傳播，爲終端用戶提供更優的用戶體驗。爲方便小程序的開發者，支付寶小程序具備相似微信小程序的 DSL 和開發環境，下降小程序開發者的學習成本。

4. 支付寶小程序框架淺析

1. 基礎需求

小程序的本質需求是讓第三方開發者能夠接入，使得第三方開發的小程序能夠在平臺級應用中運行。

對於這個需求，最簡單的實現方案是：讓外部開發者開發純 H5 應用，在應用的

H5 容器裏打開，容器提供一些原生的接口供H5使用。好比在支付寶和微信上的「滴滴出行」以 H5 的形式運行在各自的平臺中，這種模式看似還不錯，可是實際上這種簡單的方案不能知足這兩個小程序的基礎需求：

1. 體驗：做爲一個「小程序」須要讓體驗接近原生，而上述像滴滴出行這些普通 H5 的體驗不太行，包括啓動速度、頁面切換流暢度都有問題，跟原生體驗無法比。
2. 管控：做爲一個平臺必須對接入的應用有管控能力，必須能儘可能精確控制應用的內容和類型，畢竟若出現非法應用平臺是要承擔責任的，H5 的方式太過自由，開發者能夠隨時改變整個應用的內容，平臺難以檢測到這些改變，沒法管控。另外 H5 開發質量良莠不齊，平臺也沒法管控。

2. 框架概述

爲了實現小程序並知足上述的小程序的兩個需求，小程序框架應運而生。咱們先看下小程序框架大圖，自上而下看。

1. 小程序代碼：這是小程序開發者使用小程序 DSL 及各類組件開發的小程序。
2. 小程序組件及 API：這是小程序的組件及 API 層，提供了小程序所需的各類組件和小程序 API。小程序開發者只須要在基於這一層提供的組件及 API 進行小程序的開發。
3. 小程序應用層框架：這是小程序運行的框架層，它基於 React 實現了小程序的運行框架。該層主要包含小程序的邏輯處理引擎及渲染層。
4. Native SDK：該層提供了小程序所需的 Native 能力，經過J avaScriptCore 爲小程序的 JS 層框架提供大量的 Native API，此外該層還提供了小程序包管理、後臺保活等基礎能力。
5. React 和 React Native：這一層是小程序底層運行環境，分別對應於 Web 和 Native 環境，使得小程序可運行在 WebView 和 iOS/Android 上。
6. 系統層：即 Web 內核、iOS 和 Android，是系統級的平臺層。

目前支付寶的小程序使用的是 React 版，螞蟻內部的其餘 App 有在使用 React Native 版的小程序。

3. 應用層框架

咱們一塊兒看下小程序應用層框架。每一個小程序的代碼分爲兩部分——邏輯處理和視圖渲染，分別運行在 worker （js 引擎） 以及 render （渲染層）中。

• worker 運行小程序的邏輯處理代碼，包括事件處理，api 調用以及框架的生命週期管理。 worker 只有一個，方便 App 數據在頁面間的共享和交互。
• render 運行小程序的渲染代碼，主要包括模版、樣式和框架的跨終端的 js 組件或 native 組件，獲取邏輯層的數據操做渲染引擎（React/ReactNative）進行渲染，render 在小程序中能夠有多個。
• worker 和全部的 render 都創建鏈接，將須要渲染的數據傳遞給對應的 render 進行渲染，worker 也會將 api 調用轉給 Native SDK 處理。
• render 則將組件的觸發事件送到對應的 worker 處理，同時接受 worker 的調用進行從新渲染。 render 能夠看做一個無狀態的渲染終端，小程序的狀態都保留在 worker 內。

可見該框架能夠作到，JS 邏輯代碼與頁面渲染分離並行執行，不會出現 JS 代碼執行時卡住頁面渲染的狀況，進而提高渲染性能。多個頁面能夠共享一個 JS 運行環境，數據能夠很方便地共享，整個小程序生命週期裏共享同一個上下文，更接近 App 的開發體驗。小程序的模板樣式是自定義的格式，這樣能夠作到開發時使用固定的 DSL，不依賴底層的渲染引擎，這樣引擎的優化升級不會形成上層的小程序代碼的不兼容，而且渲染行爲是徹底是可控的。

4. Native SDK

咱們再看 Native 層，在支付寶中是由 Nebula H5 容器負責實現，它爲小程序提供 Native 能力，爲小程序提供的包管理、後臺保活等功能。

• Native API：小程序調用的 API 中有部分功能須要在 native 中實現，這部分 API 經過橋接調用進入對應的 Native API。
• 包管理：負責小程序包的下載、存儲、加載。小程序包的下載具備多種策略，能夠知足小程序的預下載、強制更新等需求。
• 後臺保活：小程序在後臺能夠存活 5 分鐘，使得用戶在下次打開時能夠得到更好的體驗。

5. 小結

如今讓咱們回到前面提到的兩個小程序的基本需求，體驗和管控。咱們看下框架是如何實現這兩個需求的。對於體驗需求，主要有如下幾點：

• 框架對小程序作了邏輯處理和視圖渲染的分離以提高渲染性能
• 對於較重的組件（地圖）使用 Native 實現以提高性能
• 小程序公共資源預置在小程序框架以提高加載性能
• 後臺保活機制提升二次啓動速度

對於管控需求，主要有兩點：

• 小程序開發只能使用框架提供的自定義的模板樣式
• JS 代碼運行在與 Webview 隔離的 JS 引擎中，沒法操做瀏覽器 DOM

5. mPaaS 技術架構與助力

1. 支付寶小程序與 mPaaS

小程序這麼有優點，那可否把支付寶小程序放到其餘 APP 中運行呢？答案是確定的，藉助 mPaaS，小程序技術不只在螞蟻金服內部使用，也可以提供給外部用戶使用。

首先簡單介紹下什麼是 mPaaS，mPaaS 全稱是 Mobile Platform as a Service，即移動端的 PaaS 。做爲螞蟻金服首創的移動研發平臺，它源於支付寶近 10 年的移動技術的沉澱，爲移動開發、測試、運營及運維提供雲到端的一站式解決方案，能有效下降技術門檻、減小研發成本、提高開發效率，協助生態夥伴快速搭建穩定高質量的移動 App。

2. mPaaS 小程序

再來看下什麼是 mPaaS 小程序，它是在支付寶小程序的基礎上作了瘦身、去依賴的小程序 SDK，爲了能便捷的輸出給其餘 App 快速地搭建出小程序平臺。它保持和支付寶小程序同樣的模板樣式和通用 API，僅僅少許的像受權這樣的開放的 API 須要客戶自定義開發。藉助 mPaaS 小程序，能夠作到一套小程序代碼，在支付寶和本身的 App 上雙端投放和運行，甚至能夠構建出本身的小程序生態體系。

這裏和你們分享下 mPaaS 小程序在其餘 App 中集成時可能須要解決的問題：

• SDK 集成衝突，這個是多個 SDK 集成可能會遇到的共性問題，通常經過去除不要的 SDK 或者對 SDK 中部分符號名作針對性的修改。
• 開放 API 定製開發，開放 API 依賴後端的服務，好比用戶受權這個 API，它須要獲取用戶的帳號信息，那麼就須要重寫這個 API 的具體實現，去訪問 App 的用戶中心服務以實現受權功能。小程序框架提供了一套自定義和重寫 API 的插件機制，能快速的去重寫某個 API，甚至添加一個新的 API。

3. mPaaS 小程序 IDE

小程序的開發除了可以使用支付寶小程序開放平臺提供的 IDE，還可使用 mPaaS 版的小程序 IDE。經過 mPaaS 版的 IDE 能夠導出本地的小程序包，後續在 mPaaS 發佈平臺中使用這個本地包直接發佈。將來，小程序 IDE 將會與 mPaaS 直接打通，在 IDE 中能夠直接完成 mPaaS 小程序的開發、測試和發佈這一系列的開發運維體驗。

4. mPaaS MDS

小程序技術的一個基礎的能力，就是小程序發佈系統。mPaaS 小程序的發佈服務是由 mPaaS 的移動發佈系統（MDS）提供的。MDS 提供多種發佈策略，可以在正式發佈以前進行多種類型的灰度測試。MDS 提供增量差分包更新能力，可減小更新包的體積，在移動端網絡不穩定場景中發揮優點。

mPaaS MDS 控制檯

目前，mPaaS 小程序已在衆多政務項目中落地服務，幫助政務小程序在支付寶和自有 App 雙端投放運行。相同的業務功能使用小程序實現，在支付寶和自有 App 中可進行共用，能顯著地下降開發成本，作到業務的快速上線及動態更新。

若是想要進一步瞭解 mPaaS 小程序，能夠複製地址到瀏覽器中打開： t.cn/ELBlvEr

關於小程序框架的優化思路或具體實踐，若是你有任何疑問或建議，歡迎隨時和咱們一同交流。

往期閱讀

《開篇 | 模塊化與解耦式開發在螞蟻金服 mPaaS 深度實踐探討》

《支付寶移動端動態化方案實踐》

《支付寶客戶端架構解析：iOS 容器化框架初探》

《支付寶客戶端架構解析：Android 容器化框架初探》

《支付寶客戶端架構解析：Android 客戶端啓動速度優化之「垃圾回收」》

《Demo Show | 螞蟻金服 mPaaS IDEA 插件實踐》

《支付寶客戶端架構分析：自動化日誌收集及分析》

關注咱們公衆號，得到第一手 mPaaS 技術實踐乾貨