寫在前面
自從微信小程序推出以來，越來越多的業務場景可以通過小程序構建體驗閉環，同時各大廠商也紛紛推出了自己的小程序平臺。究其背後的原因，筆者認爲由於近年來移動互聯網的頭部流量聚集效應愈發明顯，如何做好存量市場的活躍度成爲各大 App 的核心課題。根據《中國移動互聯網全景生態流量洞察報告》顯示，頭部 O2O 的應用最大流量來源顯示已經是小程序。對於小程序，一方面它需要降低接入門檻，並提供足夠安全的方式確保第三方業務能夠良好運行，另一方面需要結合自身平臺的優勢能力，讓第三方業務場景找到更多的結合點與可玩性。
本文基於夜禹在螞蟻金服 CodeDay#3 上海站的分享議題《小程序一站式研發深度解析》整理成稿，着重向讀者介紹 mPaaS 小程序技術體系以及背後技術細節。與其他小程序研發平臺不同的是，mPaaS 小程序技術體系能夠讓開發者擁有自己的小程序開放平臺。基於 mPaaS 小程序，開發者不僅可以在自己的應用中快速開發上線小程序，甚至可以邀請其他開發者爲自己開發小程序。由於mPaaS與支付寶共用一套技術體系，因此支付寶的小程序可以順利投放到開發者自己的應用內。
小程序技術選型
構建生態方面，爲何小程序選型更優？
在小程序出現之前，我們通常會直接使用第三方提供的 HTML5 頁面來實現業務合作。直接用 HTML5 來構建開放平臺看起來是比較簡單易行的方案，但當 App 面對海量的第三方接入方時，就顯得捉襟見肘了。直接使用 HTML5 主要面臨以下幾個問題：
- 應用體驗：直接使用第三方 HTML5 頁面，意味着 HTML5 頁面的性能體驗直接取決於第三方，比如硬件規格大小、CDN 部署、前端框架選型等等。第三方研發水平的參差不齊直接影響原生 App 的用戶體驗，甚至穩定性，反而會讓用戶流失，適得其反。
- 應用安全：由於 HTML5 頁面部署在第三方服務器上，平臺方很難及時審覈控制頁面內容的改動，監管的風險不可控制。第三方服務的安全問題同樣危及到 App 自身的安全。
- 研發門檻：HTML5 頁面的開發儘管比原生開發簡單，但依然具有一定的門檻，比如對前端框架的熟練程度，工具鏈的配置，服務器購置等等。只有更進一步降低研發門檻，才能爭取到更多非 Web 技術棧開發者羣體。
小程序定義
在我們全面介紹小程序之前，首先要給小程序下個定義，這直接決定了我們要做什麼事情。用一句話來概括，小程序是個“應用”。小程序作爲“應用”具備以下幾個特點：
- 生命週期：和原生應用開發類似，小程序頁面擁有完整的生命週期，從應用打開到應用關閉，開發者都能夠感應到生命週期的變化，這一點是 HTML5 頁面所不具備的。
- 應用隔離：考慮到安全，各個小程序在運行時和持久存儲上都是隔離的。首先，小程序運行在獨立子進程中，即使發生崩潰，也不會影響宿主應用所在的主進程；其次，宿主應用爲每個小程序分配獨立的持久存儲控件，每個小程序只能訪問被分配的存儲目錄。
- 應用框架：應用框架分爲視圖、邏輯、樣式三個部分。在視圖方面，與H5明顯不同的是，標記語言的使用更加簡化，根據以往在應用開發中積累的最佳實踐，定義一部分常用視圖組件，開發者很容易選擇自己需要的組件。沿用虛擬 DOM 的概念，開發者無法直接操作視圖更新，只能通過更新視圖綁定的數據源來刷新頁面，避免直接操作類似 DOM 的數據結構而產生性能問題。樣式方面，直接沿用 CSS 屬性，但引入新的尺寸單位 rpx 用於快速適配移動端屏幕。
應用開發必然不能缺少完善工具鏈的支持，小程序 IDE 集合了編碼、調試、預覽以及發佈等能力。客戶端經過簡單的適配，即可在真機應用中實時預覽和調試小程序。
渲染方案
我們依然使用 WebView 作爲小程序的渲染引擎，但保留了未來切換引擎的可能性。開發者編寫的小程序需要經過一系列的打包流程轉換爲 Web 引擎可執行的資源。打包後的產物不僅包含頁面、代碼和資源，同時也包含 API 訪問權限、小程序文件簽名等安全信息用於客戶端進行安全校驗。
小程序採用雙線程模式將頁面渲染和業務邏輯分別放在兩個單獨的線程中，renderer 運行在 WebView 中，負責渲染界面；小程序業務邏輯運行在單獨的 worker 線程，負責事件處理、API 調用和生命週期管理。兩個線程之間通過postMessage 以及 onMessage 進行數據交換，數據可以從 worker 線程傳遞到 render 重新渲染界面，同時renderer也可以將事件傳遞給對應的 worker 處理。一個 worker 可以對應多個 renderer，方便頁面間數據共享和交互。
對於渲染速度、交互響應要求高的場景，如地圖，小程序將原生地圖組件嵌入到 WebView 上，相比在 Canvas 上渲染地圖，繪製速度和效率更高。
資源加載方面，小程序採用離線化方式加載，也就是說當打開小程序時，小程序離線包必須下載到本地，由於每個版本只下載一次，一方面節省了每次請求的資源開銷，另一方面啓動速度大大提升了。當有新的版本時，發佈平臺自動比對本地安裝的版本和最新版本產生並下發差量包，客戶端不需要下載整個包即可更新小程序至最新版。
小程序平臺體系
除了優秀的應用框架和用戶端體驗之外，小程序能力擴展、應用分發、監控及數據分析等方面進行也是必不可少的。
能力擴展
mPaaS 本身已集成近上百個常用的 API，包括網絡、媒體、存儲、定位、掃碼、藍牙等等，這些 API 同樣可以完美的運行在支付寶中。不僅如此，應用開發者可以將自己特色的功能通過小程序容器的插件機制透出給小程序開發者。
應用分發
mPaaS MDS 發佈服務不僅可以下發 HTML5 離線包、開關配置和熱修復包，同樣也能夠分發小程序包。MDS 的灰度能力在小程序上同樣適用，小程序全量上線之前，我們可以以白名單、時間窗、地域、應用版本等維度進行灰度發佈，在灰度期間驗證小程序的可用性、穩定性。
監控與分析
小程序上線後，我們是一定會希望瞭解小程序的運行數據，不僅是性能穩定性，也包括業務方面的數據。小程序容器內置一套通用性指標，如小程序頁面打開/關閉、JavaScript 執行異常、頁面白屏、啓動耗時、閃退等數據在指定點位自動抓取並擇機上報至 MAS 分析服務，MAS 提供實時大盤以多種維度展現這些數據。業務方面的數據指標，小程序提供數據上報接口供開發者調用，上報的數據經過 MAS 提供的自定義分析引擎展現自己所希望可到的報表形式。
快速接入小程序
mPaaS 最近發佈了新的基線版本，該版本增加了相當多的小程序特性，除了支持更多的 API 之外，真機預覽與調試功能也已經上線，可以在公有云上使用。對於 Android 平臺，相較於傳統複雜的接入方式，我們提供更加輕便的接入方式，叫做 mPaaS Inside，意思是把 mPaaS 當做 SDK 嵌入到自己的 App 裏，開發者不需要再和以前一樣只能大幅改造自己的 App 才能接入 mPaaS。
具體步驟可參考：
- Step1：申請試用 mPaaS：http://mpaas2019.mikecrm.com/otOU1k1
- Step2：接入 mPaaS，對於Android端快速接入，可參考文檔：https://tech.antfin.com/docs/2/109312
- Step3：按照文檔：https://tech.antfin.com/docs/2/67444，客戶端接入mPaaS 小程序
- Step4：下載IDE：https://tech.antfin.com/docs/2/67487，開發、調試、預覽小程序：
- Step5：在IDE中發佈小程序，然後登陸mPaaS控制檯確認發佈。
同時歡迎大家使用釘釘搜索羣號“23124039”加入 mPaaS 技術交流羣，期待與你交流。
