0
收藏
评论

微信小程序架构剖析学习笔记

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

在小程序开发过程中,遇到一个赋值“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类似,还是一图胜千言:

最后一次编辑于  01-21  (未经腾讯允许,不得转载)
复制链接赞 0收藏投诉评论