tmagic - editor：大厂开源项目，零代码/低代码页面可视化编辑的利器，多端统一方案揭秘！如何用一套代码支持H5/PC，牛牛牛～～～

嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法

企业和开发者们都在寻求更高效、便捷的方式来创建各类页面，无论是H5页面、PC页面还是TV页面。腾讯推出的tmagic - editor页面可视化编辑器，为我们带来了一种全新的解决方案，并且已经开源，这无疑是广大开发者和非技术人员的福音。

项目简介

腾讯tmagic - editor是一个所见即所得的页面可视化编辑器。这意味着什么呢？简单来说，当你在编辑页面的时候，你看到的效果几乎就是最终呈现给用户的效果。

已经有不少腾讯旗下的业务采用了tmagic - editor。像腾讯视频会员、爱玩游戏、云视听极光、腾讯会议等十几个腾讯业务，每个月都会使用这个编辑器生产和发布数百个页面。这足以证明tmagic - editor在实际业务中的高效性和实用性。

快速集成

引入 @tmagic/editor

在 main.js 中写入以下内容：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';

import editorPlugin from '@tmagic/editor';
import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';

import App from './App.vue';

import 'element-plus/dist/index.css';
import '@tmagic/editor/dist/style.css';

const app = createApp(App);
app.use(ElementPlus, {
  locale: zhCn,
});
app.use(router);
app.use(editorPlugin, MagicElementPlusAdapter);
app.mount('#app');

以上代码便完成了 @tmagic/editor 的引入。需要注意的是，样式文件需要单独引入。可以参考我们提供的Playground示例实现代码

使用 m-editor 组件

在 App.vue 中写入以下内容：

<template>
  <m-editor
    v-model="dsl"
    :menu="menu"
    :runtime-url="runtimeUrl"
    :props-configs="propsConfigs"
    :props-values="propsValues"
    :component-group-list="componentGroupList"
  >
  </m-editor>
</template>

<script>
  import { defineComponent, ref } from "vue";

  export default defineComponent({
    name: "App",

    setup() {
      return {
        menu: ref({
          left: [
            // 顶部左侧菜单按钮
          ],
          center: [
            // 顶部中间菜单按钮
          ],
          right: [
            // 顶部右侧菜单按钮
          ],
        }),

        dsl: ref({
          // 初始化页面数据
        }),

        runtimeUrl: "/runtime/vue3/playground/index.html",

        propsConfigs: [
          // 组件属性列表
        ],
        propsValues: [
          // 组件默认值
        ],

        componentGroupList: ref([
          // 组件列表
        ]),
      };
    },
  });
</script>

<style lang="scss">
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  #app {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .m-editor {
    flex: 1;
    height: 100%;
  }
</style>

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

（一）物料开发

物料开发主要是针对业务组件而言的。比如说我们常见的图片组件、抽奖组件、登录插件等都属于业务组件。这里要注意的是，tmagic - editor本身并不提供这些业务组件，而是由使用tmagic - editor的业务根据自身的业务需求自行开发。这种设计虽然看似增加了业务的前期工作量，但实际上却赋予了业务极大的灵活性。因为业务组件一旦开发完成，就可以在多个页面反复使用。而且为了满足不同页面使用该组件时的定制需求，业务组件还应该提供一些配置选项。在开发业务组件时，我们可以使用不同的前端框架来实现，像vue2、vue3、react等都是可行的选择。

例如，如果我们要开发一个抽奖组件，我们可以根据业务的具体需求，使用vue3框架来进行开发。在这个抽奖组件中，我们可以设置一些配置选项，比如抽奖的概率、奖品的种类、抽奖的时间限制等。这样，当这个抽奖组件被应用到不同的页面时，就可以根据每个页面的具体需求进行调整。

（二）编排

编排这个环节主要是由非技术人员来完成的。这一环节的操作相对比较直观，就是通过对组件的拖拽和配置，来完成页面的编辑。比如说，我们想要创建一个活动页面，我们可以从组件列表中拖拽图片组件、文本组件等，然后在右侧的表单配置区域对这些组件进行配置，比如设置图片的大小、文本的字体和颜色等。这种拖拽和配置的方式，就像搭积木一样，不需要编写代码，大大降低了页面制作的门槛。

（三）保存与发布

这个环节在技术实现上分为生成DSL、构建和部署三个步骤。

1. 生成DSL 编辑器和生成的页面之间，通过DSL（领域特定语言）解耦。在编辑器上配置页面时，得到的产物是一个序列化js对象的页面描述文件，这个对象采用js schema描述，它能够描述页面的基本信息、包含的组件信息，以及组件间的逻辑关系。例如，一个简单的H5活动页面的DSL可能包含页面的标题、背景颜色，以及页面中各个组件（如图片组件、按钮组件等）的位置、大小、样式等信息。
2. 构建 构建模块基于runtime代码，对组件进行打包构建，生成html、js、css文件。这里的runtime可以根据业务的需要，选择不同的前端框架实现，tmagic - editor默认提供了vue2、vue3、react三种runtime。比如我们选择vue3作为runtime，构建模块就会按照vue3的规则对组件进行打包构建。假设我们有一个包含图片组件和文本组件的页面，构建过程中会将这两个组件对应的代码按照vue3的格式进行打包，生成对应的html、js、css文件，确保这些文件在浏览器中能够正确地显示页面。
3. 部署 将前面环节生成的html、js、css、js schema描述文件，部署到业务自己的服务器上。这样，用户就可以通过访问服务器来查看我们制作好的页面了。

核心功能

（一）可视化编辑器

tmagic - editor的可视化编辑器界面非常丰富，它是基于vue3实现的。从界面布局来看，它包括左侧侧边栏、组件列表展示、已选组件的组件树、中间的页面拖拽的画布区域（也叫模拟器）、右侧表单配置区域、正中间上方的画布控制区域（用于放大缩小、网格线显隐）、预览、保存、查看源码（js schema描述的js对象）、底部区域的页面添加与删除等功能。而且这个编辑器还具有扩展功能，业务可以根据需要在侧边栏和顶部栏增加版本管理、发布等功能。

比如说，我们在制作一个电商产品展示页面时，左侧侧边栏的组件列表展示中可以找到产品图片组件、产品描述文本组件、购买按钮组件等。我们将这些组件拖拽到中间的画布区域，就可以看到产品图片、描述和按钮在页面上的大致布局。然后通过右侧的表单配置区域，调整图片的大小、描述的字体样式和按钮的颜色等。在这个过程中，我们可以随时通过正中间上方的画布控制区域调整画布的大小以便更好地查看页面布局，也可以通过预览功能查看页面在不同设备上的显示效果。如果我们想要查看页面的源码，也就是以js schema描述的js对象，也可以方便地点击查看源码功能。

（二）runtime

runtime是理解tmagic - editor页面运行的重要概念，它是承载tmagic - editor页面的运行环境。可视化页面需要在tmagic - editor编辑器中搭建、渲染，通过模拟器所见即所得。搭建完成后，保存配置并发布，然后渲染成用户访问的真实页面。这里涉及到两个不同的runtime：编辑器中的模拟器和终端打开真实页面。

由于tmagic - editor在编辑器中的模拟器是通过iframe渲染的，和tmagic - editor平台本身可以做到框架解耦，所以runtime也可以用不同框架开发。目前tmagic - editor提供了vue2/vue3和react的runtime。各个runtime的作用除了作为不同场景下的渲染环境，同时也是不同环境的打包构建载体。例如，在tmagic - editor示例代码中的打包就是基于runtime进行的。如果我们选择vue2作为runtime，那么在打包构建页面时，就会按照vue2的规则进行操作，确保页面在以vue2为runtime的环境中能够正确运行。

（三）管理端demo

除了可视化编辑器和runtime之外，tmagic - editor还提供了一个管理端demo。这个管理端对于整个页面管理来说是非常重要的。它可以对一个页面进行编辑、配置、发布，同时还能对页面列表进行管理。具体来说，它提供了以下能力：

1. 页面列表展示，查询 我们可以在管理端看到所有已经创建的页面列表，并且可以根据页面的名称、创建时间等信息进行查询。例如，如果我们有一个电商平台，有很多不同类型的产品页面，我们可以通过管理端快速查询到某个特定产品的页面。
2. 页面创建，复制 当我们需要创建一个新的页面时，可以直接在管理端进行操作。而且如果有一个已经存在的页面模板，我们想要基于这个模板创建一个新的页面，就可以使用复制功能。比如我们已经有一个成功的活动页面模板，想要创建一个类似的活动页面，就可以直接复制这个模板，然后进行一些修改即可。
3. 页面编辑以及AB TEST配置能力 在管理端，我们可以对页面进行进一步的编辑，比如修改页面的布局、内容等。同时，还可以进行AB TEST配置能力，这对于优化页面效果非常有帮助。例如，我们可以设置不同的页面版本，分别展示给不同的用户群体，然后根据用户的反馈数据，确定哪个版本的页面效果更好。
4. 页面发布以及发布状态查看和管理 当页面编辑完成后，我们可以在管理端进行发布操作，并且可以查看页面的发布状态，比如是否已经成功发布、发布的时间等。如果发现发布过程中有问题，也可以及时进行管理和调整。

应用场景

（一）开发业务组件

前面提到tmagic - editor并不提供业务组件，所以业务需要根据自己的业务场景，开发相应的业务组件。例如，如果是一个游戏业务，可能需要开发游戏角色展示组件、游戏道具使用组件等；如果是一个视频业务，可能需要开发视频播放组件、视频推荐组件等。tmagic - editor的通用性设计，使得业务方可以使用不同的前端框架去开发组件。因为tmagic - editor官方已经提供了vue2/vue3、react的runtime，这意味着业务可以直接使用这些框架开发组件。当然，如果业务想用其它框架开发组件，则需要开发相应的runtime。

假设我们要开发一个游戏角色展示组件，我们可以根据游戏的风格和需求，选择vue3框架进行开发。在这个组件中，我们可以设置角色的外观、动作、技能展示等配置选项，以便在不同的游戏页面中都能灵活使用。

（二）开发业务插件（可选）

插件的功能是作为页面逻辑行为的一种补充方式。一般情况下，插件不会显式地在模拟器中被渲染出具体内容（除非插件中会生成组件并插入页面）。通常我们会用插件实现类似登录，页面环境判断，请求拦截器等功能。跟组件一样，插件也可以用不同前端框架实现。例如，我们要开发一个登录插件，我们可以使用react框架来开发。这个登录插件可以在用户访问页面时，判断用户是否已经登录，如果没有登录，则弹出登录框，引导用户登录。

（三）部署可视化搭建服务

tmagic - editor提供的是开源代码，并不是一个saas服务，所以业务需要自己部署可视化搭建平台的服务。这就要求业务方具备一定的服务器部署和管理能力。例如，业务方需要准备好服务器资源，安装相关的软件环境，将tmagic - editor的开源代码部署到服务器上，确保可视化搭建平台能够正常运行。

（四）构建和发布页面

业务需要管理自己的组件库，在发布环节基于拿到的页面js Schema描述文件，基于runtime进行打包构建，并把打包构建的产物部署到自己的服务器/CDN。比如说，我们在完成一个页面的编辑后，得到了页面的js Schema描述文件，然后根据我们选择的runtime（如vue2），对页面进行打包构建，生成html、js、css文件，最后将这些文件部署到我们自己的服务器或者CDN（内容分发网络）上，这样用户就可以通过网络访问到我们制作的页面了。

（五）其它定制需求

如果对编辑器有一些扩展需求，编辑器已经预留了相应的扩展能力，业务可以开发相应扩展功能。tmagic - editor提供了vue2/vue3、react的runtime，业务可以修改runtime，或者开发其它前端框架的runtime。例如，如果业务想要在编辑器的侧边栏增加一个特定功能的按钮，就可以利用编辑器的扩展能力进行开发。

功能效果

同类项目对比

在页面可视化编辑领域，还有一些其他的项目。这些项目也都有各自的功能和特点。

例如，有一些项目可能专注于特定类型的页面制作，比如专门针对移动端H5页面的可视化编辑，它们可能在移动端的适配性上做了更多的优化，提供了更多适合移动端的组件和模板。但是相对而言，tmagic - editor的优势在于它能够支持多种类型的页面（H5、PC、TV等），适用范围更广。

还有一些项目可能在可视化编辑的操作方式上有所不同。有些可能采用了更简单的拖拽式操作，但是在配置选项上相对较少；而tmagic - editor不仅提供了丰富的拖拽和配置功能，还通过DSL解耦了编辑器和页面，使得页面的构建和管理更加灵活。

另外，在runtime方面，有些项目可能只支持一种或两种前端框架，而tmagic - editor提供了vue2/vue3和react三种runtime，给业务更多的选择空间，方便业务根据自身的技术栈和需求进行选择。

总结

总的来说，腾讯tmagic - editor以其全面的功能、广泛的应用场景、灵活的定制能力以及多runtime支持等特点，在页面可视化编辑领域具有很强的竞争力。无论是对于非技术人员想要快速创建页面，还是对于业务方根据自身需求定制页面，tmagic - editor都是一个非常值得尝试的工具。

项目地址

https://github.com/Tencent/tmagic-editor