成人综合电影,tkvk,日本午夜在线

騰訊開源的可視化低開工具

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2023年10月7日 10:12 本文熱度 635

tmagic-editor

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

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

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

編輯器

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

左面板，包含了組件庫的展示，以及工作區(qū)中已添加組件的組件樹展示。
工作區(qū)，一個(gè)頁面模擬器，用于實(shí)時(shí)展示用戶添加到當(dāng)前頁面中的組件在真實(shí)頁面中的展示情況。
右面板，展示組件提供出來的表單選項(xiàng)，讓用戶可以通過配置項(xiàng)來改變組件的行為和樣式。
工具欄，放置一些如縮放、撤銷等工具按鍵。

組件

組件是tmagic-editor可配置頁面元素的最小單位。我們都會(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, 是組件的類型，這是用來告訴編輯器，我們要渲染的是什么組件。每個(gè)組件在開發(fā)時(shí)就應(yīng)該確定這樣一個(gè)唯一、不和其他組件沖突的組件 type。

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

插件

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

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

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

容器

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

表單配置

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

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

DSL

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

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

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

頁面渲染

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

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

表單渲染

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

混合布局

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

能力項(xiàng)

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