来源：腾讯开源项目介绍腾讯tmagic-editor是一款所见即所得的页面可视化编辑器。基于tmagic-editor可快速搭建可视化页面制作平台，非技术人员也可通过拖拽配置自行生成。H5页面、PC页面、TV页面大大降低页面制作成本，实现零代码/低代码生成页面。下面是腾讯视频会员业务基于tmagic-editor搭建的可视化页面构建平台示意图。tmagic-editor已应用于腾讯视频会员、爱玩游戏、云视听极光、腾讯会议等十几家腾讯业务，每月制作发布上百页。基于可视化编辑器的页面制作流程1.素材开发主要指业务组件，如图片组件、抽奖组件、登录插件等，tmagic-editor本身不提供业务组件，业务组件由业务组件开发根据自己的业务需要使用tmagic-editor。业务组件一次开发，多个页面重复使用。业务组件应该提供一些配置选项，以保证在不同页面上使用该组件时的灵活性和定制化需求。业务组件可以用不同的前端框架实现，比如vue2、vue3、react。2.编排，这里指的是通过拖拽配置组件的方式完成页面编辑，主要由非技术人员完成。3.保存并发布。在技??术实现上，这个环节分为生成DSL、构建、部署。生成DSL：编辑器和生成的页面通过DSL解耦。在编辑器上配置页面，得到的产品是序列化js对象的页面描述文件。这个对象是用jsschema来描述的，它描述了页面的基本信息，包含的组件信息，以及组件之间的逻辑。构建：构建模块基于运行时代码，对组件进行打包构建，生成html、js、css文件。构建过程中使用的runtime可以根据业务需要选择不同的前端框架来实现。tmagic-editor默认提供三种运行时：vue2、vue3、react。部署：将前面步骤生成的html、js、css、jsschema描述文件部署到业务自己的服务器上。tmagic-editor提供什么可视化编辑器？如上图所示，就是tmagic-editor可视化编辑器，tmagic-editor是基于vue3实现的。包括左侧边栏、组件列表展示、选中组件的组件树、中间页面拖拽画布区（也叫模拟器）、右侧表单配置区、中间正上方的画布控制区（放大、缩放）out、显示或隐藏网格线）、预览、保存、查看源码（jsschema描述的js对象）、底部区域增删页面。编辑器具有扩展功能，商家可以根据需要在侧边栏和顶部栏添加版本管理、发布等功能。runtime的概念runtime是理解tmagic-editor页面运行的一个重要概念，runtime是承载tmagic-editor页面的运行环境。可视化页面需要在tmagic-editor编辑器中构建渲染，所见即所得，通过模拟器。构建完成后，保存配置并发布，然后渲染成用户访问的真实页面。涉及两个不同的运行时：编辑器中的模拟器和终端中打开的真实页面。由于tmagic-editor在编辑器中的模拟器是通过iframe渲染的，而且框架可以和tmagic-editor平台本身解耦，所以runtime也可以用不同的框架开发。目前tmagic-editor提供vue2/vue3和reactruntime。每个运行时的作用不仅是作为不同场景下的渲染环境，更是不同环境下的打包构建载体。tmagic-editor示例代码中的打包是基于runtime的。管理端demo编辑器可以编辑、配置、发布一个页面，我们还需要一个管理端来管理页面列表。我们提供了管理端的demo，方便业务快速搭建完整的可视化搭建平台。管理端提供如下能力：页面列表展示、查询页面创建、复制页面编辑、ABTEST配置能力页面发布发布状态查看和管理使用tmagic-editor业务组件开发需要什么tmagic-editor做什么不提供业务组件，业务需要根据自己的业务场景开发相应的业务组件。比如彩票组件，视频播放组件等。tmagic-editor的通用设计使得业务方可以使用不同的前端框架来开发组件。tmagic-editor官方已经提供了vue2/vue3和reactruntimes，也就是说业务可以直接使用这些框架来开发组件。如果业务要使用其他框架开发组件，需要开发相应的runtime。开发业务插件（可选）插件功能是页面逻辑行为的一种补充方式。通常，特定内容不会在模拟器中显式呈现（除非组件在插件中生成并插入到页面中）。通常，我们使用插件来实现登录、页面环境判断、请求拦截等功能。和组件一样，它可以用不同的前端框架来实现。部署可视化搭建服务tmagic-editor提供开源代码，非saas服务，业务需自行部署可视化搭建平台服务。要构建和发布页面业务，您需要管理自己的组件库。在发布过程中，根据获取到的页面jsschema描述文件，基于runtime进行打包构建，将打包构建的产品部署到自己的服务器/CDN上。其他定制需求如果对编辑器有一些扩展需求，编辑器预留了相应的扩展能力，业务可以开发相应的扩展功能。tmagic-editor提供了vue2/vue3和react的runtime，业务可以修改runtime，或者开发其他前端框架的runtime。tmagic-editor这个能力项很香吧？？话不多说，真是神仙项目，该有的都有，喜欢就用，快速开发必备。微信关注Java大后台公众号，回复8516免费领取。近期热点文章推荐：1.1000+Java面试题及答案（2022最新版）2.厉害了！Java协程来了。..3.SpringBoot2.x教程，太全面了！4.不要用爆破爆满画面，试试装饰者模式，这才是优雅的方式！！5.《Java开发手册（嵩山版）》最新发布，赶快下载吧！感觉不错，别忘了点赞+转发！
