|
tmagic-editor 腾讯tmagic-editor是一个所见即所得的页面可视化编辑器，实现零代码/低代码生成页面，可以快速搭建可视化页面生产平台，让非技术人员可以通过拖拽和配置，自助生成H5页面、PC页面、TV页面，大大降低页面生产成本。  开源地址：github.com/Tencent/tmagic-editor 在线文档：tencent.github.io/tmagic-editor/docs/ 编辑器 编辑器基础布局上分为：左面板、工作区、右面板、工具栏，如下图。 左面板，包含了组件库的展示，以及工作区中已添加组件的组件树展示。 工作区，一个页面模拟器，用于实时展示用户添加到当前页面中的组件在真实页面中的展示情况。 右面板，展示组件提供出来的表单选项，让用户可以通过配置项来改变组件的行为和样式。 工具栏，放置一些如缩放、撤销等工具按键。  组件 组件是tmagic-editor可配置页面元素的最小单位。我们都会从左面板的组件区中选中组件，加入到工作区的模拟器中，然后在右面板中对组件进行配置。一个组件的基本内容，会包含如下： 组件样式、逻辑代码（即开发者写的 vue, react 等代码）。 表单配置描述，tmagic-editor的定义是导出一个表单对象，这份配置仅在编辑器中使用。 拓展描述，这部分内容目前还未有严格定义，但是我们保留这个扩展能力。 组件 type, 是组件的类型，这是用来告诉编辑器，我们要渲染的是什么组件。每个组件在开发时就应该确定这样一个唯一、不和其他组件冲突的组件 type。 插件 插件和组件类似，但是插件的功能是作为页面逻辑行为的一种补充方式。一般不显式的在模拟器中被渲染出具体内容（除非插件中会生成组件并插入页面），通常我们会用插件实现类似登录，页面环境判断，请求拦截器等等功能。 插件一般包含如下内容： 插件逻辑代码。 插件 type，是插件的类型，和组件 type 作用相同。在开发时就应该确定这样一个唯一、不和其他组件冲突的组件 type。 容器 容器是tmagic-editor编辑器中的一个基础单位，页面本身就是一个容器，在基础组件中称为组，tmagic-editor通过容器概念，实现了丰富的布局方式，因为我们的布局行为是设置在容器上的，容器内的组件是绝对定位、或是顺序排布，是根据容器的配置行为改变的。tmagic-editor的容器理论上可以无限嵌套。 表单配置 表单配置是编辑器右面板展示的内容，配置项目都是由组件里的表单描述来决定的，用户可以在表单配置区域里通过配置项来改变组件的行为和样式。 注意，由于每个组件都需要有一些共同的表单配置项目，所以tmagic-editor通过在表单渲染器，统一为所有组件加上了通用的表单配置项目。包括基础组件样式配置、钩子事件配置等。 DSL DSL 是编辑器搭建页面的最终产物（描述文件），其中包含了所有组件信息（组件布局，组件配置等）和插件内容，以及其他可拓展的信息都存放在 DSL 中。tmagic-editor项目页的展示即是tmagic-editor页面在加载 DSL 之后，根据 DSL 的描述进行渲染的。在tmagic-editor中，我们使用 JS schema 来保存这份配置文件。 真实页面渲染（Page）# 这一部分，对应的是 runtime 中的 page。即把tmagic-editor保存后的配置进行加载、解析、渲染，然后呈现页面的过程。  页面渲染 runtime 是魔方提供的页面渲染环境。通过加载在编辑器中产出的 DSL，即可得到魔方编辑器希望拥有的最终产物，一个活动页面。我们提供了 vue2/vue3/react 几个版本的 runtime。 通过魔方编辑器和 runtime 渲染，以及通过自定义的复杂组件开发，可以在魔方项目上，搭建出复杂而精美的页面。  表单渲染 魔方的表单配置项，使用了我们开发的基于 element-ui 的 @tmagic/form，@tmagic/form 也可以在其他地方单独使用。支持渲染 JS Schema 提供的表单描述。  混合布局 因为tmagic-editor的布局配置，是指定在容器上的，所以tmagic-editor的设计方式，就可以支持在页面中实现各种混合布局的嵌套。  能力项  tmagic-editor主要定位是搭建生成移动端H5页面，如果有搭建PC端低代码平台的需求，可以了解一下腾讯出品的另外一个低代码平台：无极低代码平台。混合布局 toB领域的低代码平台，能支撑超大型复杂项目，以更自然、高效的方式实现标准化生产，企业级应用解决方案！渐进式开发理念：NoCode、LowCode & ProCode。  可以直接在线体验，注册之后进入界面可以看到  创建应用和应用组 然后新建表单   设计完成后可以直接在线测试和访问。 发布设置支持向导式发布到不同的环境。 支持组件商店 数据集市 猜您喜欢： 【了解】代码生成利器fastmybatis 【展望】2022低代码趋势 【低开】又一低开神作 【疑问】这算是低代码吗？ 【解析】从MDA到低代码 微服务微信交流群添加微信，备注“微服务”进群交流，备注“低开”进低开群交流 关注公众号 soft张三丰 |
|
|
