SuperApp：超級 App 業務應用平台簡介

本文介紹什麼是超級 App 業務應用平台，以及超級 App 業務應用平台的優勢和小程式開發架構選型。

什麼是超級App

超級App是一個集應用、平台和生態系統功能於一體的應用程式，不僅能夠為終端使用者（客戶、夥伴或員工）提供一系列核心功能，還能夠為第三方提供開發、發布小程式的平台。在超級App內，使用者可以選擇並啟用小程式，從而獲得一致性和個人化的應用體驗。

阿里巴巴超級 App 業務應用平台

阿里巴巴超級 App 業務應用平台是構建超級App及其生態系統的全棧工具平台，提供包括小程式容器、IDE 外掛程式和應用開放平台在內的完整平台能力，協助您構建豐富的應用生態。

方案架構

超級 App 業務應用平台架構如下：

平台架構分為三大模組，模組功能說明如下：

為什麼選擇阿里巴巴超級 App 業務應用平台

阿里巴巴是超級App應用模式的開創者，在移動互連網領域有近15年的技術沉澱和業務創新經驗。

• 商業生態

  基於阿里巴巴超級 App 業務應用平台，互聯互連阿里巴巴商業生態，覆蓋電商、金融、O2O等多種情境，10億級流量生態及應用生態互連，創造業務增長的無限可能。

• 開放架構

  阿里巴巴超級 App 業務應用平台支援多種小程式技術棧，可根據不同的情境、開發人員畫像提供合適的開發套件、容器及周邊生態能力，通過應用開放平台管理自己的應用生態，打破技術生態孤島，與行業技術生態開放互連。

小程式開發架構

• 什麼是小程式

  小程式是一種新的開放能力，具有更豐富的功能和出色的使用體驗，使用者通過小程式可以更便捷地擷取服務。

  小程式的開發和H5應用的開發有極高的相似性，主要開發語言仍然是Javascript，小程式主要運行在具備小程式容器功能的移動端裝置，小程式不僅具備了H5應用跨平台、低成本、迭代快的優點，而且相比於H5應用，小程式能夠擷取更多的系統許可權，比如網路通訊狀態、資料緩衝能力、擷取裝置感應器等能力，從而使小程式具有更豐富的功能和更接近Native應用的使用者體驗。

  小程式的主要優勢：

  • 跨平台：一套代碼可以運行在Android和iOS兩個平台。

  • 低成本：小程式的開發和H5應用的開發有極高的相似性，對於開發人員而言，從H5應用遷移到小程式的開發成本較低。

  • 迭代快：小程式和H5應用一樣同樣可以做到即時發布即時更新。

  • 接近Native應用的使用者體驗：小程式可以擷取到更多的系統許可權和裝置能力，從而使小程式的體驗更加的接近Native應用。

• 阿里巴巴超級 App 業務應用平台支援的小程式技術棧

  • WindVane

    WindVane是一個可擴充的Hybrid應用解決方案，為用戶端內的Web頁面提供了強大、易用的WebView容器。WindVane為WebView提供了豐富的擴充功能，包括URL攔截、事件機制等功能。支援Web頁面與Native應用進行互動，調用裝置功能。WindVane容器支援載入WindVane小程式和H5應用。

    WindVane小程式是指整合了windvane.js且運行在WindVane容器內的Web App。WindVane小程式彌補了普通H5應用在擷取系統許可權和訪問本機裝置能力方面的局限性，通過容器提供的資源預先載入和緩衝技術，支援更快速地開啟頁面。

    整合windvane.js後，WindVane小程式可以通過WindVane提供的JSAPI與Native進行互動，從而可以擷取更多系統許可權並調用裝置相關的功能。WindVane內建了數十個JSAPI，這些JSAPI提供了豐富的Native能力，同時WindVane還支援自訂擴充JSAPI，相比普通的H5應用，WindVane小程式可以讓Web開發人員擷取更多的Native能力，協助開發人員開發出具有更豐富功能和更出色使用者體驗的應用。

  • uni-app

    uni-app是一個使用Vue.js開發所有前端應用的架構，您編寫一套代碼，即可發布到多種小程式平台，例如支付寶、微信、DingTalk、淘寶等，同時也可發布到iOS、Android、Web等平台。uni-app擁有豐富的社區生態，擁有數百萬開發人員和數百萬應用。uni-app同時積極擁抱開源，原始碼已經開放在Github，供開發人員共用使用。

    關於uni-app的更多資訊，請參見uni-app社區。

    uni-app小程式容器是SuperApp提供的uni-app小程式解決方案，通過uni-app小程式容器可以開啟和管理uni-app小程式，同時uni-app小程式容器與EMAS服務的應用開放平台也已打通，方便企業和開發人員構建自己的應用生態。

• 如何選擇

  特性	Windvane	uni-app
  開發語言	Javascript/Typescript	Javascript/Typescript
  開發架構	不限	Vue.js
  渲染容器	Windvane容器，標準的WebView容器，可以渲染Windvane小程式和標準的Web應用	uni-app容器，支援渲染uni-app小程式，同時支援Native組件和小程式的混合渲染
  布局方式	標準的HTML+DIV+CSS	需要遵循Vue單檔案組件（SFC）規範
  工程結構	標準的Web應用工程結構	包含pages.json、manifest.json等uni-app特有的設定檔
  標籤	標準的HTML標籤如div、img等	uni-app小程式自訂的標籤名稱如view、image等
  UI組件庫	豐富	豐富
  API豐富度	豐富	豐富
  API擴充性	高，支援自訂	高，支援自訂
  Native SDK包大小	較小	較大
  產物形式	WindVane小程式	uni-app小程式/Web App/Native App
  產物大小	KB~MB	MB

  綜上對比：

  • 開發門檻

    WindVane方案開發門檻較uni-app低，初學者需要快速上手建議選擇WindVane。

    WindVane小程式並不受限於架構，可以使用任意架構或者使用標準的Web開發形式（HTML + CSS）進行開發。Windvane小程式具備通用的技術標準，開發人員只需掌握標準的Web開發技能就可以開發Windvane小程式。

    uni-app小程式限定於Vue.js架構，需要開發人員先學習和掌握Vue.js，布局方式需要遵循Vue單檔案組件（SFC）規範，工程結構有uni-app自己特有的設定檔。

  • 產物大小

    如果對於產物大小及佔用裝置儲存比較敏感，建議選擇WindVane。

    WindVane小程式的產物一般是KB層級，特別複雜的WindVane小程式可能會達到MB層級。uni-app小程式的產物一般都在MB層級，由於uni-app小程式需要在Native端安裝，安裝後會佔用裝置儲存。

  • 跨平台

    如果想實現一套代碼支援多個平台產物的效果，建議選擇uni-app小程式。

    WindVane小程式和uni-app小程式都支援跨平台，不過uni-app支援一套代碼實現多個平台產物的效果，uni-app支援一套代碼構建出多個平台的小程式（支付寶、微信等），同時還支援將同一套代碼打包構建成Web App和Native App。