1.前言1.

本文将结合阔悬在iWeb杭州站沙龙现场的分享《支付宝小程序在mPaaS中的深度集成实践》，介绍支付宝小程序框架的设计原理，以及如何在mPaaS体系中的深度集成支付宝小程序。

2.

分享内容将从以下两个方面展开：

支付宝小程序框架的系统介绍（支付宝小程序框架概述、应用层框架、NativeSDK）mPaaS技术架构与助力（mPaaS小程序、mPaaS小程序IDE、mPaaSMDS）2.小程序简介：移动互联网新热点3.

近来，小程序俨然成为了移动互联网的新热点。继2017年初微信正式推出微信小程序后，各个大厂陆续发布了各自的小程序——支付宝小程序、百度小程序、头条小程序，小程序成为了各家移动互联网生态布局的重要一环。

4.

通过小程序生态可以引入大量的外部服务，不仅丰富了平台的能力，而且可以为平台带来大量的用户流量，从而使得平台具备无限的潜能。

3.支付宝小程序简介5.

支付宝小程序是一种全新的开发模式，它运行在支付宝客户端，可以被便捷地获取和传播，为终端用户提供更优的用户体验。为方便小程序的开发者，支付宝小程序具有类似微信小程序的DSL和开发环境，降低小程序开发者的学习成本。

4.支付宝小程序框架浅析6.

1.基础需求

7.

小程序的本质需求是让第三方开发者可以接入，使得第三方开发的小程序可以在平台级应用中运行。

8.

对于这个需求，最简单的实现方案是：让外部开发者开发纯H5应用，在应用的

9.

H5容器里打开，容器提供一些原生的接口供H5使用。比如在支付宝和微信上的“滴滴出行”以H5的形式运行在各自的平台中，这种模式看似还不错，但是实际上这种简单的方案不能满足这两个小程序的基础需求：

体验：作为一个“小程序”需要让体验接近原生，而上述像滴滴出行这些普通H5的体验不太行，包括启动速度、页面切换流畅度都有问题，跟原生体验没法比。管控：作为一个平台必须对接入的应用有管控能力，必须能尽量精确控制应用的内容和类型，毕竟若出现非法应用平台是要承担责任的，H5的方式太过自由，开发者可以随时改变整个应用的内容，平台难以检测到这些改变，无法管控。另外H5开发质量参差不齐，平台也无法管控。10.

2.框架概述

11.

为了实现小程序并满足上述的小程序的两个需求，小程序框架应运而生。我们先看下小程序框架大图，自上而下看。

小程序代码：这是小程序开发者使用小程序DSL及各种组件开发的小程序。小程序组件及API：这是小程序的组件及API层，提供了小程序所需的各种组件和小程序API。小程序开发者只需要在基于这一层提供的组件及API进行小程序的开发。小程序应用层框架：这是小程序运行的框架层，它基于React实现了小程序的运行框架。该层主要包含小程序的逻辑处理引擎及渲染层。NativeSDK：该层提供了小程序所需的Native能力，通过JavaScriptCore为小程序的JS层框架提供大量的NativeAPI，此外该层还提供了小程序包管理、后台保活等基础能力。React和ReactNative：这一层是小程序底层运行环境，分别对应于Web和Native环境，使得小程序可运行在WebView和iOS/Android上。系统层：即Web内核、iOS和Android，是系统级的平台层。12.

目前支付宝的小程序使用的是React版，蚂蚁内部的其他App有在使用ReactNative版的小程序。

13.

3.应用层框架

14.

我们一起看下小程序应用层框架。每个小程序的代码分为两部分——逻辑处理和视图渲染，分别运行在worker（js引擎）以及render（渲染层）中。

worker运行小程序的逻辑处理代码，包括事件处理，api调用以及框架的生命周期管理。worker只有一个，方便App数据在页面间的共享和交互。render运行小程序的渲染代码，主要包括模版、样式和框架的跨终端的js组件或native组件，获取逻辑层的数据操作渲染引擎（React/ReactNative）进行渲染，render在小程序中可以有多个。worker和所有的render都建立连接，将需要渲染的数据传递给对应的render进行渲染，worker也会将api调用转给NativeSDK处理。render则将组件的触发事件送到对应的worker处理，同时接受worker的调用进行重新渲染。render可以看作一个无状态的渲染终端，小程序的状态都保留在worker内。15.

可见该框架可以做到，JS逻辑代码与页面渲染分离并行执行，不会出现JS代码执行时卡住页面渲染的情况，进而提升渲染性能。多个页面可以共享一个JS运行环境，数据可以很方便地共享，整个小程序生命周期里共享同一个上下文，更接近App的开发体验。小程序的模板样式是自定义的格式，这样可以做到开发时使用固定的DSL，不依赖底层的渲染引擎，这样引擎的优化升级不会造成上层的小程序代码的不兼容，并且渲染行为是完全是可控的。

16.

4.NativeSDK

17.

我们再看Native层，在支付宝中是由NebulaH5容器负责实现，它为小程序提供Native能力，为小程序提供的包管理、后台保活等功能。

NativeAPI：小程序调用的API中有部分功能需要在native中实现，这部分API通过桥接调用进入对应的NativeAPI。包管理：负责小程序包的下载、存储、加载。小程序包的下载具有多种策略，可以满足小程序的预下载、强制更新等需求。后台保活：小程序在后台可以存活5分钟，使得用户在下次打开时可以获得更好的体验。18.

5.小结

19.

现在让我们回到前面提到的两个小程序的基本需求，体验和管控。我们看下框架是如何实现这两个需求的。对于体验需求，主要有以下几点：

框架对小程序做了逻辑处理和视图渲染的分离以提升渲染性能对于较重的组件（地图）使用Native实现以提升性能小程序公共资源预置在小程序框架以提升加载性能后台保活机制提高二次启动速度20.

对于管控需求，主要有两点：

小程序开发只能使用框架提供的自定义的模板样式JS代码运行在与Webview隔离的JS引擎中，无法操作浏览器DOM5.mPaaS技术架构与助力21.

1.支付宝小程序与mPaaS

22.

小程序这么有优势，那能否把支付宝小程序放到其他APP中运行呢？答案是肯定的，借助mPaaS，小程序技术不仅在蚂蚁金服内部使用，也能够提供给外部用户使用。

23.

首先简单介绍下什么是mPaaS，mPaaS全称是MobilePlatformasaService，即移动端的PaaS。作为蚂蚁金服独创的移动研发平台，它源于支付宝近10年的移动技术的沉淀，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助生态伙伴快速搭建稳定高质量的移动App。

24.

2.mPaaS小程序

25.

再来看下什么是mPaaS小程序，它是在支付宝小程序的基础上做了瘦身、去依赖的小程序SDK，为了能便捷的输出给其他App快速地搭建出小程序平台。它保持和支付宝小程序一样的模板样式和通用API，仅仅少量的像授权这样的开放的API需要客户自定义开发。借助mPaaS小程序，可以做到一套小程序代码，在支付宝和自己的App上双端投放和运行，甚至可以构建出自己的小程序生态体系。

26.

这里和大家分享下mPaaS小程序在其他App中集成时可能需要解决的问题：

SDK集成冲突，这个是多个SDK集成可能会遇到的共性问题，一般通过去除不要的SDK或者对SDK中部分符号名做针对性的修改。开放API定制开发，开放API依赖后端的服务，比如用户授权这个API，它需要获取用户的账号信息，那么就需要重写这个API的具体实现，去访问App的用户中心服务以实现授权功能。小程序框架提供了一套自定义和重写API的插件机制，能快速的去重写某个API，甚至添加一个新的API。27.

3.mPaaS小程序IDE

28.

小程序的开发除了可使用支付宝小程序开放平台提供的IDE，还可以使用mPaaS版的小程序IDE。通过mPaaS版的IDE可以导出本地的小程序包，后续在mPaaS发布平台中使用这个本地包直接发布。未来，小程序IDE将会与mPaaS直接打通，在IDE中可以直接完成mPaaS小程序的开发、测试和发布这一系列的开发运维体验。

29.

4.mPaaSMDS

30.

小程序技术的一个基础的能力，就是小程序发布系统。mPaaS小程序的发布服务是由mPaaS的移动发布系统（MDS）提供的。MDS提供多种发布策略，能够在正式发布之前进行多种类型的灰度测试。MDS提供增量差分包更新能力，可减少更新包的体积，在移动端网络不稳定场景中发挥优势。

mPaaSMDS控制台31.

目前，mPaaS小程序已在众多政务项目中落地服务，帮助政务小程序在支付宝和自有App双端投放运行。相同的业务功能使用小程序实现，在支付宝和自有App中可进行共用，能显著地降低开发成本，做到业务的快速上线及动态更新。

32.

如果想要进一步了解mPaaS小程序，可以复制地址到浏览器中打开：http://t.cn/ELBlvEr

33.

关于小程序框架的优化思路或具体实践，如果你有任何疑问或建议，欢迎随时和我们一同交流。

34.

往期阅读

35.

《支付宝客户端架构解析：iOS容器化框架初探》

36.

《支付宝客户端架构解析：Android容器化框架初探》

37.

《支付宝客户端架构解析：Android客户端启动速度优化之「垃圾回收」》

38.

《支付宝客户端架构解析：iOS客户端启动性能优化初探》

关注我们微信公众号「mPaaS」，获得第一手mPaaS技术实践干货