glass-easel 是什么

可以这么理解，但更准确地说：glass-easel 不仅仅是“桥梁”，它是 Skyline 引擎的“指挥官”和“逻辑基石”。

在微信小程序的架构中，Skyline 是负责“画图”的（渲染引擎），而 glass-easel 是负责“分发指令”的（组件框架）。

1. 为什么说 Skyline 必须依靠 glass-easel？

如果把渲染一个页面比作一场演出：

• Skyline 是舞台和演员：负责最后的视觉呈现、布局计算和流畅的动画。

• glass-easel 是导演和剧本：它把开发者写的 WXML 逻辑转化成演员能听懂的指令。

核心原因在于：Skyline 根本不认识传统的 HTML/DOM。

传统的 WebView 依靠浏览器引擎解析 HTML 字符串。而 Skyline 为了追求原生性能，抛弃了 DOM 树，直接操作底层的排版引擎。这时，它需要一个极度高效的框架来告诉它：“现在需要创建一个按钮，位置在左上角，颜色是蓝色。” 这个角色就是 glass-easel。

2. glass-easel 扮演的三个关键角色

① 指令生成器 (ProcGen)

在 glass-easel 模式下，WXML 会被预编译成 ProcGen（过程化生成代码）。这是一种高效的 JavaScript 函数。当数据变化时，glass-easel 直接执行这些函数，产生一组非常精简的“渲染指令”发给 Skyline。

逆向视角： 以前你逆向 wcc 编译后的文件看到的是复杂的节点描述，现在你看到的是一个个经过混淆的、直接操作渲染节点的函数调用。

② 状态管家 (Reactive Data Binding)

Skyline 本身不具备处理 setData 的能力。当你调用 setData 时，glass-easel 负责计算出最小化的变更集，然后精准地告诉 Skyline 哪一个部分的像素需要重新计算。这大大降低了双线程通信的压力。

③ 跨后端转换器 (Backend Abstraction)

正是因为有了 glass-easel 这一层，微信才能让同一套代码在 WebView 和 Skyline 之间切换。glass-easel 屏蔽了底层的差异：

• 输出到 DOM 后端 $\rightarrow$ 变成 HTML 标签。

• 输出到 Skyline 后端 $\rightarrow$ 变成原生组件（Native Views）。

3. 如果没有 glass-easel 会怎样？

如果没有这个“桥梁”，Skyline 虽然拥有原生般的渲染能力，但它将：

1. 无法理解你的代码： 你得像写 C++ 或 Flutter 一样去调用绘图指令，开发效率极低。

2. 失去跨平台能力： 每一行样式和布局代码都要针对 Skyline 重写，无法兼顾旧版本的微信。

3. 内存管理失控： 逻辑层和渲染层之间会充斥着大量冗余的数据传递，失去性能优势。

4. 深度总结：两者的协作流程

1. 编译期： WXML $\xrightarrow{glass-easel}$ ProcGen (JS 指令集)。

2. 运行期： setData $\rightarrow$ glass-easel (计算 Diff) $\rightarrow$ 发送精简指令 $\rightarrow$ Skyline (执行原生排版绘制)。

3. 交互期： 用户点击屏幕 $\rightarrow$ Skyline (捕获坐标) $\rightarrow$ glass-easel (根据组件树计算事件冒泡) $\rightarrow$ 触发 JS 逻辑。