在小程序开发过程中,遇到一个赋值“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类似,还是一图胜千言:
分析的不错呀,简单明了