​​小众软件，腾讯低代码可视化生成器，正式开源！

腾讯tmagic-editor是一个所见即所得的页面可视化编辑器，实现零代码/低代码生成页面，可以快速搭建可视化页面生产平台，让非技术人员可以通过拖拽和配置，自助生成H5页面、PC页面、TV页面，大大降低页面生产成本。

以下是腾讯视频会员业务基于tmagic-editor搭建的可视化页面搭建平台示意图。tmagic-editor已经用于腾讯视频会员、爱玩游戏、云视听极光、腾讯会议等十几个腾讯业务，每月生产和发布数百个页面。

基于可视化编辑器的页面生产流程

一、物料开发

主要是指业务组件，比如图片组件、抽奖组件、登录插件等。tmagic-editor本身并不提供业务组件，业务组件由使用tmagic-editor的业务，根据自己的业务需求去自行开发。业务组件一次开发，在多个页面反复使用，业务组件应该提供一些配置选项，保证灵活性，满足不同页面使用该组件时的定制需求。业务组件可以用不同的前端框架实现，如vue2、vue3、react。

二、编排

这里指通过对组件的拖拽和配置，完成页面编辑，主要由非技术人员完成。

三、保存与发布

这个环节在技术实现上，分为生成DSL、构建、部署。生成DSL：编辑器和生成的页面之间，通过DSL解耦。编辑器上配置页面，得到的产物是一个序列化js对象的页面描述文件，这个对象采用jsschema描述，描述页面的基本信息、包含的组件信息、以及组件间逻辑。构建：构建模块基于runtime代码，对组件进行打包构建，生成html、js、css文件。构建环节使用的runtime可以根据业务的需要，选择不同的前端框架实现，tmagic-editor默认提供了vue2、vue3、react三种runtime。部署：将前面环节生成的html、js、css、jsschema描述文件，部署到业务自己的服务器上。

开源地址：github.com/Tencent/tmagic-editor

在线文档：tencent.github.io/tmagic-editor/docs/

在线体验：tencent.github.io/tmagic-editor/playground/index.html

​​以上就是今天要分享的技巧，你学会了吗？若有什么问题，欢迎在下方留言。

学习资料见知识星球。

以上就是今天要分享的技巧，你学会了吗？若有什么问题，欢迎在下方留言。

快来试试吧，小琥 my21ke007。获取 1000个免费 Excel模板福利​​​​！

更多技巧， www.excelbook.cn

欢迎 加入 零售创新 知识星球，知识星球主要以数据分析、报告分享、数据工具讨论为主；