分析支付宝客户端的插件机制

转自唐巧博客

前言

由于开了iOSDevTips的微信公共帐号，老收到各类iOS开发的问题，前两天收到一个问题的内容是：

请问像支付宝钱包那样能够在应用里安装本身的应用，是已经在应用里写了逻辑，仍是能够向应用里发送代码?

我以为这个问题挺有意思的，估计你们都感兴趣，因此今天就抽空研究了一下，将支付宝客户端的插件机制具体实现方式介绍给你们。

先介绍一下该插件机制，如上图所示，支付宝客户端在安装后，对于像“彩票”、“爱心捐赠”这类功能，须要再点击安装一次，而后才可使用。有些时候该插件功能进行了升级，须要点击升级才能够继续使用。插件的方式有利于软件动态增长新的功能或升级功能，而不用再一次向AppStore提交审核。另外，因为用户不须要的插件能够不用安装，也缩小了应用自己的体积大小，节省了下载流量。

分析过程

截取网络请求

分析第一步，截取网络请求。截取网络请求能够查看当用户点击“彩票”进行安装的时候，客户端到底作了什么事情。使用Charles的代理设置功能，启动一个http代理，而后在iPhone上设置链接此代理，则能够看到，当点击“彩票”插件时，客户端下载了一个名为 10000011.amr的文件。以下图所示：

下载插件文件

尝试用wget将文件下载下来，发现其没有验证cookie，下载成功，命令以下：

1	wget http://download.alipay.com/mobilecsprod/alipay.mobile/20130601021432806/xlarge/10000011.amr

amr本意表示是一个音频文件，明显不对，尝试将其后缀名改为zip，成功将其解压。用itools链接上支付宝的客户端，一样能看到客户端将其下载后，也是解压到document目录下的。解压后的内容与应用内新增长的内容一致，如图所示：

分析文件内容

大概浏览了一下解压后的文件，主要包括html、css和js文件。可见支付宝的插件机器是经过UIWebView来展现内容的方式来实现的，那为何要先下载安装这些内容而不经过UIWebView实时下载html呢？这主要应该是为了节省相应的流量。我看了一下，10000011.amr文件整个有将近1M大小，若是不经过插件机制预先下载，则只能依赖系统对于UIWebView的缓存来节省流量，这相对来讲没有前者靠谱。

另外，使用基于UIWebView的方式来展现插件，也有利于代码的复用。由于这些逻辑都是用js来写的，能够一样应用于Android平台，在Config.js文件中，明显能够看到对于各种平台的判断逻辑。以下图所示：

另外，/www/demo/index-alipay-native.html 文件即该插件的首页，用浏览器打开就能够看到和手机端同样的内容。以下载图所示（左半边是手机上的应用截图，右半边是浏览器打开该html文件的截图）：

插件的网络通信

接下来感兴趣的是该插件是如何完成和支付宝后台的网络通信的。能够想到有两种可能的方式：

1. 直接和支付宝后台通信
2. 和Native端通信，而后Native端和服务器通信。

要验证这个须要读该插件的js源代码，整个js源码逻辑仍是比较干净的，主要用了玉伯写的seajs作模块化加载，backbone.js是一个前端的MVC框架，zepto.js是一个更适合于移动端使用的”JQuery”。

大概扫了一下，感受更多是用的方法一：直接和支付宝后台通信, 由于Config.js中都明确将网络通信的地址写下来了。另外一个证据是，利用下面的脚本扫描整个js源码，只能在backbone中搜到对于iframe的使用。而在iOS开发中，若是js端和native端要通信，是须要用到iframe的，详细原理能够参见个人另外一篇文章《关于UIWebView和PhoneGap的总结》。不过我不能彻底确认，由于我尚未找到相应控制页面切换和跳转的js代码，若是你找到了，麻烦告诉我。

1	find . -type f -name "*.js" | xargs grep "iframe"

交易的安全

用Charles能够截取到，当有网络交易时，应用会另外启动一个https的安全连接，完成整个交易过程的加密。以下图所示：

总结

支付宝的插件机制总体上就是经过html和javascript方式实现的，主要的好处是：

1. 跨平台(能够同时用在iOS和Android客户端）
2. 省流量（不须要的插件不用下载，插件本地缓存长期存在不会过时，本身管理插件更新逻辑）
3. 更新方便（不用每次提交AppStore审核）

坏处若是非要说有的话，就是用javascript写iOS界面，没法提供很是炫的UI交互以及利用到iOS的全部平台特性。不过象支付宝这种工具类应用，也不须要很复杂的UI交互效果。

另外教你们一个小技巧，若是你不肯定某个页面是否是UIWebView作的，直接在那个页面长按，若是弹出”拷贝，定义，学习”这种菜单，那就是肯定无疑是UIWebView的界面了。以下图所示：

相关工具

欢迎关注个人技术微博 @唐巧_boy 和微信公共帐号 iOSDevTips ，天天收获一些关于iOS开发的学习资料和技巧心得。

我在研究时使用了Charles来截获支付宝客户端的网络请求，用iTools来查看支付宝客户端的本地内容。若是你想自行验证本文内容，请先下载上述工具。在此就不额外介绍它们的使用了。

Posted by 唐巧 Jun 23rd, 2013  iOS

原创文章，版权声明：自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0