在小程序开发过程中，遇到一个赋值“bug”，为了追根溯源，便对微信小程序进行拆包。查明“bug”本质后，顺便结合一些资料学习了微信小程序的架构。

小程序涉及技术

• 平台：iOS， android，PC（开发者工具）
• 语言：OC，Java，JS，C++
• 框架：wx，chrome，nwjs

小程序拆包

其中：

• WAService.js   逻辑层API
• WAWebview.js 视图层API
• WAConsole.js 调试控制台
• app-config.js 小程序配置
• app-service.js 业务逻辑
• page-frame.html 视图渲染
• pages 页面

我们在开发小程序时涉及的四种文件分别是：wxml，wxss，js，json。在小程序打包过程中，都会编译成js。

• wxml经过wcc编译成page-frame，
• wxss经过wcsc编译为page，
• js打包为app-service，
• json打包为config配置。

架构

通过拆包，我们也能大致分析小程序的架构。

小程序的架构包含view视图层和appService逻辑层。view层即我们看到的页面结构和表现（wxml和wxss），由一个webview承载。appService层即是JS和JSON的代码，也就是我们的主要的业务逻辑部分，在不同的平台下由不同的部分承载。最下面是Native部分，提供基础能力，三部分之间的通讯是通过消息的方式来实现的。

A. view层(视图层)

对照拆包的文件列表，wawebview,page-frame,*.html 就是view层。如下图：

在pc的开发者工具中是基于nwjs（node+webkit）实现的。所有的页面由一个模板文件载入，相关JS会注入到该模板。

而在ios和android下，分别是由wkwebview和webview承载的。

WAWebview主要是封装了这些模块：基础组件，WXAPI，渲染，事件处理，wxJSBridge等。

B. appService层(逻辑层)

拆包的文件列表中，waservice,app-config,app-service.js就是逻辑层。

那么在不同平台上，逻辑层是如何承载的呢？开发者工具中的Serivice也是一个运行在Chrome中的一个html页面，这个页面加载了三部分JS，如：

在ios上，逻辑层是运行在JSCore上。JSCore是webkit的一个重要组成部分，主要是对JS进行解析和提供执行环境。在android中，逻辑层是运行在v8引擎上，但这里的v8并不是chrome原生的，而是x5提取过出来的一个版本。

WAServer.js主要包含了这些模块：模块实现，全局api（getApp，PagePage等），jsBridge等。

C. 通信层

通信时序：

在开发者工具中，通过window.postMessage和addEventListener实现通信（使用chrome扩展的接口注入一个contentScript.js，它封装了postMessage方法，实现tab之间的通信）

//发送消息
window.postMessage(data, ‘*’);，// data里指定 webviewID
//接收消息
window.addEventListener(‘message’, messageHandler);

在ios中，通过 WKWebview的 window.webkit.messageHandlers.NAME.postMessage 实现，微信navite代码里实现了两个消息处理器：invokeHandler（ 调用原生能力） 和 publishHandler（ 消息分发）。js可以和webview和jsCore通信，图中分别列出其通信的方法：

在android中的通信和ios类似，还是一图胜千言：