共计 2405 个字符，预计需要花费 7 分钟才能阅读完成。
起源：腾讯开源
我的项目简介
腾讯 tmagic-editor 是一个所见即所得的页面可视化编辑器，基于 tmagic-editor 能够疾速搭建可视化页面生产平台，让非技术人员能够通过拖拽和配置，自助生成 H5 页面、PC 页面、TV 页面，大大降低页面生产成本，实现零代码 / 低代码生成页面。
以下是腾讯视频会员业务基于 tmagic-editor 搭建的可视化页面搭建平台示意图。tmagic-editor 曾经用于腾讯视频会员、爱玩游戏、云视听极光、腾讯会议等十几个腾讯业务，每月生产和公布数百个页面。
基于可视化编辑器的页面生产流程
一、物料开发，次要是指业务组件，比方图片组件、抽奖组件、登录插件等。tmagic-editor 自身并不提供业务组件，业务组件由应用 tmagic-editor 的业务，依据本人的业务需要去自行开发。业务组件一次开发，在多个页面重复应用，业务组件应该提供一些配置选项，保障灵活性，满足不同页面应用该组件时的定制需要。业务组件能够用不同的前端框架实现，如 vue2、vue3、react。
二、编排，这里指通过对组件的拖拽和配置，实现页面编辑，次要由非技术人员实现。
三、保留与公布，这个环节在技术实现上，分为生成 DSL、构建、部署。生成 DSL：编辑器和生成的页面之间，通过 DSL 解耦。编辑器上配置页面，失去的产物是一个序列化 js 对象的页面形容文件，这个对象采纳 js schema 形容，形容页面的根本信息、蕴含的组件信息、以及组件间逻辑。构建：构建模块基于 runtime 代码，对组件进行打包构建，生成 html、js、css 文件。构建环节应用的 runtime 能够依据业务的须要，抉择不同的前端框架实现，tmagic-editor 默认提供了 vue2、vue3、react 三种 runtime。部署：将后面环节生成的 html、js、css、js schema 形容文件，部署到业务本人的服务器上。
tmagic-editor 提供了什么
可视化编辑器
如上图所示，就是 tmagic-editor 可视化编辑器，tmagic-editor 基于 vue3 实现。包含左侧侧边栏、组件列表展现、已选组件的组件树、两头的页面拖拽的画布区域（也叫模拟器）、右侧表单配置区域、正中间上方的画布管制区域（放大放大、网格线显隐）、预览、保留、查看源码（js schema 形容的 js 对象）、底部区域的页面增加与删除。编辑器具备扩大性能，业务能够依据须要在侧边栏和顶部栏减少版本治理、公布等性能。
runtime
runtime 的概念，是了解 tmagic-editor 页面运行的重要概念，runtime 是承载 tmagic-editor 页面的运行环境。可视化页面须要在 tmagic-editor 编辑器中搭建、渲染，通过模拟器所见即所得。搭建实现后，保留配置并公布，而后渲染成用户拜访的实在页面。其中波及到两个不同的 runtime：编辑器中的模拟器，终端关上实在页面。
因为 tmagic-editor 在编辑器中的模拟器是通过 iframe 渲染的，和 tmagic-editor 平台自身能够做到框架解耦，所以 runtime 也能够用不同框架开发。目前 tmagic-editor 提供了 vue2/vue3 和 react 的 runtime。
各个 runtime 的作用除了作为不同场景下的渲染环境，同时也是不同环境的打包构建载体。tmagic-editor 示例代码中的打包就是基于 runtime 进行的。
治理端 demo
编辑器能够对一个页面进行编辑、配置、公布，咱们还须要一个治理端来对页面列表进行治理。咱们提供了一个治理端 demo，不便业务疾速搭建起一个残缺的可视化搭建平台。治理端提供了如下能力：
- 页面列表展现，查问
- 页面创立，复制
- 页面编辑以及 AB TEST 配置能力
- 页面公布以及公布状态查看和治理
应用 tmagic-editor 的业务须要做什么
开发业务组件
tmagic-editor 并不提供业务组件，业务须要依据本人的业务场景，开发相应的业务组件。比方抽奖组件、视频播放组件等。tmagic-editor 的通用性设计，使得业务方能够应用不同的前端框架去开发组件。tmagic-editor 官网曾经提供了 vue2/vue3、react 的 runtime，意味着业务能够间接应用这些框架开发组件，如果业务想用其它框架开发组件，则须要开发相应的 runtime。
开发业务插件（可选）
插件的性能是作为页面逻辑行为的一种补充形式。个别不显式的在模拟器中被渲染出具体内容（除非插件中会生成组件并插入页面），通常咱们会用插件实现相似登录，页面环境判断，申请拦截器等性能。跟组件一样，能够用不同前端框架实现。
部署可视化搭建服务
tmagic-editor 提供的是开源代码，并不是一个 saas 服务，因而业务须要本人部署可视化搭建平台的服务。
构建和发布页面
业务须要治理本人的组件库，在公布环节基于拿到的页面 js Schema 形容文件，基于 runtime 进行打包构建，并把打包构建的产物部署到本人的服务器 /CDN。
其它定制需要
如果对编辑器有一些扩大需要，编辑器曾经预留了相应的扩大能力，业务能够开发相应扩大性能。tmagic-editor 提供了 vue2/vue3、react 的 runtime，业务能够批改 runtime，或者开发其它前端框架的 runtime。
tmagic-editor 能力项
很香吧？？
不多说了，真是神仙我的项目，包罗万象，喜爱就间接拿去用吧，疾速开发必备。
微信关注 Java 大后端公众号，回复 8516 即可收费支付。
近期热文举荐：
1.1,000+ 道 Java 面试题及答案整顿 (2022 最新版)
2. 劲爆！Java 协程要来了。。。
3.Spring Boot 2.x 教程，太全了！
4. 别再写满屏的爆爆爆炸类了，试试装璜器模式，这才是优雅的形式！！
5.《Java 开发手册（嵩山版）》最新公布，速速下载！
感觉不错，别忘了顺手点赞 + 转发哦！
