支付宝移动端 Hybrid 解决方案探索与实践

显示全部楼层 · 2020-12-22 18:00:00

目前mPaaSH5容器Demo源码已发布至GitHub，全新的接入方式让你可以一键集成mPaaS环境并快速接入H5容器，体验统一的容器和内核，获取媲美原生的Hybrid方案及完美的动态能力。
时间：1月15日15:00—16:00
主题：移动开发平台mPaaS重磅发布
详情：https://m.aliyun.com/markets/aliyun/act/mpaas_mobile
预约直播：https://developer.aliyun.com/live/1881
支付宝Hybrid方案建设与演进
目前支付宝有2套Hybrid方案：HTML5容器与小程序。小程序是最近几年才出来，H5容器已经有了很长时间的历史，所以我们就先从H5容器说起。
H5容器
在支付宝中，HTML5容器架构如图所示：

评论
最上层是浏览器，这块就是大家常见的Web开发环境，包括HTML、CSS、JavaScript等。H5容器作为中间层，将浏览器和支付宝底层框架有机结合起来，在H5容器里面有2个非常重要的概念：JSBridge和离线包，后面会做详细介绍。支付宝底层框架会给H5容器提供Native的能力，这其中就包括RPC（远程过程调用，用来实现APP和服务器通信）、支付、扫一扫等。
JSBridge
JSBridge是H5容器的基石，桥接了JS环境与Native，实现了Native代码和浏览器环境的双向通信，Native代码可以通过调用浏览器提供的接口运行JS，从而实现调用JS函数、传递参数到JS环境等；而浏览器到JS环境的通信是通过Native拦截浏览器的请求来实现，请求可以是网络请求或者是一些内部函数的调用。

评论
那么JSBridge会带来什么好处呢，在传统的Web开发场景，H5页面会通过HTTP的GET或者POST请求到后台获取数据，就会用到jQuery等AJAX框架。但是H5页面中的JS函数公开的，没法做一些加密逻辑，同时对于无法优化网络。这几年随着4G和流量卡的普及，让手机网络变得更快、更便宜，在这之前大量用户会面临流量不足、信号差、网络不稳定的情况，这些场景在现在依然存在，而纯Web方案是没法提供相关的优化。

评论
H5容器提供的JSBridge解决了这个问题，所有H5页面需要从后台获取的数据都通过JSBridge调用Native的RPCSDK来获取。这样实际App请求的数据都是由RPCSDK来发送，从而可以实现安全加密、签名校验、弱网优化、流量优化的功能。Native层的这些功能是Web页面开发人员无感知的，所以业务开发人员只需要专注其自身的业务开发即可。安全性由支付宝底层SDK保障。

评论
H5容器提供了2种扩展方式：
1.JSAPI
JSAPI方式给H5页面增加了Native功能调用接口，通过实现自定义JSAPI类中的handler方式，可以以Native的形式实现特定功能，例如调用Native加密函数。
2.事件
H5容器在状态变化时会发送事件，通过监听H5容器特定事件，可以实现对H5容器生命周期的处理，比如修改加载进度条颜色、修改页面导航栏等。事件提供了更强的定制性，完全可以满足对H5容器的各种自定义需求。
H5容器离线包
H5容器离线包是H5容器用户体验的关键。
在APP里面打开一个线上页面的时候，通常会有一个白屏的阶段，这是浏览器需要从服务器下载HTML资源。由于手机网络的限制，这个时间会很不确定，通常会花费300ms以上的时间，用户在这个时间里面就会看到页面白屏。

评论
为了优化H5容器用户体验，减少白屏时间，支付宝在H5容器中引入了离线包技术。离线包可以简单理解为一个zip压缩包，其中包含前端页面所需的HTML、CSS、JS、图片等资源。内置到客户端后，H5容器打开离线包页面时会直接从离线包中获取资源，这个是毫秒的访问时间，消除了打开页面白屏现象。
在支付宝中，离线包分为2种：普通的业务资源包和公共资源包。先说公共资源包吧，公共资源包中会包含一些框架JS、CSS、常见图片等，这些资源在整个App里面就只保存一份；而业务资源包中只保存该业务所需的页面静态资源，业务之间是相互独立解耦的。这样一个业务的页面资源就会同时来自其业务资源包和公共资源包，公共资源包的存在优化了App大小。

评论
为了满足快速发布的需求，H5容器离线包提供了更新机制，以单个离线包作为更新维度。因为单个离线包业务很简单，所以离线包的大小是可控的，通常小于500KB，这样单个离线包的更新时间可控，可以做到用户无感知。在一些极端网络场景下，新的业务资源包没有更新超过，而我们又期望用户使用的是最新的业务，这个时候fallback访问机制就会发挥作用。每个离线包资源都会在服务器存放一份，在刚刚说到的极端场景下，用户会访问服务器的fallback地址获取资源，从而保障页面可用。

评论
结合前面说到的离线包后，整个H5容器渲染流程如下。其中离线包资源的更新、下载对用户无感知，页面访问的资源是来自离线包还是来自fallback地址对前端是无感知的。

评论

UCWebview内核
为了提高H5容器稳定性，支付宝在安卓系统上使用了UCWebview，UCWebview的崩溃率和ANR率远低于系统浏览器，而且彻底规避了安卓系统Webview碎片化问题，相信做过安卓前端页面兼容的同学一定可以体会到使用一个浏览器内核的好处。

评论
H5容器作为一个成熟的Hybrid方案可以满足大部分的业务场景需求，但是其依然存在一些局限性。H5容器的业务开发部分还保持着前端开发思维，毕竟整个过程都是使用的前端技术，只需要在业务开发完成后集成到APP中完成测试。但是客户端开发其中还有很多关键的概念，例如iOS的ViewController、Android的Activity等，对客户端页面栈有清楚的了解更有助于开发H5容器。同时H5容器还存在一个致命的问题就是无法管控质量，宽泛的前端规范让管控变得异常困难。
支付宝小程序
为了解决H5容器的局限性，顺应当前APP共享开放的需求，支付宝推出了新的Hybrid方案：支付宝小程序。支付宝小程序一种全新的开放模式，它运行在支付宝客户端，可以被便捷地获取和传播，为终端用户提供更优的用户体验。支付宝小程序基于Web技术，因此学习成本低；其一套代码同时支持iOS和Android；并提供了丰富组件和API；完全为APP开发而生。目前支付宝小程序已经提供2000多个开放接口，API日调用次数超过25亿次，拥有超过100万的合作伙伴和超过10万个活跃服务商。
支付宝小程序同时还支持了阿里系多个App，包括口碑、高德和钉钉。
那么支付宝小程序是怎么解决H5容器的局限性呢？首先支付宝小程序是基于一个定制的DSL语言，不是前端的标准，但是类似。在DSL规则下业务进行小程序的开发，不支持直接操作DOM，这种DSL规则下的自由可以有效的进行质量管控。另外支付宝小程序可以提供比H5小程序更优秀的性能、体验和兼容性，可以无感替换底层框架，应对遇到的性能问题。
目前支付宝小程序也支持前面提到的H5容器所使用的离线包技术，同时也支持JSAPI和事件的扩展方式，提供了更大的灵活性。

评论
支付宝小程序的DSL语言包括了4部分：
JSON
文件用来提供小程序相关的配置，这里就强调了page和window的概念，支持用户去配置导航栏等APP开发中的概念。

评论

axml
可以理解为小孩程序的页面HTML，不支持直接操作DOM保障了页面逻辑的可控。

评论

JS
用来描述代码逻辑，提供了Page中所需的各种生命周期，让开发者有APP中的各种概念。

评论

acss
类似于H5中的CSS，支持大部分CSS语法，让前端开发可以快速完成小程序UI设计。

评论
目前支付宝小程序已经逐步开放给个人开发者使用，大家可以申请开通，享受支付宝带来的流量。
Hybrid方案借助移动开发平台mPaaS对外输出
支付宝沉淀的Hybrid方案H5容器和小程序已经经过实际严苛的业务考验，通过前面的介绍相信大家已经有了了解。
从0开始开发一套Hybrid框架需要大量的人力以及反复的业务验证，对于大部分公司来说成本太高。而使用开源的Hybrid框架，例如Cordova、Weex、ReactNative、Flutter等会面临一个非常致命的问题，就是遇到框架层的问题，很难获得及时有效的技术支持。
目前支付宝的Hybrid方案已经借助移动开发平台mPaaS对外输出，解决前面提到的痛点，让你直接和支付宝使用同一套框架层代码，而且提供及时的技术支持。
mPaaS是一站式移动开发解决方案，提供了移动开发所需的5大组件：MGS、MDS、MPS、MAS、MSS，这些组件都是基于支付宝，经过实际业务考验。

评论
其中mPaaS的Hybrid解决方案就包含前面提到：H5容器、离线包、小程序三大部分。
mPaaSH5容器是一个移动端HybridSDK，提供了良好的外部扩展，可结合具体业务需求定制JSAPI。在Android上使用UCWebview，拥有解决系统级WebviewCrash的能力。
mPaaSH5离线包将HTML静态资源压缩预置到客户端或通过WIFI预加载到本地，使用时直接从本地加载，从而最大程度地提高性能。结合mPaaSMDS推送服务，可以实现灰度发布、强制更新，让业务的开发更加灵活。
mPaaS小程序可以让大家自己的App使用小程序技术开发，构建自己的App生态，也就是说一步到位让其满足超级App的能力。由于底层使用的就是支付宝小程序的技术，可以无缝迁移支付宝小程序到自己的App中。
目前支付宝小程序的IDE已经支持多渠道，包括支付宝、mPaaS和钉钉，点击切换即可轻松将小程序发布到对应的平台。
获取Demo源码，进一步了解mPaaSHTML5容器&离线包特性和亮点。
Demo源码地址：https://github.com/alipay/mpaas-demo
公测申请：http://mpaas2019.mikecrm.com/otOU1k1
本文作者：云攻略小攻
原文链接
本文为阿里云内容，未经允许不得转载。