设为首页
收藏本站
开启辅助访问
切换到窄版
登录
立即注册
中问网首页
我的收藏
站长博客
搜索
搜索
本版
帖子
用户
第一问答网
»
论坛
›
中问网
›
问答
›
支付宝移动端 Hybrid 解决方案探索与实践 ...
返回列表
发新帖
支付宝移动端 Hybrid 解决方案探索与实践
[复制链接]
11
|
1
|
2020-12-22 18:00:00
|
显示全部楼层
|
阅读模式
支付宝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.JSAPIJSAPI方式给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和钉钉,点击切换即可轻松将小程序发布到对应的平台。
原文链接
本文为阿里云内容,未经允许不得转载。
回复
使用道具
举报
返回列表
发新帖
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
千问
主题
0
回帖
4882万
积分
论坛元老
论坛元老, 积分 48824836, 距离下一级还需 -38824837 积分
论坛元老, 积分 48824836, 距离下一级还需 -38824837 积分
积分
48824836
加好友
发消息
回复楼主
返回列表
问答
热门排行
1
户口本的出生年月上错了,由于我家是农村的,没有相关的出生证明
2
在大泛华办了阳光游泳健身卡,打算退了,怎么办
3
租房期间进不了门了,后换锁是犯法的吗
4
何律师你好,父母能私自把房产过户给其中一个子女吗?
5
我方酒后驾车被对方撞成重伤,对方应付什么责任
6
请描述您要咨询的问题……河北三河燕郊燕系航城有人动员熟人等5
7
我爸爸骑摩托车行驶正确路线,被一辆疲劳驾驶的皮卡车司机撞了,小腿处多处骨折
8
苗木地里树苗有蜜用机器打农药,东面是种蚕的,隔着一条4米左右的马路
9
您好,我想咨询一个问题,我和老公结婚之前他用他的名义帮他朋友贷了一笔款
10
你好。我有一女孩。前夫不在了。我又再婚了。没要孩子。我想给我女孩办理独生子女证
11
男女未婚生下2个儿子,现在女方选择分开不要孩子,请问协议怎么写
12
上班期间给厂里买东西,被车给撞了,厂旦有责任吗?能否报工伤或
13
员工在公司打架斗殴可以开除吗?
14
你好!律师我想问一下我在58同城上找了一个钟点工的工资,因为雇主的原因干了一个半月
15
我们一个员工离职后老是想报复公司,故意给公司客户胡说,泄露公司信息
16
我家的祖传秘方做成了药,可以卖吗?卖了之后会被定性为什么?
17
我今天逛街被一家美容会所叫进去说是搞活动领免费礼品,结果把我带到一个房间说给我检测皮肤
18
孙子由奶奶抚养长大生病了由儿子还是孙子照顾
19
我是右手受伤,三个打了钢针,大母指没事,请问我可以评到几级
20
您好!我想问一下我合同还有一个月到期但是单位以我结婚了以后会要孩子为理由劝退我
21
我在广东深圳市罗湖东门碰见一个发单的 说可以领免费护肤品 但
22
我得车被车贷公司扣了,该怎么办,贷款还完了,还要交四万的手车
23
客户拖欠货款近一年了,用法律怎么走
24
大爷援越牺牲我爸有补助吗
25
你好 我想咨询一个问题 事情是这样的 我小爹在建筑队干活做小
26
如果我怀孕了三四个月了!可是我男朋友想过年在办事!然后孩子3个多月先给我领证
27
您好,我昌图县医院骨折误诊,延误半月,怎么办
28
如果男女在一起长期生活,但没有发生过关系,算非法同居吗
29
他炒股输了2十几万。我不想和他过了。我要和你离婚,他欠我爸爸钱没还
30
您好我继父一套房产但离婚证遗失房管局不予过户怎么办
31
我侄子借钱我担保但是他现在还不起,债主找我要不知道我什么办
32
你好,我想咨询一下,我们给一家私人幼儿园装修,没有签订合同,他总是拖着工钱不给,打电话也不接
33
对方辱骂我,非常恶劣
34
上班时间在工厂车间外摘水果吃摔伤工厂有赔偿责任么谢谢
35
老人想讨回儿子侵吞其的财产
36
蒋律师您好!我是贵州凯里人,丈夫是四川人,已在川办理结婚登记
37
请问我家公申请公积金贷款,我与我老公是与家公三人签的购房合同
38
您好:请问商品房公摊面积一般按百分之几划分?谢谢
39
母亲环卫工人,在上班时间工作区域,被摩托撞伤,现严重昏迷15天没苏醒
40
我想问离婚财产怎么分割
41
通州区去哪个法院起诉
42
脚踝粉碎性骨折,大夫没看出来,片子诊断书都在
43
我单位的铁路专用线长时间不用,现想报废处理,应该需要什么审批
44
我骑电瓶车逆行 别人撞到我 对方受伤我没事 怎么处理
45
你好!我想咨询一下,7年车祸到现在肇事方还未进行赔偿,法院判了几十万
46
在厂十一年多,有买五险一金,丧葬费是多少,在深圳,有工龄补助金么?属非因工死亡
47
你好,我一女同学他老公想要和他离婚,儿子五个月了,我同学天天在家看孩子没有生活来源
48
女方是天津的集体户口男方是外地户口结婚的时候想成为天津户口怎么办
49
我名下有一套我父母出资给我购买的房产,现在我母亲在外有债务,
50
你好,朋友是做网络淘宝销售的,前几天公司所有员工全部被警察抓走
51
个人贷款1分5的利息,到现在已经三年了,本金利息都没给,如若
52
请问我卖了两个他人的身份证'会被判刑吗,
53
你好,房产是女儿未成年时父亲买的,写的是父亲和女儿的名字,现在想把女儿名字去掉
54
我妹妹在二o一六年三月六日在药店上班,给顾客拿药开条子时,摔倒又起来
55
房产佣金不发能通过劳动局之类的要回来吗
56
我爸在工作时间突发脑出血,工作单位没有签订合同也没有购买保险
57
我们单位和员工的劳动合同到期了,现在单位打算搬到别的区,但还是原来的市
58
骨折误诊半月,昌图县医院,患者怎么维权
59
你好,请问,那些要求办模卡的经纪公司是不是都是骗人的,我今天去面试了一家
60
我结婚两年半了,没有小孩,也没有领证,现在因为感情不和,媳妇现在娘家不回来
61
劳动纠纷,强制执行到底能不能拿到钱?
62
你好!我是北京马大姐食品厂驻永辉超市的营业员,工资是厂家发的
63
看我的情况能要求公司买社保不
64
请问买二手房,房子已交了定金,还没签过户合同,近期下雨,但是发现入户花园处的玻璃有渗入现象
65
买的东西不一样,联系不上卖家
66
买个玉 ,然后在脖子里带着 断了' 掉下来 算不算质量问题
67
事情是这样我父母离婚了 离婚协议车房所有权都给我 母亲外遇离
68
你好!我老公有外遇,让我当场抓住,还拍视频,
69
关于公司劝退的问题
70
我家侄与妻子协仪离婚,房产归女方,两人债务没提,已双方莶名,有女方亲属证明
71
房屋租赁纠纷
72
受害方要钱,但是6个人,其中3个不给,剩下的三个是不是得跟着
73
卖了的北京牌照,能要回来吗
74
三年店面租房合同到期房东房租涨了之前一倍合法吗
75
我在网上交易平台被骗了10000块,报警了也没办法解决,我该
76
北京可以换外地身份证
77
谢律师,你好,我们村现在要被整村征收搬迁,我是外嫁女,可户口没迁出
78
我的小侄女在本村的庙会上玩蹦蹦床左胳膊甩骨折当时咱也不知道回
79
双方因发生争执打架,对方想厄我们怎么办
80
老公在赌场上班抓去了5天一点消息都没有,是不是会被判刑吗?
81
农村宅基地上可以直接建房吗,需要什么批准手续吗?宅基地可以继
82
我们公司没有给我们买社保也没有签劳动合同请问我们要怎么维权
83
您好!我咨询一下喝酒开车撞了联防队的车丁了防公务罪现以关在看
84
关于辞职
85
如果受害方要钱,但是6个人当中有3个不肯给得进监狱,剩下的三
86
代理人代租客签的合同有效吗?
87
朋友和一位老太太吵起来了老太太动人打人应该怎么办
88
父母以买卖过户房屋给已婚子女算夫妻共同财产吗?
89
出国劳务然后发现国外工作的情况不好我就不去了。现在对方要求赔偿损失
90
合伙做生意不用我出钱只用我进货,给我一半的利润怎么写协议
91
律师您好!我家在镇上买了套房 但只签合同和找几个证明人 宅基证没改名字
92
你好,我母亲的房子,动迁时把房产证改到了我的名下,现在动迁房还没有盖完
93
你好 别人借钱不还怎么打官司
94
北京可以换外地身份证吗
95
老公的房子是婚前买的,结婚后公公在还房贷如果离婚了这房子我有
96
公司于员工纠纷
97
我想找我前妻,她是湖南省郴州市永兴县金龟镇龙泉村人。名字曾宝鉴。1986
98
婚姻存在期间,夫妻双方达成书面协议,没有公证在法律上有效吗
99
我有责任吗
100
我家兄弟俩个院一大一小已经分家大院我家盖了小院老人给小的盖了