支付宝小程序框架分析
支付宝小程序框架逆向分析
本文对支付宝小程序的正向开发做了简单介绍，并从正向开发的文件类型入手，对小程序的宿主框架进行了逆向分析，包括运行机制、通信模型以及安全防护体系等内容。
代码开发
支付宝小程序开发在语法方面与传统的前端网页开发非常类似，开发者主要编写 .axml、.acss、.js三部分文件，分别对标前端开发中的HTML、CSS、JS。
其中 .axml 的内容如下所示，AXML 是小程序框架设计的一套标签语言，用于描述小程序页面的结构。
<view> Hello {{name}}! view>
<button onTap="changeName"> Click me! button>
其中 .js 的内容如下所示，用于实现小程序的业务逻辑。
// 逻辑层
var initialData = {
name: 'taobao',
};
// 注册一个页面
Page({
data: initialData,
changeName(e) {
// 改变数据
this.setData({
name: 'alipay',
});
},
});
其中 .acss 的内容如下所示，ACSS 是一套样式语言，用于描述 AXML 的组件样式，决定 AXML 的组件的显示效果。
view {
padding-left: 10px;
}
小程序开发者完成代码开发后，会提交相应代码给平台审核，审核通过后，便会在支付宝上架，通过搜索小程序名称即可使用对应小程序。
代码打包
小程序启动时，客户端会从CDN下载小程序离线包，这个离线包是将原项目打包后的一个 .tar 文件，存放在 /data/data/com.eg.android.AlipayGphone/files/nebulaInstallApps 目录下。从真机上拖出来解压后得到目录如下
其中 index.html、index.js、index.worker.js就是之前我们编写的代码所编译出的js代码。其中index.worker.js是小程序所有页面的业务逻辑代码,对应着开发者编写的pageName.js中的内容；index.html、index.js中的内容对应着acss与axml，其中axml的组件信息、层次结构同样被会被编译成js代码，在运行时由这些js进行渲染。
代码加载
开发者写的所有代码最终将会打包成一份 JavaScript 脚本，在小程序启动的时候运行，在小程序结束运行时销毁。
双线程模型框架
开发者开发的小程序源码打包之后主要分为两部分，第一部分负责小程序的视图展示，打包产物为index.js，称之为Render部分；第二部分负责小程序的业务逻辑、视图更新等，打包产物为index.worker.js，称之为Worker部分。
支付宝小程序的前端框架APPX也分为Render部分，对应需要加载的文件为af-appx.min.js，以及Worker部分，对应加载的文件为af-appx.worker.min.js。前端框架主要负责准备业务代码需要的一些对象和数据，在准备环境的时候开始加载，用于初始化环境、往Render和Worker所处的运行环境中注册对象之类的。
Render
整个Render部分，包含index.js(开发者编写的视图层代码)和af-appx.min.js(小程序前端框架代码)，均运行在WebView上(视图线程)。
Worker
整个Worker部分，包含index.worker.js(开发者编写的逻辑层代码)和af-appx.worker.min.js，均运行在V8引擎上(专有的JavaScript引擎)(应用服务线程)。
代码加载
Render
对于Render部分而言，需要加载af-appx.min.js、index.html和index.js，从实现上，是通过WebView的loadUrl()方法，该方法可以加载网页，也可以加载字符串格式的js代码。
Hook住WVUCWebView 类中的loadUrl函数，可以看到Render部分的业务逻辑代码加载
观察index.html文件，我们可以发现，af-appx.min.js通过writeln()函数动态加载进来，同时index.js通过