【开源】推荐一款专为 CocosCreator 打造的轻量级 MVVM 框架

:heart: 推荐一款专为 CocosCreator 打造的轻量级 MVVM 框架:CHFramework

作为 CocosCreator 开发者,你是否还在为项目代码耦合度高、UI 与数据同步繁琐、配置表管理复杂而头疼?今天给大家推荐一款我开源的轻量级 MVVM 框架 ——CHFramework,旨在帮助开发者快速构建结构清晰、可维护性高的游戏项目。

为什么选择 CHFramework?

在游戏开发过程中,随着项目规模扩大,传统开发模式往往会遇到这些问题:

  • UI 与业务逻辑混杂,改一处动全身
  • 数据变更后需要手动更新 UI,冗余代码繁多
  • 弹窗、页面管理混乱,层级与生命周期难以控制
  • 配置表处理繁琐,手动写模型定义易出错

CHFramework 针对这些痛点,提供了一整套解决方案,让开发者能更专注于业务逻辑实现,而非重复的机械工作。

核心功能亮点

1. 简洁高效的 MVVM 架构

框架严格区分视图(View)、视图模型(ViewModel)和模型(Model),通过数据绑定机制实现视图与数据的自动同步。无需再写 label.string = data.value 这类冗余代码,数据变更时 UI 会自动更新。

比如实现输入框与显示文本的双向绑定,只需一行代码:

Binder.bindTwoWay(this.vm.nextNickName, new EditBoxAdapter(this.nameEditBox));

2. 灵活的命令模式

将用户交互(如按钮点击)封装为命令对象,彻底解耦事件发送者与接收者。支持同步命令( SimpleCommand )和异步命令( AsyncCommand ),异步命令还可通过 canExecute() 控制按钮状态,非常适合处理网络请求、动画等场景。

3. 强大的 UI 管理系统

ViewService 提供一站式 UI 管理能力:

  • 支持 UI 分层(普通页、弹窗、提示框等),自动处理层级关系
  • 内置生命周期钩子( onCreate / onShown / onHide / onDismiss
  • 自动管理遮罩层,支持点击遮罩关闭弹窗
  • 可自定义加载界面和过渡动画

4. 便捷的数据表服务

解决游戏配置表处理难题:

  • 支持 Excel 表格一键转换为 JSON 数据和 TypeScript 模型(通过编辑器插件)
  • 提供高效查询接口,按 ID 快速获取配置数据
  • 表格格式规范:第 1 行注释、第 2 行类型、第 3 行字段名,上手成本低

读取表格数据示例:

// 读取Item表格数据
const items = await Context.getService(TableReaderService).read<IItem>("Item");
items.forEach(item => {
    // 直接使用类型化的配置数据
    console.log(`${item.id} ${item.title} ${item.quality}`);
});

5. 丰富的扩展能力

框架预留了充足的扩展点,可根据项目需求定制:

  • 自定义 UI 适配器,支持特殊组件的数据绑定
  • 实现自定义 Loading 界面和 Toast 提示样式
  • 扩展数据表读取服务,支持非 JSON 格式
  • 定制 UI 打开 / 关闭动画效果

如何快速上手?

  1. 克隆项目到本地,集成到 CocosCreator 工程
  2. 通过菜单栏「CHFramework 工具」打开 Excel 转换工具,处理配置表
  3. 参考示例代码,使用框架提供的基类( ViewBase / ViewModelBase )构建 UI 页面
  4. 利用数据绑定和命令模式关联视图与逻辑

资源与文档

  • 商店地址:点击查看
  • 项目源码:GitHub 仓库
  • 教学视频:包含从基础到进阶的系列教程(点击查看
  • 示例工程:内置完整 Demo,涵盖框架核心功能用法

CHFramework 已在多个实际项目中验证,有效提升了开发效率和代码质量。如果你的项目正使用 CocosCreator,不妨试试这款框架,让开发变得更轻松!

欢迎提交 Issue 和 PR,一起完善这个框架!有任何问题,也可以通过 QQ 或 邮件 与我联系。

8赞

:100:

欢迎提意见呀~

体验了下,还不错。

mark mark

新增【红点系统】 和 【单机系统时间点刷新回调】,一些【扩展组件】持续更新中!!

独立的【高性能红点系统】获取地址:
https://store.cocos.com/app/detail/8337
也可以从框架中直接获取:
https://store.cocos.com/app/detail/8287

新增【WebSocket + Protobuff】,支持一键工具 将 proto文件 转换为 ts协议文件

作为AI编程的爱好者,现在这款框架结合 Cursor,简直不要太好用了,因为逻辑解耦,所以AI编码在这个框架基础上也是非常友好,基本编码也是顺着框架既定的规则去输出,配合 Gemini 或 Cluade 等强力模型,可以说“指哪打哪”!

话说,这COCOS的框架项目 有点多啊,都宣称是第一流的,挑不过来了都

Context.getService(XXService).abc() 的写法看着很难受啊。
最大的问题是 Context 完全没必要出现。业务逻辑不都是在XXService 上吗?直接XXService.abc()
不是更高效简洁。XXService 用Proxy 代理模式,想换什么实现都可以。

用静态类确实会方便点,但是怕滥用了,框架追求的是可靠行和可维护性,我们通过注册Service,可以很好的将所有的Service管理起来,随时切换和销毁。

其实一样的,销毁和切换也能随时做,两个接口的事情。但开发过程中,两个体验就不太一样,一个简洁干净,另一个多打很多字

所以说追求的点不一样 :smiley:

没有说最好啦 :rofl: ,只是说在框架的基础上去用AI写代码很舒服,逻辑解耦,职责分明,AI 会继续沿用你的风格,不会写成屎山。。