點擊上方“Java基基”，選擇“設為星標”

做積極的人，而不是積極廢人！

每天?14:00?更新文章，每天掉億點點頭發...

源碼精品專欄

?

• 原創 | Java 2021?超神之路，很肝~
  

• 中文詳細注釋的開源項目
  

• RPC 框架 Dubbo 源碼解析

• 網絡應用框架 Netty 源碼解析

• 消息中間件 RocketMQ 源碼解析
  

• 數據庫中間件 Sharding-JDBC 和 MyCAT 源碼解析

• 作業調度中間件 Elastic-Job 源碼解析

• 分布式事務中間件 TCC-Transaction 源碼解析

• Eureka 和 Hystrix 源碼解析

• Java 并發源碼

來源：網絡

• 基于可視化編輯器的頁面生產流程

• tmagic-editor提供了什么

• 使用tmagic-editor的業務需要做什么

• 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描述文件，部署到業務自己的服務器上。

基于 Spring Boot + MyBatis Plus + Vue & Element 實現的后臺管理系統 + 用戶小程序，支持 RBAC 動態權限、多租戶、數據權限、工作流、三方登錄、支付、短信、商城等功能

• 項目地址：https://gitee.com/zhijiantianya/ruoyi-vue-pro

• 視頻教程：https://doc.iocoder.cn/video/

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 配置能力

• 頁面發布以及發布狀態查看和管理

基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 實現的后臺管理系統 + 用戶小程序，支持 RBAC 動態權限、多租戶、數據權限、工作流、三方登錄、支付、短信、商城等功能

• 項目地址：https://gitee.com/zhijiantianya/yudao-cloud

• 視頻教程：https://doc.iocoder.cn/video/

使用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

---

---

歡迎加入我的知識星球，一起探討架構，交流源碼。加入方式，長按下方二維碼噢：

已在知識星球更新源碼解析如下：

最近更新《芋道 SpringBoot 2.X 入門》系列，已經 101 余篇，覆蓋了?MyBatis、Redis、MongoDB、ES、分庫分表、讀寫分離、SpringMVC、Webflux、權限、WebSocket、Dubbo、RabbitMQ、RocketMQ、Kafka、性能測試等等內容。

提供近 3W 行代碼的 SpringBoot 示例，以及超 6W 行代碼的電商微服務項目。

獲取方式：點“在看”，關注公眾號并回復?666?領取，更多內容陸續奉上。

文章有幫助的話，在看，轉發吧。 謝謝支持喲 (*^__^*）

總結

以上是生活随笔為你收集整理的腾讯低代码平台正式开源！可拖拽、生成手机项目、PC 项目！接私活福利啊！...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。