騰訊tmagic-editor是一個(gè)所見(jiàn)即所得的頁(yè)面可視化編輯器，實(shí)現(xiàn)零代碼/低代碼生成頁(yè)面，可以快速搭建可視化頁(yè)面生產(chǎn)平臺(tái)，讓非技術(shù)人員可以通過(guò)拖拽和配置，自助生成H5頁(yè)面、PC頁(yè)面、TV頁(yè)面，大大降低頁(yè)面生產(chǎn)成本。

以下是騰訊視頻會(huì)員業(yè)務(wù)基于tmagic-editor搭建的可視化頁(yè)面搭建平臺(tái)示意圖。tmagic-editor已經(jīng)用于騰訊視頻會(huì)員、愛(ài)玩游戲、云視聽(tīng)極光、騰訊會(huì)議等十幾個(gè)騰訊業(yè)務(wù)，每月生產(chǎn)和發(fā)布數(shù)百個(gè)頁(yè)面。

基于可視化編輯器的頁(yè)面生產(chǎn)流程

一、物料開(kāi)發(fā)

主要是指業(yè)務(wù)組件，比如圖片組件、抽獎(jiǎng)組件、登錄插件等。tmagic-editor本身并不提供業(yè)務(wù)組件，業(yè)務(wù)組件由使用tmagic-editor的業(yè)務(wù)，根據(jù)自己的業(yè)務(wù)需求去自行開(kāi)發(fā)。

業(yè)務(wù)組件一次開(kāi)發(fā)，在多個(gè)頁(yè)面反復(fù)使用，業(yè)務(wù)組件應(yīng)該提供一些配置選項(xiàng)，保證靈活性，滿足不同頁(yè)面使用該組件時(shí)的定制需求。業(yè)務(wù)組件可以用不同的前端框架實(shí)現(xiàn)，如vue2、vue3、react。

二、編排

這里指通過(guò)對(duì)組件的拖拽和配置，完成頁(yè)面編輯，主要由非技術(shù)人員完成。

三、保存與發(fā)布

這個(gè)環(huán)節(jié)在技術(shù)實(shí)現(xiàn)上，分為生成DSL、構(gòu)建、部署。

• 生成DSL： 編輯器和生成的頁(yè)面之間，通過(guò)DSL解耦。編輯器上配置頁(yè)面，得到的產(chǎn)物是一個(gè)序列化js對(duì)象的頁(yè)面描述文件，這個(gè)對(duì)象采用js schema描述，描述頁(yè)面的基本信息、包含的組件信息、以及組件間邏輯。

• 構(gòu)建： 構(gòu)建模塊基于runtime代碼，對(duì)組件進(jìn)行打包構(gòu)建，生成html、js、css文件。構(gòu)建環(huán)節(jié)使用的runtime可以根據(jù)業(yè)務(wù)的需要，選擇不同的前端框架實(shí)現(xiàn)，tmagic-editor默認(rèn)提供了vue2、vue3、react三種runtime。

• 部署： 將前面環(huán)節(jié)生成的html、js、css、js schema描述文件，部署到業(yè)務(wù)自己的服務(wù)器上。

tmagic-editor提供了什么

可視化編輯器

如上圖所示，就是tmagic-editor可視化編輯器，tmagic-editor基于vue3實(shí)現(xiàn)。包括左側(cè)側(cè)邊欄、組件列表展示、已選組件的組件樹(shù)、中間的頁(yè)面拖拽的畫(huà)布區(qū)域（也叫模擬器）、右側(cè)表單配置區(qū)域、正中間上方的畫(huà)布控制區(qū)域（放大縮小、網(wǎng)格線顯隱）、預(yù)覽、保存、查看源碼（js schema描述的js對(duì)象）、底部區(qū)域的頁(yè)面添加與刪除。編輯器具有擴(kuò)展功能，業(yè)務(wù)可以根據(jù)需要在側(cè)邊欄和頂部欄增加版本管理、發(fā)布等功能。

runtime

runtime 的概念，是理解tmagic-editor頁(yè)面運(yùn)行的重要概念，runtime 是承載tmagic-editor頁(yè)面的運(yùn)行環(huán)境?？梢暬?yè)面需要在tmagic-editor編輯器中搭建、渲染，通過(guò)模擬器所見(jiàn)即所得。

搭建完成后，保存配置并發(fā)布，然后渲染成用戶訪問(wèn)的真實(shí)頁(yè)面。其中涉及到兩個(gè)不同的 runtime：編輯器中的模擬器，終端打開(kāi)真實(shí)頁(yè)面。

由于tmagic-editor在編輯器中的模擬器是通過(guò) iframe 渲染的，和tmagic-editor平臺(tái)本身可以做到框架解耦，所以 runtime 也可以用不同框架開(kāi)發(fā)。目前tmagic-editor提供了 vue2/vue3 和 react 的 runtime 。

各個(gè) runtime 的作用除了作為不同場(chǎng)景下的渲染環(huán)境，同時(shí)也是不同環(huán)境的打包構(gòu)建載體。tmagic-editor示例代碼中的打包就是基于 runtime 進(jìn)行的。

管理端demo

編輯器可以對(duì)一個(gè)頁(yè)面進(jìn)行編輯、配置、發(fā)布，我們還需要一個(gè)管理端來(lái)對(duì)頁(yè)面列表進(jìn)行管理。我們提供了一個(gè)管理端demo，方便業(yè)務(wù)快速搭建起一個(gè)完整的可視化搭建平臺(tái)。管理端提供了如下能力：

• 頁(yè)面列表展示，查詢

• 頁(yè)面創(chuàng)建，復(fù)制

• 頁(yè)面編輯以及 AB TEST 配置能力

• 頁(yè)面發(fā)布以及發(fā)布狀態(tài)查看和管理

使用tmagic-editor的業(yè)務(wù)需要做什么

開(kāi)發(fā)業(yè)務(wù)組件

tmagic-editor并不提供業(yè)務(wù)組件，業(yè)務(wù)需要根據(jù)自己的業(yè)務(wù)場(chǎng)景，開(kāi)發(fā)相應(yīng)的業(yè)務(wù)組件。比如抽獎(jiǎng)組件、視頻播放組件等。tmagic-editor的通用性設(shè)計(jì)，使得業(yè)務(wù)方可以使用不同的前端框架去開(kāi)發(fā)組件。

tmagic-editor官方已經(jīng)提供了vue2/vue3、react的runtime，意味著業(yè)務(wù)可以直接使用這些框架開(kāi)發(fā)組件，如果業(yè)務(wù)想用其它框架開(kāi)發(fā)組件，則需要開(kāi)發(fā)相應(yīng)的runtime。

開(kāi)發(fā)業(yè)務(wù)插件（可選）

插件的功能是作為頁(yè)面邏輯行為的一種補(bǔ)充方式。一般不顯式的在模擬器中被渲染出具體內(nèi)容（除非插件中會(huì)生成組件并插入頁(yè)面），通常我們會(huì)用插件實(shí)現(xiàn)類(lèi)似登錄，頁(yè)面環(huán)境判斷，請(qǐng)求攔截器等功能。跟組件一樣，可以用不同前端框架實(shí)現(xiàn)。

部署可視化搭建服務(wù)

tmagic-editor提供的是開(kāi)源代碼，并不是一個(gè)saas服務(wù)，因此業(yè)務(wù)需要自己部署可視化搭建平臺(tái)的服務(wù)。

構(gòu)建和發(fā)布頁(yè)面

業(yè)務(wù)需要管理自己的組件庫(kù)，在發(fā)布環(huán)節(jié)基于拿到的頁(yè)面js Schema描述文件，基于runtime進(jìn)行打包構(gòu)建，并把打包構(gòu)建的產(chǎn)物部署到自己的服務(wù)器/CDN。

其它定制需求

如果對(duì)編輯器有一些擴(kuò)展需求，編輯器已經(jīng)預(yù)留了相應(yīng)的擴(kuò)展能力，業(yè)務(wù)可以開(kāi)發(fā)相應(yīng)擴(kuò)展功能。tmagic-editor提供了vue2/vue3、react的runtime，業(yè)務(wù)可以修改runtime，或者開(kāi)發(fā)其它前端框架的runtime。

tmagic-editor能力項(xiàng)