tmagic-editor

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

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

在線文檔：tencent.github.io/tmagic-editor/docs/

編輯器

編輯器基礎(chǔ)布局上分為：左面板、工作區(qū)、右面板、工具欄，如下圖。

• 左面板，包含了組件庫(kù)的展示，以及工作區(qū)中已添加組件的組件樹展示。

• 工作區(qū)，一個(gè)頁(yè)面模擬器，用于實(shí)時(shí)展示用戶添加到當(dāng)前頁(yè)面中的組件在真實(shí)頁(yè)面中的展示情況。

• 右面板，展示組件提供出來(lái)的表單選項(xiàng)，讓用戶可以通過(guò)配置項(xiàng)來(lái)改變組件的行為和樣式。

• 工具欄，放置一些如縮放、撤銷等工具按鍵。

組件

組件是tmagic-editor可配置頁(yè)面元素的最小單位。我們都會(huì)從左面板的組件區(qū)中選中組件，加入到工作區(qū)的模擬器中，然后在右面板中對(duì)組件進(jìn)行配置。一個(gè)組件的基本內(nèi)容，會(huì)包含如下：

• 組件樣式、邏輯代碼（即開發(fā)者寫的 vue, react 等代碼）。

• 表單配置描述，tmagic-editor的定義是導(dǎo)出一個(gè)表單對(duì)象，這份配置僅在編輯器中使用。

• 拓展描述，這部分內(nèi)容目前還未有嚴(yán)格定義，但是我們保留這個(gè)擴(kuò)展能力。

• 組件 type, 是組件的類型，這是用來(lái)告訴編輯器，我們要渲染的是什么組件。每個(gè)組件在開發(fā)時(shí)就應(yīng)該確定這樣一個(gè)唯一、不和其他組件沖突的組件 type。

[  {    text: '文本',    type: 'text', ⬅️  },  {    text: '按鈕',    type: 'button', ⬅️  },  {    text: '測(cè)試',    type: 'test', ⬅️  },]

插件

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

插件一般包含如下內(nèi)容：

• 插件邏輯代碼。

• 插件 type，是插件的類型，和組件 type 作用相同。在開發(fā)時(shí)就應(yīng)該確定這樣一個(gè)唯一、不和其他組件沖突的組件 type。

容器

容器是tmagic-editor編輯器中的一個(gè)基礎(chǔ)單位，頁(yè)面本身就是一個(gè)容器，在基礎(chǔ)組件中稱為組，tmagic-editor通過(guò)容器概念，實(shí)現(xiàn)了豐富的布局方式，因?yàn)槲覀兊牟季中袨槭窃O(shè)置在容器上的，容器內(nèi)的組件是絕對(duì)定位、或是順序排布，是根據(jù)容器的配置行為改變的。tmagic-editor的容器理論上可以無(wú)限嵌套。

表單配置

表單配置是編輯器右面板展示的內(nèi)容，配置項(xiàng)目都是由組件里的表單描述來(lái)決定的，用戶可以在表單配置區(qū)域里通過(guò)配置項(xiàng)來(lái)改變組件的行為和樣式。

注意，由于每個(gè)組件都需要有一些共同的表單配置項(xiàng)目，所以tmagic-editor通過(guò)在表單渲染器，統(tǒng)一為所有組件加上了通用的表單配置項(xiàng)目。包括基礎(chǔ)組件樣式配置、鉤子事件配置等。

DSL

DSL 是編輯器搭建頁(yè)面的最終產(chǎn)物（描述文件），其中包含了所有組件信息（組件布局，組件配置等）和插件內(nèi)容，以及其他可拓展的信息都存放在 DSL 中。tmagic-editor項(xiàng)目頁(yè)的展示即是tmagic-editor頁(yè)面在加載 DSL 之后，根據(jù) DSL 的描述進(jìn)行渲染的。在tmagic-editor中，我們使用 JS schema 來(lái)保存這份配置文件。

真實(shí)頁(yè)面渲染（Page）#

這一部分，對(duì)應(yīng)的是 runtime 中的 page。即把tmagic-editor保存后的配置進(jìn)行加載、解析、渲染，然后呈現(xiàn)頁(yè)面的過(guò)程。

頁(yè)面渲染

runtime 是魔方提供的頁(yè)面渲染環(huán)境。通過(guò)加載在編輯器中產(chǎn)出的 DSL，即可得到魔方編輯器希望擁有的最終產(chǎn)物，一個(gè)活動(dòng)頁(yè)面。我們提供了 vue2/vue3/react 幾個(gè)版本的 runtime。

通過(guò)魔方編輯器和 runtime 渲染，以及通過(guò)自定義的復(fù)雜組件開發(fā)，可以在魔方項(xiàng)目上，搭建出復(fù)雜而精美的頁(yè)面。

表單渲染

魔方的表單配置項(xiàng)，使用了我們開發(fā)的基于 element-ui 的 @tmagic/form，@tmagic/form 也可以在其他地方單獨(dú)使用。支持渲染 JS Schema 提供的表單描述。

混合布局

因?yàn)閠magic-editor的布局配置，是指定在容器上的，所以tmagic-editor的設(shè)計(jì)方式，就可以支持在頁(yè)面中實(shí)現(xiàn)各種混合布局的嵌套。

能力項(xiàng)

tmagic-editor主要定位是搭建生成移動(dòng)端H5頁(yè)面，如果有搭建PC端低代碼平臺(tái)的需求，可以了解一下騰訊出品的另外一個(gè)低代碼平臺(tái)：無(wú)極低代碼平臺(tái)。混合布局

toB領(lǐng)域的低代碼平臺(tái)，能支撐超大型復(fù)雜項(xiàng)目，以更自然、高效的方式實(shí)現(xiàn)標(biāo)準(zhǔn)化生產(chǎn)，企業(yè)級(jí)應(yīng)用解決方案！漸進(jìn)式開發(fā)理念：NoCode、LowCode & ProCode。

可以直接在線體驗(yàn)，注冊(cè)之后進(jìn)入界面可以看到

創(chuàng)建應(yīng)用和應(yīng)用組

然后新建表單

設(shè)計(jì)完成后可以直接在線測(cè)試和訪問(wèn)。

發(fā)布設(shè)置支持向?qū)桨l(fā)布到不同的環(huán)境。

支持組件商店

數(shù)據(jù)集市