支付宝小程序框架分析

支付宝小程序框架逆向分析

本文对支付宝小程序的正向开发做了简单介绍，并从正向开发的文件类型入手，对小程序的宿主框架进行了逆向分析，包括运行机制、通信模型以及安全防护体系等内容。

代码开发

支付宝小程序开发在语法方面与传统的前端网页开发非常类似，开发者主要编写 .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代码，在