glass-easel

glass-easel — 微信官方新一代组件框架#

资源概述#

glass-easel 是微信官方团队开发的新一代小程序组件管理框架，它是原有小程序自定义组件系统的完全重写版本。目前已内置在微信基础库 v3.x+ 中，成为小程序组件运行的底层基石。

核心创新：

• 多后端架构：同一套组件代码可运行在小程序、浏览器、Node.js 等不同环境中
• 链式 API（Chaining API）：全新的组件注册和数据操作方式，代码更简洁
• Trait 组合：类似 Rust trait 的行为组合机制，比传统 mixin/behavior 更安全
• 初始渲染缓存：组件首次渲染时可利用缓存，加速页面加载
• TypeScript 原生：全程 TypeScript 编写，类型推导完善
• 组件模板复用：支持组件级别的模板继承和覆盖
• better event system：改进的事件系统，支持更灵活的事件传递

与旧框架的关系：

• glass-easel 是旧框架的替代品，已内置在微信基础库 v3.x+ 中
• 保持功能级兼容：原有小程序代码无需修改即可运行
• 新特性（链式 API、trait 等）需要显式启用
• 未来版本将逐步淘汰旧框架

适用场景：

• 微信小程序自定义组件开发（已默认使用）
• 需要在 Web 环境测试小程序组件（glass-easel DOM backend）
• 跨端组件库开发（一套代码多端运行）
• 需要高级组件组合模式的复杂应用

设计规范#

架构层级#

┌─────────────────────────────────────────┐
│           应用层（WXML/WXSS/JS）           │
├─────────────────────────────────────────┤
│  glass-easel-miniprogram-adapter         │ ← 小程序接口适配器
├─────────────────────────────────────────┤
│         glass-easel 核心模块              │ ← 组件框架核心
├──────────────┬──────────────────────────┤
│  MP backend  │  DOM backend / 其他后端    │ ← 多后端
├──────────────┼──────────────────────────┤
│ 小程序环境    │  浏览器 / Node.js          │
└──────────────┴──────────────────────────┘

子模块清单#

性能特性#

• Per-component 树更新算法：与旧框架一致的按组件粒度更新策略
• 初始渲染缓存：首次渲染利用缓存跳过部分计算
• 模板编译优化：编译时静态分析，运行时零开销
• 事件系统优化：改进的事件分发和捕获机制

审核规范#

兼容性#

• glass-easel 已内置在微信基础库 v3.x+ 中
• 开发者无需手动安装或配置，默认启用
• 使用链式 API 需要基础库 v3.15.0+
• 不支持微信以外的小程序平台（支付宝/百度/抖音使用各自的组件框架）

迁移注意#

• 从旧框架迁移：基本无需修改代码（功能级兼容）
• 使用新特性（链式 API）：需要确认最低基础库版本
• 第三方库兼容：大部分主流组件库已支持 glass-easel

开发指南#

链式 API（Chaining API）#

glass-easel 引入了全新的链式 API，使组件开发更简洁：

// 传统写法
Component({
  properties: {
    title: { type: String, value: '' }
  },
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.setData({ count: this.data.count + 1 });
    }
  }
});

// glass-easel 链式 API
Component({
  properties: {
    title: { type: String, value: '' }
  },
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.bindData('count', this.data.count + 1);
    }
  }
});

Trait 组合#

// 定义 trait（类似接口）
const SelectableTrait = Behavior({
  data: { selected: false },
  methods: {
    toggleSelect() {
      this.bindData('selected', !this.data.selected);
    }
  }
});

// 组件使用 trait
Component({
  behaviors: [SelectableTrait],
  // 组件自动获得 selected 数据和 toggleSelect 方法
});

Web 环境使用#

npm install glass-easel glass-easel-dom

import { GlassEasel } from 'glass-easel';
import { GlassEaselDOMBackend } from 'glass-easel-dom';

// 在浏览器中创建组件
const component = GlassEasel.Component({
  template: '<div>{{text}}</div>',
  data: { text: 'Hello glass-easel!' }
});

// 挂载到 DOM
const backend = new GlassEaselDOMBackend(document.getElementById('app'));
component.mount(backend);

常见陷阱#

1. 链式 API 需要 v3.15.0+：低版本基础库不支持 bindData/bindModel
2. DOM backend 仅用于测试：不建议在生产 Web 应用中使用 glass-easel（它面向小程序场景）
3. 模板编译差异：glass-easel 模板语法兼容旧框架但有细节差异
4. 第三方生态适配：部分老库可能未适配链式 API，需确认兼容性

生态资源#

官方配套工具#

• glass-easel-analyzer：VSCode 扩展，提供智能提示、类型检查、模板语法检查
• glass-easel-devtools：开发者工具插件，增强组件树调试体验
• miniprogram-simulate：单元测试工具（基于 glass-easel 运行时）

已适配的组件库#

• WeUI（微信官方 UI）— 完全支持
• Vant Weapp — 通过兼容模式支持
• TDesign Miniprogram — 完全支持
• miniprogram-computed — 支持 glass-easel Chaining API
• mobx-miniprogram-bindings — 支持 glass-easel Chaining API

版本更新#

v1.0.0（2026-08-11，latest）#

• 正式发布 1.0 版本，API 稳定
• 完善链式 API（bindData/bindModel）
• trait 组合机制稳定
• 初始渲染缓存优化
• TypeScript 类型系统完善
• glass-easel-analyzer 智能提示增强

v0.x（2025-2026）#

• 核心功能开发阶段
• 多后端架构实现
• 链式 API 设计与迭代
• 内置到基础库 v3.x
• 配套工具（analyzer/devtools）开发

与基础库版本对应#