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开发所有前端应用的框架，您编写一套代码，即可发布到多种小程序平台，例如支付宝、微信、钉钉、淘宝等，同时也可发布到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。