2026年8月12日，微信开发者正式宣布新一代组件框架 glass-easel 已可自由使用。这不仅是 exparser 的一次版本升级，更是小程序组件化开发范式的深层重构。本文将从框架定位、核心特性、性能优化与迁移实践四个维度，深入解析 glass-easel 的技术内幕。

一、框架定位：从 exparser 到 glass-easel

glass-easel 是微信小程序组件框架的核心实现，本质上是一个 JavaScript 组件化界面框架，用于进行组件化、定义式的界面开发。它是对旧版组件框架 exparser 的完全重写，在保持兼容性的同时新增了多项特性和性能改进。

关键时间节点：从小程序基础库版本 3.8.12 开始，glass-easel 已提供对 WebView 渲染引擎的支持，目前已覆盖约 98% 的微信用户。这意味着绝大多数线上用户都可以运行基于 glass-easel 开发的小程序。

与渲染引擎的关系：Skyline 渲染引擎目前全量运行在 glass-easel 上，因此迁移到 Skyline 时必须同步完成组件框架迁移。而在 WebView 后端，glass-easel 适配也已进入小范围测试与灰度阶段。

二、Chaining API：组件定义的新范式

glass-easel 最引人注目的变化是引入了 Chaining API（链式 API）——一种全新的页面和自定义组件定义形式。

传统写法 vs Chaining 写法

传统的 Component 构造器写法如下：

Component({
  properties: {
    myProperty: String,
    myAnotherProperty: String,
  },
  data: {
    myDataField: 'someValue',
  },})

等价的 Chaining API 写法为：

Component()
  .property('myProperty', String)
  .property('myAnotherProperty', String)
  .data(() => ({ myDataField: 'someValue' }))
  .register()

init 函数与闭包隔离

Chaining API 最强大的能力来自 init 函数：

export default Component()
  .data(() => ({ foo: 'bar' }))
  .init(function ({ data, setData, lifetime }) {
    // 这里可以用 JavaScript 局部变量
    const getUpdatedValue = () => { return 'updated' }
    lifetime('attached', () => {
      console.log('attached')
    })
  })
  .register()

init 中定义的函数会在每次组件创建时被调用一次。这种设计有两个核心优势：

1. 闭包隔离：可以在 init 函数内部自由定义专属于当前实例的局部变量，减少对组件 this 的依赖

2. TypeScript 友好：链式调用的形式对 TypeScript 类型推导更加准确

init 中的辅助方法

init 函数的第一个参数提供了多个辅助方法：

• method：定义单个方法，通常用于事件响应函数

Component()
  .init(function ({ method }) {
    const tapHandler = method(() => { /* ... */ })
    return { tapHandler }
  })
  .register()

• lifetime / pageLifetime：定义生命周期方法

Component()
  .init(function ({ lifetime, pageLifetime }) {
    lifetime('attached', () => { /* ... */ })
    pageLifetime('show', () => { /* ... */ })
  })
  .register()

• observer：定义数据监听器

Component()
  .data(() => ({ a: 1, b: 2 }))
  .init(function ({ observer }) {
    observer(['a', 'b'], () => { /* ... */ })
  })
  .register()

• relation：定义组件间关系

需要注意的是，这些方法不能异步或延迟执行，否则会报错：

Component()
  .init(function ({ lifetime }) {
    setTimeout(() => {
      // ❌ 不能这么做！
      lifetime('attached', () => { /* ... */ })
    }, 0)
  })
  .register()

适用场景

官方文档指出，Chaining API 的主要好处是更好的 TypeScript 支持和复杂组件友好，但它也使得简单组件的定义稍显繁琐。因此，每个组件都可以分别选用传统定义方式或 Chaining API，选择更合适的方式即可。

三、新 WXML 编译器：语法增强与性能提升

glass-easel 配套了全新的 WXML 编译器，在语法能力和编译性能两个维度均有显著提升。

新语法特性

let: 语法——定义局部变量，简化深层数据访问：

<block let:field="{{ my.complex.data.field }}">
  <view>{{ field.title }}</view>
  <view>{{ field.description }}</view></block>

class: 语法——更清晰地动态添加或移除样式类：

<view class:button class:button-enabled="{{ buttonEnabled }}" />

这种写法比传统的字符串拼接方式更加直观，也更容易维护。

编译性能

新的 WXML 编译器编译速度更快，生成的运行时代码也更高效。WXML 生成码执行速度可提升约 20%。

四、运行时性能优化：更新算法的革新

glass-easel 在运行时性能方面实现了多项重大改进。

混合更新算法

glass-easel 采用了新的更新算法，能够综合使用基于虚拟树和非基于虚拟树的更新算法，以适应不同的应用场景。这种混合策略使得框架可以在不同场景下选择最优的更新路径，大大降低了部分情况下的更新开销。

列表更新优化

在列表更新算法方面，新算法在部分场景下可提升执行速度数倍。对于包含长列表、频繁增删改查的复杂页面，这一优化尤为关键。

Skyline 协同增益

当 glass-easel 运行在 Skyline 渲染引擎下时，由于适配了 Skyline 的单线程模型，建树流程的耗时有效降低 30%-40%，同时 setData 调用不再有通信开销和序列化开销。

高级性能特性

此外，glass-easel 还提供了高级数据更新方法、数据字段拷贝控制、组件初始化策略等新特性，辅助开发者实现更极致的性能优化。

五、迁移指南：从 exparser 到 glass-easel

将现有小程序从 exparser 迁移到 glass-easel 只需少量适配工作。

启用方式

在页面或自定义组件的 JSON 配置中添加以下配置：

{
  "componentFramework": "glass-easel"}

添加后，WXML 模板将被编译为适配 glass-easel 的新格式，并同时保持对旧版 exparser 的兼容。在 app.json 中添加此配置可全局开启。

必须变更的语法点

1. 转义规则变更（必须）：数据绑定外的转义改为标准 XML 转义

• 旧例：<view prop-a="\"test\"" prop-b="{{ test === \"test\" }}" />

• 新例：<view prop-a=""test"" prop-b="{{ test === "test" }}" />

2. 条件/循环指令统一（必须）：不再支持 wx-if、wx-for，仅支持 wx:if、wx:for

• 旧例：<view wx-if="{{condition}}">

• 新例：<view wx:if="{{condition}}">

开发环境要求

• 微信开发者工具需升级至 1.06.2308142 或更高版本

• 使用 TypeScript 开发时，建议将 miniprogram-api-typings 升级至 5.2.3

• 推荐使用 nightly 版本的开发者工具以获得最佳体验

六、生态与展望

glass-easel 内核可以独立运行在 Web 环境下。除了组件框架本身，还配套了代码编辑器插件、开发者工具扩展、国际化扩展等附件。