本文详细探讨了微信小程序的底层架构，包括与浏览器的对比、小程序的双线程架构、运行环境、基础库实现以及编译器的工作原理。在运行环境部分，讲解了视图层和逻辑层的分离，以及JSBridge在两者间的通信作用。在编译器部分，阐述了wxml和wxss的编译过程。最后，概述了小程序的初始化流程，强调了逻辑层和渲染层的交互过程。
小程序底层架构
与浏览器对比
以微信小程序为例，与浏览器中的对应关系：
- js 开发逻辑代码 -> js -> v8
- wxss （多了rpx单位）控制样式 -> css -> 浏览器渲染器
- wxml xml语言 控制渲染层展示 -> html -> 浏览器渲染器 -> dom
浏览器
- 单线程 存在阻塞
小程序
- 双线程架构
- js 逻辑层
- wxml、wxss 视图层
- JSBridge 通信（可以实现相机、扫码）
微信小程序初级架构
- 所有的逻辑代码会打成一份，一个小程序只有一个逻辑层，包含所有页面逻辑 js
- 视图层（渲染层）一个页面对应一个
Webview，小程序中页面栈最多十层。- webview 用来渲染 wxml 和 wxss
- 在本地开发工具，直接用 iframe
- 在客户端，用真的 webview
- webview 用来渲染 wxml 和 wxss
小程序运行环境
| 运行环境 | 逻辑层 | 渲染层 |
|---|---|---|
| iOS | JavaScriptCore | WKWebView |
| 安卓 | V8 | chro |
最低0.47元/天 解锁文章
扫一扫
1612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
