腾讯可视化,低代码生成器,正式开源(腾讯低代码开发)

腾讯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能力项

腾讯可视化,低代码生成器,正式开源(腾讯低代码开发)

如何了解tmagic-editor

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月14日 下午5:57
下一篇 2024年5月15日 上午8:08

相关推荐

  • it项目管理系统 中标

    it项目管理系统中标:提升企业项目管理水平 随着信息技术的不断发展,企业项目管理水平也在不断提高。在这个过程中,it项目管理系统成为了提高项目管理水平的重要工具。近日,我们成功中标…

    科研百科 2024年12月23日
    0
  • 当前社区党建与社区治理有效融合存在的问题

    (一)一核多元的治理体系未形成,社区党建工作与社区治理存在“两张皮”现象,部分社区党组织就党建抓党建,社区治理抓社区治理,社区党组织在宣传动员教育、资源链接整合、矛盾纠纷调节等方面…

    科研百科 2023年11月4日
    219
  • 宁波项目管理系统排行

    宁波项目管理系统排程的简介 随着现代项目管理的日益复杂和快速发展,宁波项目管理系统已经成为了许多企业和个人项目中不可或缺的一部分。本文将介绍宁波项目管理系统排程的基本概念和特点,以…

    科研百科 2024年12月26日
    0
  • 广东省卫生厅课题申报(广东省卫生厅科研项目标书)

    广东省卫生厅科研项目标书 项目简介:本项目旨在研究如何通过饮食改善人体健康状况。我们将通过收集和分析大量数据,比较不同饮食方案对人体的影响,并开发出一种科学有效的饮食方案,以改善人…

    科研百科 2024年8月2日
    50
  • 张贵林重庆师范大学

    张贵林,重庆师范大学教授,教授课程包括马克思主义基本原理、中国近现代史纲要、英语语法与词汇等。他同时也是该校马克思主义理论学科点的负责人。 张贵林教授一直坚信,教育是改变社会的重要…

    科研百科 2024年11月8日
    1
  • 徐正老师 10月02号受邀为上海外高桥造船讲授《通用项目管理》结束

    徐正老师 10月02号受邀为上海外高桥造船讲授《通用项目管理》课程圆满结束!!!目前项目管理的培训很多,但是一般集中在以考试为目的和高端研究为目的,缺乏以实用项目管理手段的工具化课…

    科研百科 2022年12月25日
    211
  • 内网协同办公系统开源(内网协同办公系统)

    内网协同办公系统: 让工作效率提升的办公利器 随着互联网的发展,企业越来越多的人开始使用内网进行协同办公。内网协同办公系统是一种可以帮助企业实现内部协作的办公工具,它可以让企业内部…

    科研百科 2024年6月3日
    98
  • 劳保用品相关的会计分录怎么做?(劳保用品相关的会计分录怎么做的)

    一般生产车间会经常用到劳保用品,那么在工厂里做会计的会计人应该是比较清楚的,如果对这部分知识点不太了解,那就和会计网一起来学习吧。 什么是劳保用品? 劳保用品顾名思义是起到劳动防护…

    科研百科 2024年6月19日
    50
  • 科研项目管理办法

    科研项目管理办法 科研项目管理办法 为加强科研项目管理,提高科研项目的质量和效率,根据《中华人民共和国科学技术法》和其他相关法律、法规,制定本项目管理办法。 第一章 总则 第一条 …

    科研百科 2024年5月29日
    166
  • 红卫农场互动交流提升党建工作水平(红卫农场互动交流提升党建工作水平)

    东北网7月19日讯(通讯员 尚德松)7月11日,胜利农场党委书记魏文华带领党员干部60余人来到红卫农场,就党建及扶贫等工作进行了交流。这是这个场完善阵地建设,创新活动载体,互动交流…

    科研百科 2023年7月6日
    237