前言

10月27日晚8點(diǎn)，OpenTiny?社區(qū)開啟了?TinyEngine?開源低代碼引擎首次答疑直播，本次直播我們通過收集開發(fā)者訴求，精心策劃和組織了內(nèi)容，希望提供給大家最明確和清晰的答疑方式。這是?TinyEngine?低代碼引擎直播計(jì)劃的開端，也是打開了 TinyEngine 低代碼引擎與開發(fā)者溝通交流的新途徑。

在本次直播活動(dòng)中，我們?yōu)榇蠹医榻B了?TinyEngine?低代碼引擎——使能開發(fā)者定制低代碼平臺(tái)。并就其基礎(chǔ)功能類、代碼原理解讀類、功能增強(qiáng)類等問題都進(jìn)入了深入的探討和答疑?，F(xiàn)在，我們梳理了本次直播的關(guān)鍵內(nèi)容。

TinyEngine 簡介

低代碼引擎使能開發(fā)者定制低代碼平臺(tái)。它是低代碼平臺(tái)的底座，提供可視化搭建頁面等基礎(chǔ)能力，既可以通過線上搭配組合，也可以通過下載源碼進(jìn)行二次開發(fā)，實(shí)時(shí)定制出自己的低代碼平臺(tái)。適用于多場(chǎng)景的低代碼平臺(tái)開發(fā)，如：資源編排、服務(wù)端渲染、模型驅(qū)動(dòng)、移動(dòng)端、大屏端、頁面編排等。

核心亮點(diǎn)：

• 可以定制開發(fā)低代碼平臺(tái): 支持在線實(shí)時(shí)構(gòu)建,支持二次開發(fā)或被集成

• 支持生成源碼部署: 直接生成可部署的源碼,運(yùn)行時(shí)無需引擎支撐

• 開放協(xié)議接口：允許接入第三方組件，允許定制擴(kuò)展插件

• 支持高低混合開發(fā)：支持高代碼與低代碼，混合開發(fā)部署應(yīng)用

• 支持 AI 輔助開發(fā)：平臺(tái)接入AI 大模型能力，輔助開發(fā)者構(gòu)建應(yīng)用

Q&A合集

基礎(chǔ)功能使用類：

問題1：如何使用第三方組件庫？

答：詳情可以查看官網(wǎng)使用手冊(cè)

問題2：如何使用插槽？

答：詳情可以查看官網(wǎng)使用手冊(cè)

問題3：通過 TinyEngine 低代碼引擎生成代碼到本地時(shí)，如何將生成的源碼頁面獨(dú)立放置在自己的項(xiàng)目中，提供example?

當(dāng)前我們的出碼結(jié)果依賴官方出碼模板，暫時(shí)無法放置在自己項(xiàng)目中獨(dú)立運(yùn)行

第一步：下載?https://github.com/opentiny/tiny-engine-generate-preview?工程，解壓

第二步：將代碼下載到解壓好的文件夾中（提示選擇文件夾的時(shí)候，選擇我們解壓出來的文件夾）

第三步：用代碼編輯器打開文件夾，確認(rèn)出碼結(jié)果，安裝依賴并運(yùn)行 npm run dev 啟動(dòng)服務(wù)，查看效果

后續(xù)相關(guān)的規(guī)劃：

• 支持開發(fā)插件，自定義出碼結(jié)果

• 支持自定義工程模板，結(jié)合自定義出碼結(jié)果，可以無縫在自身項(xiàng)目中運(yùn)行

問題4：怎樣在?TinyEngine 低代碼引擎中擴(kuò)展左側(cè)組件，比如創(chuàng)建用戶、單位選擇。在 form 表單里面使用，拖入這2個(gè)控件，可以彈出 dialog 框選擇用戶和單位，點(diǎn)擊確定后回填到表單上 input 框上？

答：如果是想從零搭建業(yè)務(wù)組件，可以查看官方的文檔教程嘗試一步一步搭建（目前使用手冊(cè)已更新）

如果是已有的業(yè)務(wù)組件，可以嘗試通過導(dǎo)入第三方組件庫的方式導(dǎo)入到左側(cè)物料中。

問題5：分析下?TinyEngine 低代碼引擎中左側(cè)組件、中間區(qū)域渲染和右側(cè)組件屬性的代碼在整體上協(xié)調(diào)一致的思路？

答：先簡要介紹一下我們工程中主要的 package：

區(qū)域大致職責(zé)劃分：

• 左側(cè)面板相關(guān)的范圍：負(fù)責(zé)設(shè)置一些應(yīng)用狀態(tài)、頁面狀態(tài)、以及邏輯的控制、編寫

• 中間畫布：負(fù)責(zé)視圖層的編排

• 右側(cè)屬性面板：負(fù)責(zé)視圖層的屬性控制、樣式精細(xì)編排、事件綁定等屬性相關(guān)

主要的功能入口：

1、資源請(qǐng)求

2、畫布渲染相關(guān)入口

3、畫布選中后，如何關(guān)聯(lián)渲染右側(cè)屬性面板？

上面就是一些簡單的入口簡介，后續(xù)，我們會(huì)增加更多詳細(xì)的架構(gòu)原理、功能設(shè)計(jì)相關(guān)的文檔，敬請(qǐng)期待

問題6：TinyEngine?低代碼引擎是否提供排版組件，怎么實(shí)現(xiàn)靈活排版？

答：我們目前有內(nèi)置的排版組件——行列容器，可以通過簡單的剪切方式實(shí)現(xiàn)輕松的 flex 布局。

問題7：在使用?TinyEngine?低代碼引擎時(shí)，組件內(nèi)的靜態(tài)資源（圖片或者音頻）如何引用？

答：這個(gè)問題要分多種情況討論，

設(shè)計(jì)器開發(fā)：?可以拉下來源代碼，按照原來靜態(tài)資源圖片等分類，放置進(jìn)去要用的圖片，在開發(fā)設(shè)計(jì)器的時(shí)候可以直接使用。

頁面運(yùn)行態(tài)：?可以通過 <input? type="file">標(biāo)簽選中你要的靜態(tài)資源，這部分的邏輯完全取決于用戶

頁面設(shè)計(jì)態(tài)：?低代碼引擎在開源之前是有這樣的功能的，但是為了開源的合規(guī)，屏蔽了該功能。因?yàn)樵谠O(shè)計(jì)態(tài)想用到靜態(tài)資源的話，要選中靜態(tài)資源，并上傳到公司的文件管理系統(tǒng)，然后文件系統(tǒng)返回靜態(tài)資源地址，然后再展示在畫布中。如果用戶想要這樣的功能，只需要開發(fā)一個(gè)文件上傳按鈕，并把上傳的內(nèi)容放置用戶的文件管理系統(tǒng)。

問題8：修改?TinyEngine?低代碼引擎的物料描述文件 bundle.json 之后，無變化是什么原因？

答：可以關(guān)注一下以下 bundle.json 這個(gè)文件的設(shè)置是否正確，尤其是 widget.component 這個(gè)字段

以下為 bundle.json 這個(gè)文件的節(jié)選：

問題9：在使用?TinyEngine?低代碼引擎后，組件之間應(yīng)該如何聯(lián)動(dòng)？

答：實(shí)現(xiàn)的方式是多種的，

方式一：假如 A（輸入框）與 B（顯示框）聯(lián)動(dòng)，那么可以給 A 綁定一個(gè) change 事件，直接影響 B的顯示

方式二：給 B 綁定一個(gè)值，通過影響 B 的值，從而影響 B 的顯示。

方式三：通過 watch 監(jiān)聽

除了以上基礎(chǔ)功能及代碼原理分析的解答，部分開發(fā)者對(duì)于功能增強(qiáng)拓展這部分的內(nèi)容也是十分關(guān)注

問題1：如何將?TinyEngine?低代碼引擎項(xiàng)目集成到 .net 項(xiàng)目中？

答：原來的.net 系統(tǒng)可以繼續(xù)獨(dú)立運(yùn)行，當(dāng)需要跳轉(zhuǎn)到低代碼系統(tǒng)時(shí)候。從原來的.net系統(tǒng)帶出關(guān)鍵參數(shù)。如 projectId, itemId, processId 等，通過URL的傳參形式：https://xxxxxxxxxxx?projectId=1111&itemId=2222222&processId=33333333。?跳轉(zhuǎn)到低代碼系統(tǒng)后，在代碼系統(tǒng)初始化時(shí)候獲取URL的參數(shù)，通過服務(wù)端API接口獲取到相應(yīng)的流程、頁面、物料等等信息。通過低代碼系統(tǒng)搭建頁面會(huì)產(chǎn)生schema或者源代碼，在點(diǎn)擊保存按鈕的時(shí)候可以把想要的產(chǎn)物保存回來原來的.net系統(tǒng)中。

問題2：Java 后端開源的規(guī)劃？

答：目前服務(wù)端有兩套源代碼，一套技術(shù)棧是 node.js ，一套技術(shù)棧是 Java。因?yàn)橐獜墓玖鞒塘鞒虒徟?、技術(shù)評(píng)估還有后面的迭代演進(jìn)等維度考慮，目前還不知最終會(huì)開源哪種技術(shù)棧的服務(wù)端。大家敬請(qǐng)期待12月30號(hào)左右的公告

問題3：TinyEngine?低代碼引擎是否會(huì)增加 typescript 支持？

答：目前暫不支持，后續(xù)有在規(guī)劃增加 typescript 的支持，大家敬請(qǐng)期待

問題4：TinyEngine?低代碼引擎是否提供商業(yè)版本或者商業(yè)上的技術(shù)支持？

答：目前只有一個(gè)開源版本的代碼，沒有商業(yè)版本。至于商業(yè)技術(shù)上的支持，可以找到?OpenTiny?的小助手溝通，詳細(xì)溝通一下貴司具體需要的商業(yè)支持。

問題5：后續(xù)是否會(huì)繼續(xù)迭代 AI 能力？

答：AI 能力目前已經(jīng)在?TinyEngine?官網(wǎng)部署，當(dāng)前采用的大模型是文心一言，通過 AI生成代碼->生成 AST->頁面 schema->展示在頁面->下載源代碼 ，后續(xù)會(huì)切回華為的盤古大模型?，F(xiàn)在 AI 能力的取決于文心一言生成的代碼。同時(shí)我們也通過數(shù)據(jù)和資源的不斷投入在持續(xù)訓(xùn)練我們的 AI 能力，大家敬請(qǐng)期待 AI 能力的持續(xù)迭代。

問題6：TinyEngine 低代碼引擎是否支持 nuxt.js?作為后端的開發(fā)？

答：后端的開發(fā)與技術(shù)棧無關(guān)，是可以采用任意的技術(shù)棧的。我們提供了所有后端接口的文檔，只需要按照設(shè)計(jì)器的文檔來，給出對(duì)應(yīng)接口的出入?yún)⒓纯伞?/p>

問題7：目前 TinyEngine 低代碼引擎的物料平臺(tái)是否會(huì)開源？

答：TinyEngine 目前是用到的物料是已開源的?TinyVue 組件庫，歡迎大家使用~

關(guān)于 OpenTiny

OpenTiny?是一套企業(yè)級(jí) Web 前端開發(fā)解決方案，提供跨端、跨框架的UI組件庫，適配 PC 端 / 移動(dòng)端等多端，支持 Vue2 / Vue3 / Angular 多技術(shù)棧，擁有靈活擴(kuò)展的低代碼引擎，包含主題配置系統(tǒng) / 中后臺(tái)模板 /?CLI?命令行等豐富的效率提升工具，可幫助開發(fā)者高效開發(fā) Web 應(yīng)用。

歡迎加入 OpenTiny 開源社區(qū)。添加微信小助手：opentiny-official 一起參與交流前端技術(shù)～

OpenTiny 官網(wǎng)：https://opentiny.design/

OpenTiny 代碼倉庫：https://github.com/opentiny/

TinyVue 源碼：https://github.com/opentiny/tiny-vue

TinyEngine 源碼：?https://github.com/opentiny/tiny-engine

歡迎進(jìn)入代碼倉庫 Star??TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建，可以進(jìn)入代碼倉庫，找到?good first issue標(biāo)簽，一起參與開源貢獻(xiàn)~