小程序组件框架升级：glass-easel 带来更多特性及更优性能

小程序组件框架升级：glass-easel 带来更多特性及更优性能

微信团队宣布，新一代小程序组件框架 glass-easel 现已可以正式使用。作为旧版组件框架 exparser 的升级版，glass-easel 不仅带来了更多新特性，还在性能上实现了显著提升，尤其适合用于构建和维护复杂的小程序。

从基础库版本 3.8.12 开始，glass-easel 已支持 WebView 渲染引擎，覆盖了约 98% 的微信用户。

核心新特性

glass-easel 在保持与旧版框架高度兼容的基础上，引入了多项实用功能，让开发体验更上一层楼。

1. Chaining 形式的 Component 构造器
   新增的链式调用写法，让组件逻辑的组织更加清晰，尤其适合处理复杂逻辑，并且对 TypeScript 的支持也更好。它通过 init 方法创建一个闭包，方便开发者定义仅属于当前实例的局部变量。

   代码示例：

   export default Component()
     .data(() => ({
       foo: 'bar',
     }))
     .init(function ({ data, setData, lifetime }) {
       lifetime('attached', () => {
         console.log('组件已添加')
       })
     })
     .register()
   

2. 全新的 WXML 编译器
   新的编译器不仅速度更快，生成的运行时代码也更高效，WXML 生成代码的执行速度可提升约 20%。同时，它还支持一些实用的新语法：
   • let: 语法：轻松定义局部变量，简化数据访问。
   • class: 语法：更清晰地添加或移除样式类。

   代码示例：

   <!-- 使用 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 }}"
   />
   

运行时性能优化

glass-easel 在运行时性能方面也做了重大改进：

• 新的更新算法：综合使用基于虚拟树和非基于虚拟树的更新算法，能显著降低特定场景下的更新开销。
• 列表更新优化：新的列表更新算法在部分场景下，执行速度可提升数倍。
• 高级性能特性：提供了高级数据更新方法、数据字段拷贝控制等新特性，辅助开发者实现极致的性能优化。

如何启用与迁移

要在你的小程序页面中启用 glass-easel，只需在页面对应的 JSON 配置文件中添加以下配置即可：

{
  "componentFramework": "glass-easel",
  "glassEaselWebview": true
}

开发建议：

• 建议将微信开发者工具升级至最新的 nightly 版本以获得最佳开发体验。
• 在开发者工具的项目设置中，可以勾选 WXML 完全使用 glass-easel 编译 来获得更快的编译速度。
• 如果使用 TypeScript 开发，建议将 miniprogram-api-typings 升级到最新版本（5.2.3）。

详细的迁移方法可以参考官方提供的 glass-easel 迁移指引文档。

文档内容更新

小程序官方文档也已同步更新，重构了「指南」和「框架」等部分，详细描述了新旧组件框架的特性与用法，并规范了 WXML 的语法细节，方便开发者查阅。

glass-easel 作为一个开源项目，其仓库也已开放，欢迎开发者们深入了解和参与贡献。