【插件】MVVM 小助手

从开发流派说起: 开发流派,到底哪种才是正途?

现将功能抽出来重写,做成MVVM小助手,主要包含两部分:

  • 插件部分,用于视图组件属性生成和MVVM组件创建
  • 运行时部分,用于数据模型与视图双向绑定

商店地址 MVVM 小助手 | Cocos Store

功能亮点

  • 视图属性与场景编辑器分离的同时,支持属性列表显示
  • 支持定制可识别的属性类型,自动导入属性类型定义
  • 使用正则表达式自动识别属性数组
  • 支持子节点视图组件嵌套
  • 视图属性和数据模型双向绑定,数据更新时,界面同步更新,反之亦然
  • 绑定功能基于vue实现,支持computed计算属性和watch监听属性

效果一览

  • 属性绑定

    操作说明:

    1. 向节点添加视图组件(ExampleView)
    2. 再次选中该节点,即可列出符合节点规则的属性
    3. 点击同步按钮将属性写入视图组件
    4. 面板可以显示节点属性的类型
  • MVVM双向绑定

    操作说明:

    1. 在界面上修改控件的值,可以即时更新到数据模型
    2. 在控制台修改数据模型的值,界面也会即时响应更新
  • 关键代码

快速开始

  • 导入插件后,找到菜单并打开: 扩展 -> oreo-mvvm-assistant -> 打开小助手

    Snipaste_20220815_103504.png

  • 小助手界面如图所示

  • 简单演示

    • 插件配置 页面定制 节点类型节点前缀

      支持自定义的节点/组件类型

    • 组件创建 页面指定名称(如Test1),自动生成 MVVM 组件

    • 手动将生成的视图组件 (Test1View) 挂载到节点树相应节点上

      当选中的节点上已挂载视图组件时,会自动列出识别到的所有属性

      手动点击 ‘Script’ 控件右侧的同步按钮,将属性写入脚本中

    • 如上自动生成的视图属性如下图所示

      特别地,当节点符合数组规则时,会自动生成数组属性

    模型绑定

    界面启动

    • Test1Controller 继承于 cc.Component,将其挂载到任意节点上,并指定 view 属性即可

使用示例

  • 在 runtime/example 中提供了以上示例,将其预制体 AutoPropertyExample 拖动到场景 Canvas 节点下启动即可看到本文开始时展示的效果

8赞

mvvm 在很多功能里面确实好用,给你的插件点个赞

已支持大佬, 不过有点没看太懂, 不知可否简单讲一下这个的应用场景呢 ?

个人感觉局限太大,使用这个插件就必须按照固定的组件结构去写代码

1赞

同感, mvvm已经很方便了,为啥还要放到组件里面“藏起来”,这样维护代码的时候还要creator跟vscode两边看,不累吗?

MVVM部分,在这里不要想的太复杂,它是为单界面服务的,其提供的也是轻量型组件,想法是把界面数据交互部分剥离出来,除了方便控制,逻辑关系也一目了然。
还是因为够轻量,它不会侵入和限制项目原有框架的发挥,更多的是作为功能扩展,在需要的地方使用即可。
ViewNode 自动属性部分倒是强烈推荐,小伙伴们说旧项目都不想再做那种先定义属性再拖拉节点的益智劳动了。
其实主要还是看个人怎么习惯怎么用,怎么舒服怎么来。

1赞

感谢大佬支持[doge]
功能单一的面板/弹窗用的比较多,因为主要还是作数据展示/编辑用。比如个人信息面板,就是一个Pannel,挂上Controller,简单定制一下Model就差不多了,View会根据节点规则自动生成。

1赞

好的, 了解了 :smile:

大佬,有2.x的版本吗?

没有,放弃折腾2.x了

可以用我写这个自己转下,就一个文件

大佬有源码吗?想看一下 cocos 是怎么和 vue 做结合的。

这插件还不开源,你可以在 官方商城 里看看,有挺多优质免费的开源插件可以参考一下。

另外,这个是我当时主要参考的文档:第一次数据交互 · Cocos Creator